Varje JavaScript-looptyp förklaras: [With Codeblocks and Examples]

JavaScript är ett av de mest använda programmeringsspråken. Utvecklare som tänker bli JavaScript-ingenjörer måste lära sig grunderna i loopar, deras typer och hur de fungerar.

En JavaScript-loop är ett verktyg som används för att utföra upprepade uppgifter baserat på ett visst tillstånd. Å andra sidan är ’iterate’ en generisk term, som betyder upprepning i loopens sammanhang. En loop kommer att fortsätta att iterera tills ett stoppvillkor är uppfyllt.

För att förstå det bättre kan du tänka på det som ett datoriserat spel där du instrueras att ta X steg norrut och sedan Y steg till vänster.

Du kan representera ta 7 steg norrut som;

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

när ovanstående kodblock exekveras, kommer du att ha detta;

Varför används vanligtvis slingor?

  • Utför repetitiva uppgifter: Du kan använda loopar för att utföra instruktioner tills vissa villkor är uppfyllda.
  • Iterera över objekt eller arrayer: Med loopar kan du iterera över egenskaper för ett objekt eller element i en array, så att du kan utföra vissa åtgärder för varje egenskap eller element.
  • Filtrera data: Du kan använda en loop för att filtrera data baserat på specifika förhållanden.

JavaScript-loopar finns i olika former; För, Medan, Gör…Medan, För…av och För…in. Låt oss utforska dem i detalj och visa hur var och en fungerar.

För loop

En for-loop kommer att upprepas tills ett specificerat villkor utvärderas till sant. En for-loop har tre valfria uttryck, följt av ett kodblock.

for (initialization; condition; finalExpression) {

  // code

}
  • Initieringsuttrycket kommer innan den första slingan exekveras. Detta uttryck initierar vanligtvis en eller flera räknare.
  • Ett villkorsuttryck kontrolleras varje gång innan for-loopen körs. Koden i loopen eller satsen körs varje gång uttrycket evalueras till sant. Å andra sidan stannar slingan när uttrycket utvärderas till falskt. Men om uttrycket utelämnas kommer uttrycket att evalueras till sant automatiskt.
  • FinalExpression körs efter varje loop-iteration. Uttrycket används mest för att öka en räknare.

Du kan använda {}, block-sats, för att gruppera och köra flera satser. Om du vill lämna loopen tidigt innan villkorsuttrycket utvärderas till falskt, använd break-satsen.

