Itération de tableau JavaScript
Les méthodes d'itération de tableau fonctionnent sur chaque élément du tableau.
Tableau JavaScript pour chaque()
La forEach()méthode appelle une fonction (une fonction de rappel) une fois pour chaque élément du tableau.
Exemple
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Notez que la fonction prend 3 arguments :
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
L'exemple ci-dessus utilise uniquement le paramètre value. L'exemple peut être réécrit en :
Exemple
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
Carte de tableau JavaScript()
La map()méthode crée un nouveau tableau en exécutant une fonction sur chaque élément du tableau.
La map()méthode n'exécute pas la fonction pour les éléments de tableau sans valeurs.
La map()méthode ne modifie pas le tableau d'origine.
Cet exemple multiplie chaque valeur de tableau par 2 :
Exemple
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Notez que la fonction prend 3 arguments :
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
Lorsqu'une fonction de rappel utilise uniquement le paramètre value, les paramètres index et array peuvent être omis :
Exemple
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Filtre de tableau JavaScript()
La filter()méthode crée un nouveau tableau avec des éléments de tableau qui réussit un test.
Cet exemple crée un nouveau tableau à partir d'éléments dont la valeur est supérieure à 18 :
Exemple
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Notez que la fonction prend 3 arguments :
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
Dans l'exemple ci-dessus, la fonction de rappel n'utilise pas les paramètres d'index et de tableau, ils peuvent donc être omis :
Exemple
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Réduire le tableau JavaScript ()
La reduce()méthode exécute une fonction sur chaque élément du tableau pour produire (le réduire à) une valeur unique.
La reduce()méthode fonctionne de gauche à droite dans le tableau. Voir aussi reduceRight().
La reduce()méthode ne réduit pas le tableau d'origine.
Cet exemple trouve la somme de tous les nombres dans un tableau :
Exemple
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Notez que la fonction prend 4 arguments :
- Le total (la valeur initiale / la valeur précédemment renvoyée)
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
L'exemple ci-dessus n'utilise pas les paramètres d'index et de tableau. Il peut être réécrit en :
Exemple
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
La reduce()méthode peut accepter une valeur initiale :
Exemple
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
Tableau JavaScript reduceRight()
La reduceRight()méthode exécute une fonction sur chaque élément du tableau pour produire (le réduire à) une valeur unique.
Les reduceRight()œuvres de droite à gauche dans le tableau. Voir aussi reduce().
La reduceRight()méthode ne réduit pas le tableau d'origine.
Cet exemple trouve la somme de tous les nombres dans un tableau :
Exemple
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Notez que la fonction prend 4 arguments :
- Le total (la valeur initiale / la valeur précédemment renvoyée)
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
L'exemple ci-dessus n'utilise pas les paramètres d'index et de tableau. Il peut être réécrit en :
Exemple
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Tableau JavaScript chaque()
La every()méthode vérifie si toutes les valeurs du tableau réussissent un test.
Cet exemple vérifie si toutes les valeurs du tableau sont supérieures à 18 :
Exemple
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Notez que la fonction prend 3 arguments :
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
Lorsqu'une fonction de rappel utilise uniquement le premier paramètre (valeur), les autres paramètres peuvent être omis :
Exemple
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Tableau JavaScript certains()
La some()méthode vérifie si certaines valeurs du tableau réussissent un test.
Cet exemple vérifie si certaines valeurs de tableau sont supérieures à 18 :
Exemple
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Notez que la fonction prend 3 arguments :
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
Tableau JavaScript indexOf()
La indexOf()méthode recherche dans un tableau une valeur d'élément et renvoie sa position.
Remarque : Le premier élément a la position 0, le deuxième élément a la position 1, et ainsi de suite.
Exemple
Rechercher un tableau pour l'élément "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Syntaxe
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf() renvoie -1 si l'élément n'est pas trouvé.
Si l'élément est présent plus d'une fois, il renvoie la position de la première occurrence.
Tableau JavaScript lastIndexOf()
Array.lastIndexOf()est identique à Array.indexOf(), mais renvoie la position de la dernière occurrence de l'élément spécifié.
Exemple
Rechercher un tableau pour l'élément "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Syntaxe
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
Recherche de tableau JavaScript ()
La find()méthode renvoie la valeur du premier élément du tableau qui réussit une fonction de test.
Cet exemple trouve (renvoie la valeur de) le premier élément supérieur à 18 :
Exemple
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Notez que la fonction prend 3 arguments :
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
Prise en charge du navigateur
find() est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() n'est pas pris en charge dans Internet Explorer.
Tableau JavaScript findIndex()
La findIndex()méthode renvoie l'indice du premier élément du tableau qui réussit une fonction de test.
Cet exemple trouve l'index du premier élément supérieur à 18 :
Exemple
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Notez que la fonction prend 3 arguments :
- La valeur de l'article
- L'index des articles
- Le tableau lui-même
Prise en charge du navigateur
findIndex() est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() n'est pas pris en charge dans Internet Explorer.
Tableau JavaScript.from()
La Array.from()méthode renvoie un objet Array à partir de n'importe quel objet avec une propriété de longueur ou de n'importe quel objet itérable.
Exemple
Créez un tableau à partir d'une chaîne :
Array.from("ABCDEFG");
Prise en charge du navigateur
from() est une fonctionnalité ES6 (JavaScript 2015).
Il est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() n'est pas pris en charge dans Internet Explorer.
Clés de tableau JavaScript()
La Array.keys()méthode renvoie un objet Array Iterator avec les clés d'un tableau.
Exemple
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.