Array : méthode forEach()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La méthodeforEach() des instances deArray exécute une fonction fournie une fois pour chaque élément du tableau.

Exemple interactif

const array = ["a", "b", "c"];array.forEach((element) => console.log(element));// Sortie attendue : "a"// Sortie attendue : "b"// Sortie attendue : "c"

Syntaxe

forEach(callbackFn)forEach(callbackFn, thisArg)

Paramètres

callbackFn

La fonction à exécuter pour chaque élément du tableau. Sa valeur de retour est ignorée. La fonction est appelée avec les arguments suivants :

element: L'élément en cours de traitement dans le tableau.
index: L'indice de l'élément en cours de traitement dans le tableau.
array: Le tableau sur lequel la méthodeforEach() a été appelée.

thisArgFacultatif

La valeur à utiliser commethis lors de l'exécution de la fonctioncallbackFn. Voirles méthodes itératives.

La méthodeforEach() est uneméthode itérative. Elle appelle la fonctioncallbackFn fournie une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Contrairement àmap(),forEach() renvoie toujoursundefined et n'est pas chaînable. L'usage typique est d'exécuter des effets de bord à la fin d'une chaîne. Consultez la sectionméthodes itératives pour plus d'informations sur le fonctionnement général de ces méthodes.

La fonctioncallbackFn est appelée uniquement pour les indices du tableau qui ont une valeur attribuée. Elle n'est pas appelée pour les cases vides dansun tableau creux.

La méthodeforEach() estgénérique. Elle attend seulement que la valeur dethis possède une propriétélength et des propriétés à clés entières.

Il n'existe aucun moyen d'arrêter ou de sortir d'une boucleforEach() autrement qu'en lançant une exception. Si vous avez besoin de ce comportement, la méthodeforEach() n'est pas adaptée.

L'arrêt anticipé peut être réalisé avec des instructions de boucle commefor,for...of etfor...in. Les méthodes de tableau commeevery(),some(),find(), etfindIndex() arrêtent aussi l'itération dès que ce n'est plus nécessaire.

forEach() attend une fonction synchrone — elle n'attend pas les promesses. Veillez à bien comprendre les implications de l'utilisation de promesses (ou de fonctions asynchrones) comme fonctions de rappel deforEach.

const notes = [5, 4, 5];let somme = 0;const fonctionSommeAsync = async (a, b) => a + b;notes.forEach(async (note) => {  somme = await fonctionSommeAsync(somme, note);});console.log(somme);// Sortie attendue : 14// Sortie réelle : 0

Pour exécuter une série d'opérations asynchrones séquentiellement ou en concurrence, voir la sectioncomposition de promesses.

Exemples

Conversion d'une boucle`for` en`forEach`

const elements = ["élément 1", "élément 2", "élément 3"];const elementsCopie = [];// avantfor (let i = 0; i < elements.length; i++) {  elementsCopie.push(elements[i]);}// aprèselements.forEach((element) => {  elementsCopie.push(element);});

Afficher le contenu d'un tableau

Note :Pour afficher le contenu d'un tableau dans la console,vous pouvez utiliserconsole.table(), qui affiche une version mise en forme du tableau.

L'exemple suivant illustre une autre approche, utilisantforEach().

Le code suivant affiche une ligne pour chaque élément d'un tableau :

const logArrayElements = (element, index /*, array */) => {  console.log(`a[${index}] = ${element}`);};// Remarquez que l'indice 2 est ignoré, car il n'y a pas d'élément à cette position dans le tableau.[2, 5, , 9].forEach(logArrayElements);// Affiche :// a[0] = 2// a[1] = 5// a[3] = 9

Utilisation de`thisArg`

L'exemple (artificiel) suivant met à jour les propriétés d'un objet à partir de chaque entrée du tableau :

class Compteur {  constructor() {    this.somme = 0;    this.compte = 0;  }  ajouter(tableau) {    // Seules les expressions de fonction possèdent leur propre liaison this.    tableau.forEach(function compterEntree(entree) {      this.somme += entree;      ++this.compte;    }, this);  }}const obj = new Compteur();obj.ajouter([2, 5, 9]);console.log(obj.compte); // 3console.log(obj.somme); // 16

Puisque le paramètrethisArg (this) est fourni àforEach(), il est transmis àcallback à chaque appel.La fonction de rappel l'utilise comme valeur dethis.

Note :Si la fonction de rappel passée était unefonction fléchée,le paramètrethisArg pourrait être omis,car toutes les fonctions fléchées lient lexicalement la valeur dethis.

Fonction de copie d'objet

Le code suivant crée une copie d'un objet donné.

Il existe différentes manières de copier un objet. Ce qui suit n'est qu'une façon de faire et est présenté pour expliquer le fonctionnement deArray.prototype.forEach() en utilisant les fonctions utilitairesObject.*.

const copie = (objet) => {  const copie = Object.create(Object.getPrototypeOf(objet));  const nomsProp = Object.getOwnPropertyNames(objet);  nomsProp.forEach((nom) => {    const desc = Object.getOwnPropertyDescriptor(objet, nom);    Object.defineProperty(copie, nom, desc);  });  return copie;};const obj1 = { a: 1, b: 2 };const obj2 = copie(obj1); // obj2 est identique à obj1 maintenant

Aplatir un tableau

L'exemple suivant est uniquement présent à des fins d'apprentissage. Si vous souhaitez aplatir un tableau en utilisant des méthodes intégrées, vous pouvez utiliserArray.prototype.flat().

const aplatir = (arr) => {  const resultat = [];  arr.forEach((item) => {    if (Array.isArray(item)) {      resultat.push(...aplatir(item));    } else {      resultat.push(item);    }  });  return resultat;};// Utilisationconst imbrique = [1, 2, 3, [4, 5, [6, 7], 8, 9]];console.log(aplatir(imbrique)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Utilisation du troisième argument de`callbackFn`

L'argumentarray est utile si vous souhaitez accéder à un autre élément du tableau, en particulier lorsque vous n'avez pas de variable existante qui fait référence au tableau. L'exemple suivant utilise d'abordfilter() pour extraire les valeurs positives, puis utiliseforEach() pour afficher ses voisins.

const nombres = [3, -1, 1, 4, 1, 5];nombres  .filter((num) => num > 0)  .forEach((num, idx, arr) => {    // Sans l'argument arr, il n'y a aucun moyen d'accéder facilement au tableau intermédiaire sans le stocker dans une variable.    console.log(arr[idx - 1], num, arr[idx + 1]);  });// undefined 3 1// 3 1 4// 1 4 1// 4 1 5// 1 5 undefined

Utilisation de`forEach()` sur les tableaux creux

const tableauCreux = [1, 3, /* vide */, 7];let nombreAppelsCallback = 0;tableauCreux.forEach((element) => {  console.log({ element });  nombreAppelsCallback++;});console.log({ nombreAppelsCallback });// { element: 1 }// { element: 3 }// { element: 7 }// { nombreAppelsCallback: 3 }

La fonction de rappel n'est pas appelée pour la valeur manquante à l'indice 2.

Appel de`forEach()` sur des objets ressemblant à des tableaux

La méthodeforEach() lit la propriétélength dethis puis accède à chaque propriété dont la clé est un entier non négatif inférieur àlength.

const objetSimilaireTableau = {  length: 3,  0: 2,  1: 3,  2: 4,  3: 5, // ignoré par forEach() car length vaut 3};Array.prototype.forEach.call(objetSimilaireTableau, (x) => console.log(x));// 2// 3// 4