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()