logo

Looping přes Array pomocí JavaScriptu forEach(), s příklady

Tento článek vám ukáže, jak používat JavaScript forEach() metoda smyčky přes pole.

Téměř každá aplikace jakékoli složitosti bude vyžadovat smyčkování přes pole (seznamy) dat.

JavaScript forEach() metoda, která je zabudována do pole JavaScriptu proměnné, dělá právě toto. Budete ho hodně používat – naštěstí je to zatraceně snadné.

JavaScript forEach() Syntaxe

arr.forEach(callback(currentValue[, index[, array]]) {
    // execute something
}[, thisArg]);

Všimněte si, že:

  • arr je pole nebo proměnná obsahující pole
  • zpětné volání je funkce, která se má provést pro každý prvek v poli
  • currentValue je aktuální prvek zpracovávaný v poli, dostupný v rámci funkce zpětného volání
  • index lze volitelně zadat pro získání indexu currentValue při zpracování pole a jeho zpřístupnění v rámci funkce zpětného volání
  • pole lze také volitelně zadat, aby bylo k dispozici pole, které je zpracováváno v rámci funkce zpětného volání
  • tento argument je hodnota, která se má použít jako toto při provádění zpětného volání
    • toto je proměnná se speciálním významem v JavaScriptu. Kdekoli je použit, odkazuje na objekt, ke kterému patří.
    • Pokud to nedává smysl, nebojte se – s forEach() se to běžně nepoužívá – bude to dávat smysl, až budete dále porozumět JavaScriptu a objektově orientovanému programování
  • Tato metoda nemá žádnou návratovou hodnotu

JavaScript pro každého () Příklad

Zde je příklad, který vytiskne každou položku v poli aut spolu s indexem, pod kterým je uložen v poli:

var cars = ["ford", "holden", "lada", "fiat"];

cars.forEach(function(item, index){
    console.log(item + "exists at index" + index); // Will print the car name and the index it appears at
});

Pokud byste chtěli získat přístup k autům pole z forEach funkce zpětného volání při jejím provádění, můžete ji předat jako volitelný třetí parametr:

cars.forEach(function(item, index, theArray){
    console.log(theArray); // theArray will contain the cars array as it as passed as the third parameter above
});

Málo používaný a mírně matoucí thisArg lze použít následovně:

var driverObject = { name: 'tim', age: 54 }; // An object with details of a car driver

cars.forEach(function(item){ 
    console.log(item); // Will print the item from the cars list 
    console.log(this.name); // Will print 'tim', as driverObject was passed as the value to use when referring to the variable called 'this'
}, driverObject)

Znovu, pokud thisArg nedává to smysl, to je v pořádku, používá se to zřídka a pravděpodobně to bude dávat smysl, pokud/až přijde čas to použít.

Pokud jde o toto sám o sobě je to základní koncept JavaScriptu – více o něm naleznete zde.


No