Javascript Basics - Introduktion til forEach()

Lad os først tage et hurtigt kig på et grundlæggende array 👀

let array = [element0, element1, element2];

Hvert element i et array har også en tilsvarende indeksposition. Det første element i et array er ved indeks 0, det andet element er ved indeks 1, og så videre.

forEach()-syntaks

Vi kan bruge forEach() metode til at udføre en tilbagekaldsfunktion for hver ikke-tomt element i et array. Lad os se på den grundlæggende syntaks for forEach()-metoden 🧐

array.forEach(function (element, index, array) {
  // do something for each element
});

Tilbagekaldsfunktionen tager op til tre parametre:

• element - refererer til det aktuelle element ved hver iteration. Dette er en påkrævet parameter, men du kan navngive den, hvad du vil!
• indeks - denne parameter er valgfri, men den refererer til indekspositionen for hvert element. Husk, at den første indeksposition i et array er 0
• array - denne parameter er valgfri og henviser til det array, som de elementer, du gentager over, er fra

forEach() i aktion

Lad os nu se forEach() metode i aktion!

Lad os lade som om, vi har en klasse med en gruppe elever. Vi vil sætte deres fornavne i en række 🍎

let classList = ["Linda", "Ainslie", "Tracey", "Rick"];

Lad os nu bruge forEach() metode til at iterere over dette array og sige "Hej" til hver elev 🙋‍♀️

classList.forEach(function (student) {
  console.log(`Hello, ${student}!`);
});

output:

// Hello, Linda!
// Hello, Ainslie!
// Hello, Tracey!
// Hello, Rick!

I dette eksempel bruger vi forEach() metode på classList-arrayet. Parameteren 'elev' henviser til elevernes navne i arrayet. Under den første iteration refererer 'elev' til elementet 'Linda'. I den anden iteration refererer det til 'Ainslie' og så videre. Tilbagekaldsfunktionen i dette eksempel vil udskrive 'Hej' og elevens navn i konsollen. Funktionen kaldes for hver elev i classList-arrayet. Det kører sekventielt i stigende rækkefølge fra det første element i arrayet til det sidste.

Lad os nu tilføje endnu en parameter og se, hvordan vi kan få adgang til indekspositionen for hvert element i arrayet 📍

Når du tilføjer indeksparameteren, skal det være den anden parameter, der overføres til tilbagekaldsfunktionen.

classList.forEach(function (student, index) {
  console.log(`Hello, ${student}! Your index number is: ${index}.`);
});

output:

// Hello, Linda! Your index number is: 0.
// Hello, Ainslie! Your index number is: 1.
// Hello, Tracey! Your index number is: 2.
// Hello, Rick! Your index number is: 3.

for hver og pil-funktioner

forEach() metoden bruger en meget ren og kortfattet syntaks sammenlignet med en almindelig for loop. Du vil ofte se folk bruge pilefunktioner, der sendes ind som tilbagekald. Sådan kunne vores eksempel skrives ved hjælp af en pilefunktion.

classList.forEach((student, index) => {
  console.log(`Hello, ${student}! Your index number is: ${index}.`);
});

Hvis du kun har adgang til elementerne, kan du rydde yderligere op i koden 🧹

classList.forEach(student => console.log(`Hello, ${student}!`));

Særlige kendetegn ved forEach()

forEach() metode syntaks er lidt nemmere at læse og skrive end nogle af de andre looping metoder. Der er nogle vigtige forskelle at være opmærksom på:🕵️‍♀️

Følgende er nogle karakteristika, der er specifikke for forEach() :

• sløjfer over hvert ikke-tomt element i et array
• løkker i stigende rækkefølge fra indeks 0 til slutningen af ​​arrayet
• du kan ikke bryde eller afslutte løkken tidligt
• det vil ikke ændre det originale array (medmindre din tilbagekaldsfunktion udfører en handling for at gøre det)
• det vil altid returnere udefineret

Læs mere på MDN for at blive en forEach() guiden 🧙‍♀️

• MDN - Array.prototype.forEach()