A JavaScript a leggyakrabban használt programozási nyelvek közé tartozik. Azoknak a fejlesztőknek, akik JavaScript-mérnökök szeretnének lenni, meg kell tanulniuk a hurkok alapjait, típusukat és működésüket.
A JavaScript-hurok egy olyan eszköz, amely bizonyos feltételek alapján ismételt feladatok végrehajtására szolgál. Másrészt az „iteráció” egy általános kifejezés, ami ismétlést jelent a ciklus kontextusában. Egy hurok addig iterál, amíg a leállítási feltétel teljesül.
Hogy jobban megértsük, képzeljük el úgy, mint egy számítógépes játékot, ahol X lépést kell tenni észak felé, majd Y lépést balra.
7 lépést tehet észak felé, mint;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
amikor a fenti kódblokk végrehajtásra kerül, akkor ez lesz;
Miért használnak általában hurkokat?
- Ismétlődő feladatok végrehajtása: ciklusokat használhat az utasítások végrehajtására, amíg bizonyos feltételek nem teljesülnek.
- Iteráció objektumok vagy tömbök felett: A hurkok segítségével ismételhet egy objektum vagy egy tömb elemeinek tulajdonságait, lehetővé téve bizonyos műveletek végrehajtását az egyes tulajdonságokhoz vagy elemekhez.
- Adatok szűrése: hurkot használhat az adatok meghatározott feltételek alapján történő szűrésére.
A JavaScript ciklusok különböző formákban léteznek; Mert, Míg, Csinál…Míg, For… és For… in. Vizsgáljuk meg őket részletesen, és mutassuk be mindegyik működését.
A hurokhoz
A for ciklus addig ismétlődik, amíg egy meghatározott feltétel igazra nem értékelődik. A for ciklusnak három opcionális kifejezése van, amelyeket egy kódblokk követ.
for (initialization; condition; finalExpression) {
// code
}
- Az inicializálási kifejezés az első ciklus végrehajtása előtt érkezik. Ez a kifejezés általában egy vagy több számlálót inicializál.
- A feltétel kifejezés minden alkalommal ellenőrzésre kerül, mielőtt a for ciklus futna. A ciklusban vagy utasításban lévő kód minden alkalommal lefut, amikor a kifejezés kiértékelése igaz. Másrészt a ciklus leáll, amikor a kifejezés hamisra értékelődik. Ha azonban a kifejezést kihagyjuk, a kifejezés automatikusan igazra értékelődik.
- A finalExpression minden ciklusiteráció után végrehajtódik. A kifejezést többnyire a számláló növelésére használják.
Használhatja a {} blokk utasítást több utasítás csoportosítására és végrehajtására. Ha korábban szeretne kilépni a ciklusból, mielőtt a feltételkifejezés hamisra értékelné, használja a break utasítást.
Példák a kóddal rendelkező for ciklusokra
for (let i = 0; i < 7; i++) {
console.log(i);
}
Ebben a kódblokkban;
- Az i változót nullára inicializáljuk (legyen i=0).
- A feltétel az, hogy i-nek 7-nél kisebbnek kell lennie (i=7).
- A ciklus ismétlődően ismétlődik, ha i értéke kisebb, mint 7 (i<7>.
- Az iteráció minden iteráció után 1-et ad az i értékéhez (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- A kódblokk 1-től 10-ig iterál (i<11).
- A ciklus inicializál egy i változót 1 értékkel (legyen i = 1).
- A hurokfeltétel végrehajtása folytatódik, ha az i értéke kisebb, mint 11 (i < 11).
- Az i értéke minden iteráció után 2-vel nő (i += 2).
Az if utasítás azt értékeli, hogy i=9-e. Ha a feltétel igaz, a break utasítás végrehajtásra kerül, és a ciklus véget ér.
(kép)
A… hurokért
A for… of ciklus iterálható objektumok, például térkép, tömb, argumentumok és halmaz fölött iterál. Ez a ciklus egy egyéni iterációs hookot hív meg olyan utasításokkal, amelyek az egyes tulajdonságok értékére futnak le.
A for… ciklus alapvető szerkezete a következő;
for (variable of object) statement
Példák a for… of hurokra működés közben
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
Ebben a kódban;
- Meghatározunk egy frontendLanguages nevű tömböt
- A tömb három elemből áll; „HTML”, „CSS”, „JavaScript” és „React”.
- A for… of ciklus a frontendLanguages minden egyes eleme felett iterál.
- A kódblokkban lévő i minden iteráció során felveszi az egyes elemek értékét, és a konzolra nyomtatott értékeket.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
Ebben a kódblokkban;
- Deklarálunk egy s változót, amelyet a Set() konstruktor segítségével egy új halmazhoz rendelünk.
- Két elemet adunk a kódhoz add() metódussal
- A for….of iterál az elemek objektum felett.
- A ciklus az aktuális elemet az n-hez rendeli a console.log(n) utasítás végrehajtása előtt.
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
Ebben a kódblokkban;
- A Map() konstruktort használjuk egy új térképobjektum létrehozásához.
- Egy m változót deklarálunk.
- A .set() metódussal öt kulcs-érték párt adunk hozzá.
- A for… of ciklus az m térképobjektum elemei felett iterál.
Mert… hurokban
A for…in ciklus egy objektum tulajdonságain való iterációra szolgál. A for…in ciklus alapvető szerkezete a következő;
for (property in object) {
// code
}
Használhatja a for…in ciklust tömbök és tömbszerű objektumok közötti iterációhoz.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
Ebben a kódblokkban;
- Bevezetünk egy JavaScript objektumot, és elnevezzük shoppingList-nek.
- A for ciklust használjuk a bevásárlólista minden tulajdonságának iterálásához az in operátor használatával.
- Minden iterációban a ciklus hozzárendeli az aktuális tulajdonság nevét a bevásárlólistában.
Míg
A while ciklus kiértékel egy feltételt, ha azt igaznak találja, a kódblokk végrehajtódik. Ha azonban a feltétel hamis, a ciklus véget ér, és a kódblokk nem kerül végrehajtásra.
Ez a while ciklus alapstruktúrája;
while (condition) Statement
A tesztfeltételnek az utasítás végrehajtása előtt kell bekövetkeznie a ciklusban. Több utasítást is végrehajthat a {} vagy blokk utasítások használatával.
Példa a while ciklusra működés közben
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
Ebben a kódban;
- Egy n változó nulla értékkel inicializálódik (legyen n=0).
- A ciklus addig fut, amíg n értéke kisebb, mint 9 (n<9)
- Az n értéke megjelenik a konzolon, és minden iteráció után 1-gyel nő (n++)
- A kód végrehajtása 8-kor leáll.
Csináld… Loop közben
A do…while ciklus addig ismétlődik, amíg egy adott feltétel hamisra nem értékelődik.
A do…while utasítás általános szerkezete a következő;
do statement while (condition);
Az utasítás egyszer végrehajtásra kerül, de a feltétel ellenőrzése előtt. Az utasítás akkor fut le, ha a feltétel igaz. Ha azonban a kiértékelt feltétel hamis, a végrehajtás leáll, és a vezérlés a do..while utasítás után átmegy a parancsra. A kód egy do…while ciklusban garantáltan lefut legalább egyszer, még akkor is, ha a feltétel kiértékelése igaz.
Példa a do…míg
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
Ebben a kódban;
- Bevezetünk egy n változót, és a kezdeti értékét 0-ra állítjuk (legyen n=0).
- Az n változónk beír egy do…while ciklust, ahol az értéke minden iteráció után 1-gyel nő (n+=1)
- Az n értéke naplózásra kerül.
- A ciklus mindaddig folytatódik, amíg n értéke kisebb, mint 7 (n<7).
Amikor ezt a kódot futtatja, a konzol n értékeit mutatja 1-től 7-ig, miközben a ciklus 7-szer fut.
Beágyazott hurok
A beágyazott hurok olyan helyzet, amikor a hurkon belül van egy hurok. Például beágyazhatunk egy for ciklust egy másik for ciklusba.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Két változó van; külső és belső, és mindkettő nulla értékkel inicializálódik.
- Mindkét változó 2-vel növekszik minden iteráció után
- A külső és a belső ciklus háromszor ismétlődik.
Hurokvezérlési utasítások
A hurokvezérlő utasítások, amelyeket néha „ugró utasításoknak” is neveznek, megszakítják a program normál folyamatát. A Break és a folytatás példák a ciklusvezérlő utasításokra.
Törés nyilatkozatok
A Break utasítások azonnal lezárják a ciklust, még akkor is, ha a feltétel nem teljesül.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
A renderelt kód így fog megjelenni;
Folytassa az állításokat
A Continue utasítások egy bizonyos kódblokk kihagyására és az új ciklus iterációjának végrehajtására szolgálnak.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
A renderelt kód így fog megjelenni;
Következtetés
Fent vannak azok a gyakori hurkok, amelyekkel a vanilla JavaScriptben és keretrendszereiben/könyvtáraiban találkozhat. Amint kiemeltük, minden huroktípusnak megvan a maga használati esete és eltérő viselkedése. Ha nem a megfelelő huroktípust választja, valószínűleg hibái lesznek, és a kód valószínűleg váratlan viselkedést fog mutatni.
Ha JavaScript keretrendszerrel vagy könyvtárral van dolgunk, mindig ellenőrizze annak dokumentációját, és használja a beépített ciklusokat.
