Sådan bruger du forEach() Loop i JavaScript

forEach() loop blev introduceret i ES6 (ECMAScript 2015), og den udfører den givne funktion én gang for hvert element i et array i stigende rækkefølge. Den udfører ikke tilbagekaldsfunktionen for tomme matrixelementer.

Du kan bruge denne metode til at iterere gennem arrays og NodeLists i JavaScript.

Sløjfe gennem arrays

Her er syntaksen for Array.forEach() metode:

array.forEach(callback(currentVal [, index [, array]])[, thisVal])

Tilbagekaldsfunktionen accepterer mellem et og tre argumenter:

• currentVal — Værdien af ​​det aktuelle element i løkken
• index — Matrixindekset for det aktuelle element
• array — Arrayet objekter forEach() sløjfe blev kaldt på

Kun det første argument er påkrævet. De to andre argumenter er valgfrie. Du kan navngive disse variabler, hvad du vil. Hvis thisVal argumentet er angivet, vil det blive brugt som tilbagekalds this værdi.

Følgende eksempel viser, hvordan du kan bruge forEach() sløjfe for at iterere gennem et array i JavaScript:

const birds = ['🐦', '🦅', '🦆', '🦉'];

birds.forEach((item, index) => {
  console.log(`${index} : ${item}`);
});

Her er outputtet:

0 : 🐦
1 : 🦅
2 : 🦆
3 : 🦉

Lad os se på et andet eksempel-array, der indeholder tomme værdier:

const partialArray = [2, 4, , 3];

partialArray.forEach(num => console.log(num));

// output
// 2
// 4
// 3

Som du kan se ovenfor, springes tilbagekaldsfunktionen over for den tomme værdi.

Array.forEach() metode kun virker for arrays og ikke for NodeLists. Det betyder, at du ikke kan bruge det til at gå gennem elementer, du får ved at bruge document.querySelectorAll() og lignende vælgermetoder.

Sløjfe gennem NodeLists

Heldigvis NodeList giver også en forEach() metode, der ligner Array.forEach() , men virker kun for NodeLists som vist i følgende eksempel:

const elems = document.querySelectorAll('div');

elems.forEach((elem, index) => {
  console.log(elem); // the elment
  console.log(index); // the index in the NodeList
});

Spring af elementer over

I en for loop, kan du nemt springe det aktuelle element over ved at bruge continue søgeord eller brug break for at stoppe løkken helt.

Men det er ikke tilfældet med forEach() metode. Da det udfører en tilbagekaldsfunktion for hvert element, er der ingen måde at stoppe eller bryde det på andet end at kaste en undtagelse.

Du kan dog betinget kontrollere varens værdi og bruge return erklæring for at springe det aktuelle element over. For eksempel, hvis du vil logge alle fuglenavne til konsollen undtagen Ugle, skal du gøre følgende:

const birds = ['Eagle', 'Parrot', 'Owl', 'Sparrow'];

birds.forEach((item, index) => {

  // if `Owl`, skip it
  if (item === 'Owl') {
    return;
  }

  // otherwise log the bird name
  console.log(item);
});

Browserkompatibilitet

Array.forEach() funktion fungerer godt i alle moderne browsere, inklusive Internet Explorer 9 og nyere. Du kan dog bruge en polyfill til at gøre den kompatibel helt tilbage til IE6.

NodeList.forEach() metoden understøttes også af alle de nyeste browsere undtagen Internet Explorer. Du skal bruge en polyfill for at fortsætte med at bruge den i IE.