Exempel på för loopar med kod

  • Använd för loop för att iterera;
  • for (let i = 0; i < 7; i++) {
    
      console.log(i);
    
    }

    I detta kodblock;

    • Variabeln i initieras till noll (låt i=0).
    • Villkoret är att i ska vara mindre än 7 (i=7).
    • Slingan kommer att upprepas om värdet på i är mindre än 7 (i<7>.
    • Iterationen kommer att lägga till 1 till värdet av i efter varje iteration (++1).

  • Använd break-satsen för att lämna loopen innan villkoret utvärderas till falskt;
  • for (let i = 1; i < 11; i += 2) {
    
      if (i === 9) {
    
        break;
    
      }
    
      console.log('Total developers: ' + i);
    
    }
    • Kodblocket itererar från 1 till 10 (i<11).
    • Slingan initierar en variabel i med värdet 1 (låt i = 1).
    • Slingvillkoret fortsätter att exekveras om värdet på i är mindre än 11 ​​(i < 11).
    • Värdet på i ökar med 2 efter varje iteration (i += 2).

    If-satsen utvärderar om värdet på i=9. Om villkoret är sant, körs break-satsen och loopen avslutas.

    (bild)

    För … av loop

    For…of-loopen itererar över itererbara objekt som Map, Array, Arguments och Set. Den här slingan anropar en anpassad iterationshook med satser som körs för värdet av varje distinkt egenskap.

    Den grundläggande strukturen för en for…loop är;

    for (variable of object)
    
      statement

    Exempel på för…of loop in action

  • För … av loop iteration över en array
  • const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
    
    for (let i of frontendLanguages) {
    
      console.log(i);
    
    }

    I denna kod;

    • Vi definierar en array som heter frontendLanguages
    • Arrayen har tre element; ”HTML”, ”CSS”, ”JavaScript” och ”Reagera”.
    • For…of-loopen itererar över varje element i frontendLanguages.
    • I:et i kodblocket tar upp värdet för varje element under varje iteration och värdena som skrivs ut på konsolen.

  • För … av loop iteration över en uppsättning
  • const s = new Set();
    
    s.add(2);
    
    s.add("grey");
    
    for (let n of s) {
    
      console.log(n);
    
    }

    I detta kodblock;

    • Vi deklarerar en variabel s, som vi tilldelar en ny uppsättning med hjälp av Set()-konstruktorn.
    • Två element läggs till i koden med metoden add().
    • For….av iterationer över elementobjektet.
    • Slingan tilldelar det aktuella elementet till n innan console.log(n)-satsen körs.

  • För…om loop iteration över en karta
  • 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);
    
    }

    I detta kodblock;

    • Vi använder Map()-konstruktorn för att skapa ett nytt kartobjekt.
    • En variabel m deklareras.
    • Med .set()-metoden lägger vi till fem nyckel-värdepar.
    • A for…of loop itererar över element i kartobjektet m.

    För … i loop

    En for…in loop används för att iterera över ett objekts egenskaper. Den grundläggande strukturen för en for…in loop är;

    for (property in object) {
    
      // code
    
    }

    Du kan använda for…in loop för att iterera över arrayer och arrayliknande objekt.

    const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
    
    for (const vegetable in shoppingList) {
    
      console.log(vegetable);
    
    }

    I detta kodblock;

    • Vi introducerar ett JavaScript-objekt och döper det till shoppingList.
    • Vi använder for loop för att iterera över varje egenskap på shoppingList med in-operatorn.
    • I varje iteration tilldelar loopen det aktuella egenskapsnamnet i shoppinglistan.

    Medan

    While-slingan utvärderar ett villkor, om den finner att det är sant, exekveras kodblocket. Men om villkoret är falskt slutar loopen och kodblocket kommer inte att exekveras.

    Detta är grundstrukturen för en while-loop;

    while (condition)
    
        Statement

    Testvillkoret måste inträffa innan satsen körs i slingan. Du kan köra flera satser med {} eller blocksatser.

    Exempel på while loop in action

    let n = 0;
    
    while (n < 9) {
    
      console.log(n);
    
      n++;
    
    }

    I denna kod;

    • En variabel n initieras med ett nollvärde (låt n=0).
    • Slingan kommer att köras så länge som värdet på n är mindre än 9 (n<9)
    • Värdet på n visas på konsolen och ökas med 1 efter varje iteration (n++)
    • Koden kommer att sluta köras vid 8.

    Gör … Medan Loop

    En do…while loop itererar tills ett specifikt tillstånd utvärderas till falskt.

    Den allmänna strukturen för en do…while-sats är;

    do
    
      statement
    
    while (condition);

    Uttalandet körs en gång men innan villkoret kontrolleras. Uttalandet kommer att köras om villkoret är sant. Men om det utvärderade villkoret är falskt kommer exekveringen att stoppas och kontrollen övergår till satsen efter do..while. Kod i en do…while loop kommer garanterat att köras minst en gång, även om villkoret utvärderas till sant.

    Exempel på gör … medan

    let n = 0;
    
    do {
    
      n += 1;
    
      console.log(n);
    
    } while (n < 7);

    I denna kod;

    • Vi introducerar en variabel n och sätter dess initiala värde till 0 (låt n=0).
    • Vår variabel n går in i en do…while loop där dess värde ökas med 1 efter varje iteration (n+=1)
    • Värdet på n loggas.
    • Slingan fortsätter att exekveras så länge som värdet på n är mindre än 7 (n<7).

    När du kör den här koden kommer konsolen att visa värden på n från 1 till 7 eftersom slingan körs 7 gånger.

    Kapslad loop

    En kapslad loop är en situation där vi har en loop inuti en loop. Till exempel kan vi ha en for-loop kapslad inuti en annan for-loop.

    for (let outer = 0; outer < 5; outer += 2) {
    
      for (let inner = 0; inner < 6; inner += 2) {
    
        console.log(`${outer}-${inner}`);
    
      }
    
    }
    • Det finns två variabler; yttre och inre och båda initieras med värdet noll.
    • Båda variablerna ökas med 2 efter varje iteration
    • De yttre och inre slingorna itererar tre gånger vardera.

    Loop control uttalanden

    Loop control-satser, ibland kända som ”jump-satser” avbryter det normala flödet av ett program. Break and continue är exempel på loopkontrollsatser.

    Bryt uttalanden

    Break-satser avslutar en loop omedelbart, även om villkoret inte har uppfyllts.

    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);
    
    }

    Den renderade koden kommer att visas som;

    Fortsätt uttalanden

    Continue-satser används för att hoppa över ett visst kodblock och utföra iteration för den nya slingan.

    for (let n = 0; n <= 10; n++) {
    
      if (n === 5) {
    
        continue;
    
      }
    
      console.log(n);
    
    }

    Den renderade koden kommer att visas som;

    Slutsats

    Ovan är de vanliga slingorna du kommer att stöta på i vanilla JavaScript och dess ramverk/bibliotek. Som framhållits har varje looptyp sitt användningsfall och olika beteenden. Om du väljer fel looptyp kommer du sannolikt att ha buggar och din kod kommer sannolikt att visa oväntat beteende.

    Om du har att göra med ett JavaScript-ramverk eller -bibliotek, kontrollera alltid dess dokumentation och använd de inbyggda looparna.