A for ciklus használata a JavaScript-ben (JS for iteráció elmélet, szintaktika, példa)

Egy korábbi cikkünkben már foglalkoztunk általánosságban a ciklusokkal, iterációkkal a JavaScript nyelvet figyelembe véve, melyet itt olvashattok el. Ezen cikkünk főtémája a for ciklus lesz. Megismerkedünk a legszélesebb körben ismert for ciklussal, majd áttekintjük két kevésbé ismert változatát, a for…in és a for…of iterációt is.

Tartalomjegyzék

Mik azok a ciklusok?

Tudom, hogy erről már volt szó a korábbi ciklusokról szóló cikkünkben, de úgy gondolom, hogy az ismétlés a tudás atyja.

Szóval a ciklus, vagy iteráció a programozás és algoritmusok egyik alapvető eszköze, amely segítségével az ismétlődő tevékenységek végrehajtását tudjuk leegyszerűsíteni. Egy ciklus mindaddig fut, amíg el nem éri az előre meghatározott végcélt.

Két alapvető ciklustípust különböztetünk meg a JavaScript-ben:

for ciklus
while

Ebben a cikkben nem fogunk tárgyalni a while ciklusokról, csak a for ciklusokat vesszük górcső alá.

for ciklus

Kezdésképp ismerkedjünk meg a tanulók legkedveltebb ciklustípusával a for ciklussal, általában azért ezt kedvelik a leginkább, mert nagyon könnyű megtanulni használni. Azonban vannak olyan esetek, amikor nem célszerű ezt választani. Olyan esetekben érdemes a for ciklust használnunk, amikor az összes elemet szeretnénk megvizsgálni. Azért erre az esetre a legmegfelelőbb, mert nagyon könnyű úgy felparaméterezni, hogy a tömb első elemétől a legutolsóig menjen.

A for ciklus szintaktikája

for (KEZDŐÉRTÉK; FELTÉTEL; VÉGSŐ_KIFEJEZÉS)
{
   CIKLUSMAG
}

A zárójelben említett három dolgot (kezdőérték, feltétel, végsőkifejezés) ciklusfejnek nevezzük. Alább olvasható ezek magyarázata.

A „KEZDŐÉRTÉK„-hez írt művelet a ciklus első lefutása előtt végrehajtódik. Általában arra használjuk, hogy egy számlálót hozzunk létre vele, amellyel követni tudjuk, hogy a ciklusunk hanyadszorra fut le. Már említettem, hogy az informatikában, főleg a programozásban a számozás nullával indul, így a legtöbb esetben a kezdőértékünk is nullától indul, természetesen meglehet adni más értéket is, de akkor figyelnünk kell, hogy nehogy véletlenül kevesebbszer fusson le a ciklusunk mint szeretnénk.

A „FELTÉTEL„-hez értelemszerűen egy feltételt kell írnunk, amíg ez a feltétel teljesül, azaz igaz, addig a ciklus újra és újra végrehajtódik.

A „VÉGSŐ_KIFEJEZÉS” minden egyes ciklus lefutás után végrehajtódik, így ehhez általában a kezdőérték növelését vagy csökkentését szoktuk írni. Ha ezt nem tennénk meg, akkor könnyen egy végtelen ciklusba futnánk. Gondoljunk csak bele, ha a kezdőértékünk 1, a feltételünk az, hogy a kezdőérték kisebb legyen, mint 2, és soha nem változtatjuk meg a kezdőértékünket, akkor mikor tudna véget érni a ciklus? A ciklus csak, akkor érhet véget, ha teljesült a feltétel, de mivel a kezdőértéket nem növeljük sosem, így ez nem teljesülhet.

A „CIKLUSMAG” részbe jönnek azok az utasítások, amelyek esetében azt szeretnénk, hogy minden egyes ciklus futásnál megismétlődjenek.

for ciklus példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>

<p id="szoveg"></p>

<script>

var kiir = "";
var i;

for (i = 0; i < 10; i++)
{
  kiir += "A ciklusváltozó értéke: " + i + "<br>";
}

document.getElementById("szoveg").innerHTML = kiir;

</script>

</body>
</html>
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Fentebb már említettem, hogy ilyen esetekben célszerű a for ciklust használni, amikor konkrétan tudjuk, hogy mettől meddig akarjuk a ciklust futtatni. Most tisztában voltam vele, hogy nullától, kilencig szeretném, így a legjobb választás a for ciklus volt.

for…in ciklus

A for…in ciklus egy speciális fajtája a for ciklusnak. Ha a for…in ciklust használjuk, akkor segítségével egy tömb, objektum összes elemén iterálhatunk végig.

for…in ciklus szintaxisa

 for (CIKLUSVÁLTOZÓ in OBJEKTUM) {
    CIKLUSMAG
  }

A szintaktikája nagyon hasonlít a sima for cikluséra, a ciklusfejben megadunk egy ciklusváltozót, amely segítségével az „in” kötőszó után megadott objektumon iterálhatunk végig.

for…in ciklus példa

JavaScript + HTML kód

<script>
var tomb = new Array("HTML", "CSS", "JS");

tomb[10] = "jQuery";
tomb[3.4] = "SQL";
tomb["X"] = "PHP";
tomb[-5] = "WordPress";

var elemek = "";
for (var i in tomb) {
    elemek += i + ": " + tomb[i] + "<br />";
}

document.write(elemek);

</script>

Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Láthatjuk, hogy a tömbünk összes létező elemét kilistázta. A létező szó a for…of ciklusnál fog értelmet nyerni.

for…of ciklus

A for…of ciklus egy újabb speciális fajtája a for ciklusnak. A for…of ciklus segítségével csak a pozitív egész számokat tudjuk kiíratni.

for…of ciklus szintaktikája

 for (CIKLUSVÁLTOZÓ of OBJEKTUM) {
    CIKLUSMAG
  }

A szintaxisa 99%-ban megegyezik a for…in cikluséval, a ciklusfejben megadunk egy ciklusváltozót, amely segítségével az „of” kötőszó után megadott objektumon iterálhatunk végig.

for…of ciklus példa

JavaScript + HTML kód

<script>
var tomb = new Array("HTML", "CSS", "JS");

tomb[10] = "jQuery";
tomb[3.4] = "SQL";
tomb["X"] = "PHP";
tomb[-5] = "WordPress";

var elemek = "";
for (var i of tomb) {
    elemek += i + ": " + tomb[i] + "<br />";
}

document.write(elemek);

</script>
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ebben az esetben csak a pozitív egész számokhoz rendelt értékek listázódnak ki, illetve azon tömbindexek jelennek meg „undefined” értékkel, melyeket nem töltöttünk fel adattal.