JavaScript forEach - Comment effectuer une boucle dans un tableau dans JS

La méthode JavaScript forEach est l'une des nombreuses façons de parcourir des tableaux. Chaque méthode a des fonctionnalités différentes, et c'est à vous, en fonction de ce que vous faites, de décider laquelle utiliser.

Dans cet article, nous allons examiner de plus près la méthode JavaScript forEach.

Considérant que nous avons le tableau suivant ci-dessous:

const numbers = [1, 2, 3, 4, 5];

Utiliser la traditionnelle "boucle for" pour parcourir le tableau serait comme ceci:

for (i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 

Qu'est-ce qui différencie la méthode forEach ()?

La méthode forEach est également utilisée pour faire une boucle dans les tableaux, mais elle utilise une fonction différemment de la "boucle for" classique.

La méthode forEach transmet une fonction de rappel pour chaque élément d'un tableau avec les paramètres suivants:

  • Valeur actuelle (obligatoire) - La valeur de l'élément de tableau actuel
  • Index (facultatif) - Le numéro d'index de l'élément actuel
  • Array (facultatif) - L'objet de tableau auquel appartient l'élément actuel

Laissez-moi vous expliquer ces paramètres étape par étape.

Tout d'abord, pour parcourir un tableau en utilisant la méthode forEach, vous avez besoin d'une fonction de rappel (ou fonction anonyme):

numbers.forEach(function() { // code });

La fonction sera exécutée pour chaque élément du tableau. Il doit prendre au moins un paramètre qui représente les éléments d'un tableau:

numbers.forEach(function(number) { console.log(number); });

C'est tout ce que nous devons faire pour boucler le tableau:

Vous pouvez également utiliser la représentation de la fonction de flèche ES6 pour simplifier le code:

numbers.forEach(number => console.log(number));

Paramètres facultatifs

Indice

Très bien maintenant, continuons avec les paramètres facultatifs. Le premier est le paramètre "index", qui représente le numéro d'index de chaque élément.

Fondamentalement, nous pouvons voir le numéro d'index d'un élément si nous l'incluons comme deuxième paramètre:

numbers.forEach((number, index) => { console.log('Index: ' + index + ' Value: ' + number); });

Tableau

Le paramètre de tableau est le tableau lui-même. Il est également facultatif et peut être utilisé si nécessaire dans diverses opérations. Sinon, si nous l'appelons, il sera simplement imprimé autant de fois que le nombre d'éléments du tableau:

numbers.forEach((number, index, array) => { console.log(array); });

Vous pouvez voir l'exemple d'utilisation de la méthode forEach () dans cette vidéo:

Prise en charge du navigateur

La méthode Array.forEach est prise en charge dans tous les navigateurs attendent la version 8 ou antérieure d'IE:

Si vous souhaitez en savoir plus sur le développement Web, n'hésitez pas à visiter ma chaîne Youtube.

Merci pour la lecture!