Minden JavaScript huroktípus magyarázata: [With Codeblocks and Examples]

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.
  Hogyan találhat meg ismétlődő fájlokat és tisztíthat meg őket Linuxon az FSlint segítségével

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

  • Használja a ciklust az iterációhoz;
  • 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).

  • Használja a break utasítást a ciklusból való kilépéshez, mielőtt a feltétel hamisra értékelődik;
  • 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

  • Egy tömbön keresztüli hurokiterációhoz
  • 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.

  • A készleten keresztüli hurokiterációhoz
  • 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.

  • A hurok iterációjához egy térképen
  • 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.