Hver JavaScript-løkketype forklart: [With Codeblocks and Examples]

JavaScript er blant de mest brukte programmeringsspråkene. Utviklere som har til hensikt å bli JavaScript-ingeniører må lære det grunnleggende om løkker, deres typer og hvordan de fungerer.

En JavaScript-løkke er et verktøy som brukes til å utføre gjentatte oppgaver basert på en bestemt tilstand. På den annen side er «iterate» et generisk begrep, som betyr gjentakelse i sammenheng med loopen. En sløyfe vil fortsette å iterere til en stoppbetingelse er oppfylt.

For å forstå det bedre kan du tenke på det som et datastyrt spill hvor du blir bedt om å ta X skritt nordover og deretter Y skritt til venstre.

Du kan representere ta 7 skritt nordover 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 kodeblokken ovenfor er utført, vil du ha dette;

Hvorfor brukes løkker vanligvis?

• Utfør repeterende oppgaver: Du kan bruke løkker til å utføre instruksjoner til visse betingelser er oppfylt.
• Iterer over objekter eller arrayer: Med loops kan du iterere over egenskapene til et objekt eller elementer i en array, slik at du kan utføre bestemte handlinger for hver egenskap eller element.
• Filtrer data: Du kan bruke en sløyfe til å filtrere data basert på spesifikke forhold.

JavaScript-løkker kommer i forskjellige former; For, mens, gjør…mens, for…av og for…i. La oss utforske dem i detalj og demonstrere hvordan hver enkelt fungerer.

For loop

En for-løkke vil gjentas inntil en spesifisert tilstand evalueres til sann. En for-løkke har tre valgfrie uttrykk, etterfulgt av en kodeblokk.

for (initialization; condition; finalExpression) {

  // code

}

• Initialiseringsuttrykket kommer før den første løkken utføres. Dette uttrykket initialiserer vanligvis en eller flere tellere.
• Et betingelsesuttrykk kontrolleres hver gang før for-løkken kjøres. Koden i loopen eller setningen kjøres hver gang uttrykket evalueres til sant. På den annen side stopper loopen når uttrykket evalueres til usant. Men hvis uttrykket utelates, vil uttrykket automatisk evalueres til sant.
• FinalExpression kjøres etter hver loop-iterasjon. Uttrykket brukes mest til å øke en teller.

Du kan bruke {}, blokksetning, til å gruppere og utføre flere setninger. Hvis du vil gå ut av loopen tidlig før betingelsesuttrykket evalueres til usann, bruk break-setningen.

Eksempler på for looper med kode

Bruk for loop for å iterere;

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

  console.log(i);

}

I denne kodeblokken;

• Variabelen i initialiseres til null (la i=0).
• Betingelsen er at i skal være mindre enn 7 (i=7).
• Sløyfen vil gjentatte ganger iterere hvis verdien av i er mindre enn 7 (i<7>.
• Iterasjonen vil legge til 1 til verdien av i etter hver iterasjon (++1).

Bruk break statement for å gå ut av loopen før betingelsen evalueres til falsk;

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + i);

}

• Kodeblokken itererer fra 1 til 10 (i<11).
• Sløyfen initialiserer en variabel i med en verdi på 1 (la i = 1).
• Sløyfebetingelsen vil fortsette å kjøre hvis verdien av i er mindre enn 11 (i < 11).
• Verdien av i øker med 2 etter hver iterasjon (i += 2).

If-setningen evaluerer om verdien av i=9. Hvis betingelsen er sann, kjøres break-setningen, og loopen avsluttes.

(bilde)

For … av loop

For…of-løkken itererer over gjentakbare objekter som Map, Array, Arguments og Set. Denne sløyfen påkaller en tilpasset iterasjonshook med setninger som kjøres for verdien av hver distinkte egenskap.

Den grunnleggende strukturen til en for…løkke er;

for (variable of object)

  statement

Eksempler på for…of loop in action

For … av loop-iterasjon over en matrise

const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];

for (let i of frontendLanguages) {

  console.log(i);

}

I denne koden;

• Vi definerer en matrise som heter frontendLanguages
• Matrisen har tre elementer; «HTML», «CSS», «JavaScript» og «React».
• For…of-løkken itererer over hvert element i frontendLanguages.
• I-en i kodeblokken tar opp verdien til hvert element under hver iterasjon og verdiene som er skrevet ut på konsollen.

For … av loop-iterasjon over et sett

const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

I denne kodeblokken;

• Vi erklærer en variabel s, som vi tilordner til et nytt sett ved å bruke Set()-konstruktøren.
• To elementer legges til koden ved hjelp av add()-metoden
• For….of iterates over elementobjektet.
• Sløyfen tilordner gjeldende element til n før console.log(n)-setningen utføres.

