JavaScript forEach - Hoe loop je door een array in JS

De JavaScript forEach-methode is een van de vele manieren om door arrays te lopen. Elke methode heeft verschillende functies en het is aan jou, afhankelijk van wat je doet, om te beslissen welke je wilt gebruiken.

In dit bericht gaan we de JavaScript forEach-methode nader bekijken.

Gezien het feit dat we de volgende array hieronder hebben:

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

Het gebruik van de traditionele "for-lus" om door de array te lussen zou als volgt zijn:

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

Wat maakt de methode forEach () anders?

De forEach-methode wordt ook gebruikt om door arrays te lussen, maar het gebruikt een andere functie dan de klassieke "for-lus".

De methode forEach geeft een callback-functie door voor elk element van een array, samen met de volgende parameters:

  • Huidige waarde (vereist) - De waarde van het huidige array-element
  • Index (optioneel) - Het indexnummer van het huidige element
  • Array (optioneel) - Het array-object waartoe het huidige element behoort

Ik zal deze parameters stap voor stap uitleggen.

Ten eerste, om door een array te lussen met behulp van de methode forEach, heb je een callback-functie (of anonieme functie) nodig:

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

De functie wordt uitgevoerd voor elk afzonderlijk element van de array. Er moet ten minste één parameter voor nodig zijn die de elementen van een array vertegenwoordigt:

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

Dat is alles wat we hoeven te doen om door de array te lopen:

Als alternatief kunt u de weergave van de ES6-pijlfunctie gebruiken om de code te vereenvoudigen:

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

Optionele parameters

Inhoudsopgave

Oké, laten we doorgaan met de optionele parameters. De eerste is de "index" -parameter, die het indexnummer van elk element vertegenwoordigt.

In principe kunnen we het indexnummer van een element zien als we het als een tweede parameter opnemen:

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

Array

De arrayparameter is de array zelf. Het is ook optioneel en kan indien nodig bij verschillende bewerkingen worden gebruikt. Anders, als we het noemen, wordt het net zo vaak afgedrukt als het aantal elementen van de array:

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

U kunt het voorbeeldgebruik van de methode forEach () in deze video zien:

Browser-ondersteuning

De Array.forEach-methode wordt ondersteund in alle browsers, behalve IE-versie 8 of eerder:

Als je meer wilt weten over webontwikkeling, bezoek dan gerust mijn YouTube-kanaal.

Bedankt voor het lezen!