Itérations de tableaux JavaScript
Méthodes d'itération de tableaux
Les méthodes d'itération de tableaux s'appliquent à chaque élément du tableau.
JavaScript Array forEach()
La méthode forEach() 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'élément
- L'index de l'élément
- Le tableau lui-même
L'exemple ci-dessus utilise uniquement le paramètre de valeur. L'exemple peut être réécrit comme suit :
Exemple
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
} JavaScript Array map()
La méthode map() crée un nouveau tableau en appliquant une fonction à chaque élément du tableau.
La méthode map() n'exécute pas la fonction pour les éléments du tableau sans valeurs.
La méthode map() ne modifie pas le tableau d'origine.
Cet exemple multiplie chaque valeur du 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'élément
- L'index de l'élément
- Le tableau lui-même
Lorsqu'une fonction de rappel utilise uniquement le paramètre de valeur, les paramètres d'index et de tableau peuvent être omis :
Exemple
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
} JavaScript Array flatMap()
ES2019 a ajouté la méthode Array flatMap() à JavaScript.
La méthode flatMap() mappe d'abord tous les éléments d'un tableau, puis crée un nouveau tableau en aplatissant le tableau.
Exemple
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2); Support des navigateurs
flatMap() est une fonctionnalité d' ECMAScript 2019 .
ES2019 est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
| Avr 2018 | Jan 2020 | Juin 2018 | Sep 2018 | Mai 2018 |
JavaScript Array filter()
La méthode filter() crée un nouveau tableau avec les éléments du tableau qui passent un test.
Cet exemple crée un nouveau tableau à partir des éléments ayant une valeur 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'élément
- L'index de l'élément
- 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, donc ils peuvent être omis :
Exemple
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
} JavaScript Array reduce()
La méthode reduce() exécute une fonction sur chaque élément du tableau pour produire une seule valeur.
La méthode reduce() fonctionne de gauche à droite dans le tableau. Voir aussi reduceRight() .
Remarque
La méthode reduce() ne modifie 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 / valeur précédemment retournée)
- La valeur de l'élément
- L'index de l'élément
- Le tableau lui-même
Comme l'exemple ci-dessus n'utilise pas les paramètres d'index et de tableau, il peut être réécrit comme suit :
Exemple
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
} La méthode reduce() 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;
} JavaScript Array reduceRight()
La méthode reduceRight() exécute une fonction sur chaque élément du tableau pour produire une seule valeur.
La méthode reduceRight() fonctionne de droite à gauche dans le tableau. Voir aussi reduce() .
Remarque
La méthode reduceRight() ne modifie 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.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
} Notez que la fonction prend 4 arguments :
- Le total (la valeur initiale / valeur précédemment retournée)
- La valeur de l'élément
- L'index de l'élément
- 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 comme suit :
Exemple
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
} JavaScript Array every()
La méthode every() vérifie si toutes les valeurs du tableau passent 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'élément
- L'index de l'élément
- 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;
} JavaScript Array some()
La méthode some() vérifie si certaines valeurs du tableau passent un test.
Cet exemple vérifie si certaines valeurs du 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'élément
- L'index de l'élément
- Le tableau lui-même
JavaScript Array.from()
La méthode Array.from() renvoie un objet Array à partir de :
-
Tout objet itérable
-
Tout objet avec une propriété length
Exemple
Créez un tableau à partir d'une chaîne :
let text = "ABCDEFG";
Array.from(text);
Array.from() a un paramètre optionnel qui vous permet d'exécuter une fonction sur chaque élément du nouveau tableau :
Exemple
Créez un tableau à partir d'un tableau :
const myNumbers = [1,2,3,4];
const myArr = Array.from(myNumbers, (x) => x * 2); Support des navigateurs
from() est une fonctionnalité ES6 .
ES6 est entièrement pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avr 2017 | Juin 2017 | Sep 2016 | Juin 2016 |
JavaScript Array keys()
La méthode Array.keys() renvoie un objet Array Iterator avec les clés d'un tableau.
Exemple
Créez un objet Array Iterator, contenant les clés du tableau :
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
} Support des navigateurs
keys() est une fonctionnalité ES6 .
ES6 est entièrement pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avr 2017 | Juin 2017 | Sep 2016 | Juin 2016 |
JavaScript Array entries()
Exemple
Créez un Array Iterator, puis itérez sur les paires clé/valeur :
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
} La méthode entries() renvoie un objet Array Iterator avec des paires clé/valeur :
[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]
La méthode entries() ne modifie pas le tableau d'origine.
Support des navigateurs
entries() est une fonctionnalité ES6 .
ES6 est entièrement pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avr 2017 | Juin 2017 | Sep 2016 | Juin 2016 |
Méthode JavaScript Array with()
ES2023 a ajouté la méthode Array with() comme moyen sûr de mettre à jour les éléments d'un tableau sans altérer le tableau d'origine.
Exemple
const months = ["Januar", "Februar", "Mar", "April"];
const myMonths = months.with(2, "March"); JavaScript Array Spread (...)
L'opérateur ... étend un tableau en éléments individuels.
Cela peut être utilisé pour joindre des tableaux :
Exemple 1
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
Dans l'exemple ci-dessus, ...arr1 étend arr1 en éléments uniques, ...arr2 étend arr2 en éléments uniques, et arr3 est construit en utilisant ...arr1 et ...arr2.
Exemple 2
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "Des"];
const year = [...q1, ...q2, ...q3, ...q4]; L'opérateur de propagation (...) peut être utilisé pour copier un tableau :
Exemple 3
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; L'opérateur de propagation (...) peut être utilisé pour passer des arguments à une fonction :
Exemple 4
const numbers = [23,55,21,87,56];
let minValue = Math.min(...numbers);
let maxValue = Math.max(...numbers);
Support des navigateurs
... (spread) est une fonctionnalité ES6 .
ES6 est entièrement pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avr 2017 | Juin 2017 | Sep 2016 | Juin 2016 |
JavaScript Array Rest (...)
L'opérateur rest (...) nous permet de déstructurer un tableau et de collecter les éléments restants :
Exemple 1
let a, rest;
const arr1 = [1,2,3,4,5,6,7,8];
[a, ...rest] = arr1;
Exemple 2
let a, b, rest;
const arr1 = [1,2,3,4,5,6,7,8];
[a, b, ...rest] = arr1;
Support des navigateurs
... (rest) est une fonctionnalité ECMAScript 2018 .
ES2018 est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :
| Chrome 64 | Edge 79 | Firefox 58 | Safari 12 | Opera 51 |
| Jan 2018 | Jan 2020 | Jan 2018 | Sep 2018 | Fév 2018 |
Référence complète de JavaScript
Pour une référence complète de toutes les propriétés et méthodes JavaScript, avec des descriptions détaillées et de nombreux exemples, rendez-vous sur :
formation-ti.org' Référence complète de JavaScript .
La référence inclut toutes les mises à jour JavaScript de 1999 à 2025.