Tömbciklusok ebben a kurzusban:

A(z) Tömbciklusok fogalomról

Amikor tömbökkel dolgozol, előfordul, hogy ugyanazt a kódot szeretnéd lefuttatni a tömb minden egyes értékére. Ezt nevezzük a tömbön való iterálásnak, más szóval a tömb bejárásának.

Itt azt az esetet nézzük meg, amikor közben nem szeretnéd módosítani a tömböt. A tömbök átalakításáról a tömbátalakítások fogalomban olvashatsz.

A for ciklus

A tömb elemein való végighaladás legegyszerűbb, és általában igen gyors módja a for ciklus, lásd a for-ciklusok fogalmat.

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

A for...of ciklus

Amikor minden iterációban közvetlenül az értékkel szeretnél dolgozni, és egyáltalán nincs szükséged az indexre, használhatsz for...of ciklust.

A for...of ugyanúgy működik, mint a fent bemutatott egyszerű for ciklus, de ahelyett, hogy a ciklusban az indexszel mint változóval kellene bajlódnod, közvetlenül az értéket kapod meg.

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

Ahogy a hagyományos for ciklusokban, itt is használhatod a continue utasítást, hogy megszakítsd az aktuális iterációt, és a break utasítást, hogy teljesen leállítsd a ciklus futását.

A JavaScriptben létezik for...in ciklus is, amivel egy objektum kulcsain lehet végigmenni. Fontos megjegyezni, hogy a for...of és a for...in nem cserélhető fel egymással, ennek részleteiről az MDN dokumentációjában olvashatsz.

A forEach metódus

Minden tömb tartalmaz egy forEach metódust, amivel szintén végighaladhatsz a tömb elemein.

A forEach paraméterként egy callbacket fogad. A callback függvény minden egyes tömbelemre egyszer hívódik meg.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

A fenti példában a callback csak az aktuális elemet használja paraméterként. Ha szükséges, a callback akár három paramétert is felhasználhat.

• az aktuális iteráció értéke
• az aktuális iteráció indexe
• a teljes tömb

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

A callback mellett a forEach opcionális második paraméterként fogadja az iterációhoz használandó this kontextust is. Példát az MDN „Using thisArg” szakaszában láthatsz.

Van néhány dolog, amit érdemes észben tartanod, amikor a forEach metódust használod.

• Nincs mód arra, hogy leállítsd az iterációt, miután a forEach ciklus elindult. A break és a continue utasítás ebben a környezetben nem létezik.
• A forEach furcsán viselkedik, ha a ciklus elindítása után módosítod a tömböt. A végéhez hozzáadott elemeket figyelmen kívül hagyja, az elemek törlése ahhoz vezethet, hogy másokat kihagy, és így tovább. Az ilyen jellegű problémák elkerülése érdekében soha ne módosítsd az eredeti tömböt a callbackben.
• Magának a forEach metódusnak a visszatérési értéke undefined. Emiatt a végére nem fűzhetsz további tömbmetódusokat.
• Ha a teljesítmény érdekében optimalizálni szeretnéd a kódodat, érdemes inkább for vagy for...of ciklust használnod, mivel mindkettő körülbelül háromszor gyorsabb.