Jak používat forEach() Loop v JavaScriptu

forEach() smyčka byla zavedena v ES6 (ECMAScript 2015) a provádí danou funkci jednou pro každý prvek v poli ve vzestupném pořadí. Nevykonává funkci zpětného volání pro prázdné prvky pole.

Tuto metodu můžete použít k iteraci přes pole a seznamy NodeLists v JavaScriptu.

Procházení polí

Zde je syntaxe Array.forEach() metoda:

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

Funkce zpětného volání přijímá jeden až tři argumenty:

• currentVal — Hodnota aktuálního prvku ve smyčce
• index — Index pole aktuálního prvku
• array — Objekt pole forEach() smyčka byla volána

Je vyžadován pouze první argument. Další dva argumenty jsou volitelné. Tyto proměnné můžete pojmenovat, jak chcete. Pokud thisVal argument, bude použit jako zpětné volání this hodnotu.

Následující příklad ukazuje, jak můžete použít forEach() smyčka pro iteraci polem v JavaScriptu:

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

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

Zde je výstup:

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

Podívejme se na další příklad pole, které obsahuje prázdné hodnoty:

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

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

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

Jak můžete vidět výše, funkce zpětného volání je u prázdné hodnoty přeskočena.

Array.forEach() pouze metoda funguje pro pole, nikoli pro seznamy NodeLists. To znamená, že jej nemůžete použít k procházení prvků, které získáte pomocí document.querySelectorAll() a podobné metody výběru.

Procházení seznamu NodeLists

Naštěstí NodeList také poskytuje forEach() metoda, která je podobná Array.forEach() , ale funguje pouze pro NodeLists, jak ukazuje následující příklad:

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

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

Přeskočení položek

V for smyčky, můžete snadno přeskočit aktuální položku pomocí continue klíčové slovo nebo použijte break k úplnému zastavení smyčky.

Ale to není případ forEach() metoda. Protože pro každý prvek provádí funkci zpětného volání, neexistuje žádný způsob, jak ji zastavit nebo přerušit, než vyvoláním výjimky.

Můžete však podmíněně zkontrolovat hodnotu položky a použít return příkaz přeskočit aktuální položku. Pokud například chcete do konzole přihlásit všechna jména ptáků kromě sovy, postupujte takto:

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);
});

Kompatibilita prohlížeče

Array.forEach() funguje dobře ve všech moderních prohlížečích, včetně Internet Exploreru 9 a vyšších. Můžete však použít polyfill, aby byla kompatibilní až do IE6.

NodeList.forEach() Tato metoda je také podporována všemi nejnovějšími prohlížeči kromě Internet Exploreru. Abyste ji mohli nadále používat v IE, potřebujete polyfill.