For … av loop-iterasjon over et kart

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 denne kodeblokken;

• Vi bruker Map()-konstruktøren for å lage et nytt kartobjekt.
• En variabel m er deklarert.
• Ved å bruke .set()-metoden legger vi til fem nøkkelverdi-par.
• En for…of loop itererer over elementer av kartobjektet m.

For … i loop

En for…in loop brukes til å iterere over egenskapene til et objekt. Den grunnleggende strukturen til en for…in loop er;

for (property in object) {

  // code

}

Du kan bruke for…in loop for å iterere over arrays og array-lignende objekter.

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };

for (const vegetable in shoppingList) {

  console.log(vegetable);

}

I denne kodeblokken;

• Vi introduserer et JavaScript-objekt og kaller det shoppingList.
• Vi bruker for loop for å iterere over hver egenskap på shoppingList ved å bruke in-operatoren.
• I hver iterasjon tildeler loopen det gjeldende egenskapsnavnet i handlelisten.

Samtidig som

While-løkken evaluerer en betingelse, hvis den finner at den er sann, kjøres kodeblokken. Men hvis betingelsen er usann, avsluttes løkken, og kodeblokken vil ikke bli utført.

Dette er den grunnleggende strukturen til en while-løkke;

while (condition)

    Statement

Testbetingelsen må inntreffe før utførelse av setningen i loopen. Du kan utføre flere setninger ved å bruke {} eller blokksetninger.

Eksempel på while-løkke i aksjon

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

I denne koden;

• En variabel n initialiseres med en nullverdi (la n=0).
• Sløyfen vil kjøre så lenge verdien av n er mindre enn 9 (n<9)
• Verdien av n vises på konsollen og økes med 1 etter hver iterasjon (n++)
• Koden vil slutte å kjøre ved 8.

Gjør … Mens Loop

En do…while-løkke itererer til en spesifikk tilstand evalueres til falsk.

Den generelle strukturen til en do…while-setning er;

do

  statement

while (condition);

Uttalelsen utføres én gang, men før tilstanden kontrolleres. Utsagnet vil utføres hvis betingelsen er sann. Imidlertid, hvis den evaluerte tilstanden er usann, vil kjøringen stoppe, og kontrollen går over til setningen etter do..while. Kode i en do…while-løkke kjører garantert minst én gang, selv om tilstanden evalueres til sann.

Eksempel på gjør … mens

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

I denne koden;

• Vi introduserer en variabel n og setter startverdien til 0 (la n=0).
• Variabelen vår n går inn i en do…while-løkke der verdien økes med 1 etter hver iterasjon (n+=1)
• Verdien av n logges.
• Sløyfen vil fortsette å kjøre så lenge verdien av n er mindre enn 7 (n<7).

Når du kjører denne koden, vil konsollen vise verdier på n fra 1 til 7 ettersom sløyfen kjøres 7 ganger.

Nestet sløyfe

En nestet løkke er en situasjon der vi har en løkke inne i en løkke. For eksempel kan vi ha en for-løkke nestet inne i en annen for-løkke.

for (let outer = 0; outer < 5; outer += 2) {

  for (let inner = 0; inner < 6; inner += 2) {

    console.log(`${outer}-${inner}`);

  }

}

• Det er to variabler; ytre og indre og begge initialiseres med verdien null.
• Begge variablene økes med 2 etter hver iterasjon
• De ytre og indre løkkene gjentas tre ganger hver.

Sløyfekontrolluttalelser

Loop control statements, noen ganger kjent som «jump statements» avbryter den normale flyten til et program. Bryt og fortsett er eksempler på sløyfekontrollutsagn.

Bryt uttalelser

Break-utsagn avslutter en loop umiddelbart, selv om betingelsen ikke er oppfylt.

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 gjengitte koden vil vises som;

Fortsett uttalelser

Continue-setninger brukes til å hoppe over en bestemt kodeblokk og utføre iterasjon for den nye sløyfen.

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

Den gjengitte koden vil vises som;

Konklusjon

Ovenfor er de vanlige løkkene du vil komme over i vanilla JavaScript og dets rammeverk/biblioteker. Som fremhevet har hver sløyfetype sin brukstilfelle og forskjellige oppførsel. Hvis du velger feil sløyfetype, vil du sannsynligvis ha feil, og koden din vil sannsynligvis vise uventet oppførsel.

Hvis du har å gjøre med et JavaScript-rammeverk eller -bibliotek, sjekk alltid dokumentasjonen og bruk de innebygde loopene.