Základy JavaScriptu – Úvod do forEach()

Nejprve se pojďme rychle podívat na základní pole 👀

let array = [element0, element1, element2];

Každý prvek v poli má také odpovídající pozici indexu. První prvek v poli je na indexu 0, druhý prvek je na indexu 1 atd.

forEach() syntaxe

Můžeme použít forEach() metoda pro provedení funkce zpětného volání pro každou neprázdný prvek v poli. Podívejme se na základní syntaxi metody forEach() 🧐

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

Funkce zpětného volání zabírá až tři parametry:

  • prvek - odkazuje na aktuální prvek v každé iteraci. Toto je povinný parametr, ale můžete jej pojmenovat, jak chcete!
  • index - tento parametr je volitelný, ale odkazuje na pozici indexu každého prvku. Pamatujte, že první pozice indexu v poli je 0
  • pole - tento parametr je volitelný a odkazuje na pole, ze kterého pocházejí prvky, které iterujete

forEach() v akci

Nyní se podívejme na forEach() metoda v akci!

Předstírejme, že máme třídu se skupinou studentů. Jejich křestní jména vložíme do pole 🍎

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

Nyní použijeme forEach() metodou iterace přes toto pole a pozdravit každého studenta 🙋‍♀️

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

výstup:

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

V tomto příkladu používáme forEach() metoda v poli classList. Parametr 'student' odkazuje na jména studentů v poli. Během první iterace se „student“ vztahuje k prvku „Linda“. Ve druhé iteraci odkazuje na „Ainslie“ a tak dále. Funkce zpětného volání v tomto příkladu vytiskne 'Ahoj' a jméno studenta v konzole. Funkce je volána pro každého studenta v poli classList. Spouští se sekvenčně ve vzestupném pořadí od prvního prvku v poli po poslední.

Nyní přidáme další parametr a uvidíme, jak můžeme získat přístup k pozici indexu pro každý prvek v poli 📍

Když přidáte parametr index, musí to být druhý parametr předaný do funkce zpětného volání.

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

výstup:

// 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.

pro každý a funkce šipky

forEach() metoda používá velmi čistou a stručnou syntaxi ve srovnání s běžnou smyčkou for. Často uvidíte, že lidé používají funkce šipek předané jako zpětné volání. Takto by se dal zapsat náš příklad pomocí funkce šipky.

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

Pokud přistupujete pouze k prvkům, můžete kód uklidit ještě dále 🧹

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

Speciální charakteristiky forEach()

forEach() syntaxe metody je o něco snazší číst a zapisovat než některé jiné metody smyčkování. Je třeba si uvědomit několik klíčových rozdílů:🕵️‍♀️

Níže jsou uvedeny některé charakteristiky, které jsou specifické pro forEach() :

  • provádí smyčku přes každý neprázdný prvek v poli
  • cykly ve vzestupném pořadí od indexu 0 do konce pole
  • smyčku nelze předčasně přerušit nebo ukončit
  • nezmění původní pole (pokud vaše funkce zpětného volání k tomu provede operaci)
  • vždy se vrátí nedefinováno

Přečtěte si více o MDN a staňte se forEach() čaroděj 🧙‍♀️

  • MDN – Array.prototype.forEach()