Mester JavaScript-løkker: En komplett guide med kodeeksempler

by
Tweet
Share
Share
Pin
0 Shares

JavaScript Løkker: En Omfattende Guide

JavaScript er et av de mest utbredte programmeringsspråkene. For utviklere som ønsker å spesialisere seg som JavaScript-ingeniører, er det viktig å ha en solid forståelse av løkker, deres varianter og hvordan de opererer.

En JavaScript-løkke er et kraftfullt redskap som brukes til å repetere handlinger basert på en gitt betingelse. Begrepet «iterere» refererer generelt til gjentagelse i forbindelse med en løkke. En løkke vil fortsette å iterere til en definert stopp-betingelse er oppfylt.

For å visualisere dette, tenk deg et dataspill der du får instruksjon om å ta et antall skritt nordover, etterfulgt av et antall skritt til venstre.

For eksempel, å ta 7 skritt nordover kan representeres slik:

      
      for (let steg = 0; steg < 7; steg++) {
        // Kjører 7 ganger, med stegverdier fra 0 til 6.
        console.log("Går nordover ett steg");
      }

Når denne koden utføres, vil den simulere å gå syv skritt nordover.

Hvorfor er løkker vanlige i programmering?

  • Repeterende oppgaver: Løkker lar deg utføre kodeinstruksjoner gjentatte ganger inntil en spesifikk betingelse er oppfylt.
  • Iterasjon over objekter og arrayer: Løkker er essensielle for å navigere gjennom egenskapene til objekter eller elementene i en array, slik at du kan utføre handlinger for hvert enkelt element eller egenskap.
  • Datafiltrering: Du kan bruke løkker til å filtrere data basert på spesifikke kriterier.

JavaScript tilbyr flere typer løkker, inkludert for, while, do...while, for...of og for...in. La oss se nærmere på hver av dem og hvordan de fungerer.

For-løkke

En for-løkke gjentas så lenge en spesifisert betingelse er sann. Den består av tre valgfrie uttrykk, etterfulgt av en kodeblokk:

        
          for (initialisering; betingelse; finaltUttrykk) {
             // kode
          }
  • Initialiseringsuttrykket kjøres én gang før selve løkken starter. Det brukes vanligvis til å definere en eller flere tellere.
  • Betingelsesuttrykket sjekkes før hver iterasjon. Hvis betingelsen er sann, utføres koden inni løkken. Hvis betingelsen er usann, stopper løkken. Hvis betingelsen utelates, antas den å være sann.
  • FinaltUttrykk kjøres etter hver iterasjon. Det brukes ofte til å øke eller redusere en teller.

Du kan bruke blokksetninger ({}) for å utføre flere setninger innenfor løkken. For å avslutte løkken før betingelsesuttrykket evalueres til usann, kan du bruke break-setningen.

Eksempler på for-løkker med kode

  • Bruk av for-løkke for iterasjon:
    •           
              for (let i = 0; i < 7; i++) {
                  console.log(i);
              }

    I dette eksemplet:

    • Variabelen i initialiseres til null.
    • Betingelsen er at i må være mindre enn 7.
    • Løkken itererer gjentatte ganger så lenge verdien av i er mindre enn 7.
    • Etter hver iterasjon økes i med 1.

  • Bruk av break-setning for å avslutte løkken før betingelsen blir usann:
    •           
            for (let i = 1; i < 11; i += 2) {
                if (i === 9) {
                    break;
                }
                console.log('Totalt antall utviklere: ' + i);
            }
    • Koden itererer fra 1 til 10.
    • Variabelen i starter med verdien 1.
    • Løkken fortsetter så lenge i er mindre enn 11.
    • Verdien av i økes med 2 etter hver iterasjon.

    If-setningen sjekker om verdien av i er lik 9. Hvis det er sant, kjøres break-setningen og løkken avsluttes.

For…of-løkke

for...of-løkken itererer over iterable objekter som Map, Array, Arguments og Set. Den kaller en tilpasset iterasjonsmekanisme og kjører koden for hver unike egenskap.

Grunnstrukturen til en for...of-løkke er:

          
            for (variabel of objekt)
            setning

Eksempler på for...of-løkker

  • Iterasjon over en array:
    •               
                const frontendSpråk = ["HTML", "CSS", "JavaScript", "React"];
                for (let i of frontendSpråk) {
                    console.log(i);
                }

    I denne koden:

    • Vi definerer en array som heter frontendSpråk.
    • Arrayen inneholder fire elementer: «HTML», «CSS», «JavaScript» og «React».
    • for...of-løkken går gjennom hvert element i frontendSpråk.
    • Variabelen i antar verdien av hvert element i hver iterasjon, som deretter skrives til konsollen.

  • Iterasjon over et sett:
    •               
                const s = new Set();
                s.add(2);
                s.add("grå");
                for (let n of s) {
                    console.log(n);
                }

    Her:

    • Vi deklarerer en variabel s og tilordner den et nytt Set-objekt.
    • Vi legger til to elementer ved hjelp av add()-metoden.
    • for...of itererer over elementene i settet.
    • Løkken tilordner gjeldende element til n før console.log(n) utføres.

  • Iterasjon over et kart:
    •                     
                      const m = new Map();
                      m.set(4, "kanin");
                      m.set(6, "ape");
                      m.set(8, "elefant");
                      m.set(10, "løve");
                      m.set(12, "leopard");
                      for (let n of m) {
                          console.log(n);
                      }

    I denne kodeblokken:

    • Vi bruker Map()-konstruktøren for å opprette et nytt kartobjekt.
    • En variabel m er deklarert.
    • Vi legger til fem nøkkel-verdi-par ved hjelp av set()-metoden.
    • for...of-løkken itererer over elementene i kartobjektet m.

For…in-løkke

En for...in-løkke brukes til å iterere over egenskapene til et objekt. Den har følgende grunnstruktur:

            
                for (egenskap in objekt) {
                   // kode
                }

Du kan også bruke for...in-løkker for å iterere over arrays og array-lignende objekter.

            
                const handleliste = { kål: 4, tomater: 2, hodekål: 0, salat: 6, gresskar: 5 };
                for (const grønnsak in handleliste) {
                    console.log(grønnsak);
                }

I denne koden:

  • Vi oppretter et JavaScript-objekt kalt handleliste.
  • Vi bruker en for-løkke for å gå gjennom hver egenskap i handleliste ved hjelp av in-operatoren.
  • I hver iterasjon vil løkken tildele det gjeldende egenskapsnavnet fra handleliste til variabelen grønnsak.

While-løkke

En while-løkke sjekker en betingelse. Hvis betingelsen er sann, vil kodeblokken kjøres. Hvis den er usann, avsluttes løkken, og koden vil ikke bli utført.

Den grunnleggende strukturen til en while-løkke er:

           
             while (betingelse)
               setning

Betingelsen må sjekkes før setningen i løkken utføres. Du kan utføre flere setninger ved å bruke en blokksetning ({}).

Eksempel på while-løkke:

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

I dette eksemplet:

  • Variabelen n initialiseres med 0.
  • Løkken kjører så lenge n er mindre enn 9.
  • Verdien av n skrives ut til konsollen og økes med 1 etter hver iterasjon.
  • Koden slutter å kjøre når verdien av n når 8.

Do…while-løkke

En do...while-løkke itererer inntil en spesifikk betingelse blir usann.

Den generelle strukturen for en do...while-setning er:

           
             do
                setning
             while (betingelse);

Setningen utføres én gang før betingelsen sjekkes. Hvis betingelsen er sann, vil setningen utføres igjen. Hvis betingelsen er usann, stopper kjøringen, og kontrollen går til setningen etter do...while-løkken. Koden i en do...while-løkke kjøres garantert minst én gang, selv om betingelsen er usann fra starten.

Eksempel på do...while:

           
              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.
  • Variabelen n går inn i en do...while-løkke der verdien økes med 1 etter hver iterasjon.
  • Verdien av n skrives ut til konsollen.
  • Løkken fortsetter å kjøre så lenge n er mindre enn 7.

Når denne koden kjøres, vil konsollen vise verdier av n fra 1 til 7, siden løkken kjøres 7 ganger.

Nestet løkke

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

          
           for (let ytre = 0; ytre < 5; ytre += 2) {
              for (let indre = 0; indre < 6; indre += 2) {
                 console.log(`${ytre}-${indre}`);
                }
           }
  • Det er to variabler, ytre og indre, begge initialisert med 0.
  • Begge variablene økes med 2 etter hver iterasjon.
  • Både de ytre og indre løkkene gjentas tre ganger hver.

Sløyfekontrollsetninger

Sløyfekontrollsetninger, noen ganger kalt «hoppsetninger», avbryter normal flyt i et program. break og continue er eksempler på slike setninger.

Break-setninger

break-setningen avsluttes umiddelbart en løkke, selv om betingelsen ikke er oppfylt.

          
              for (let n = 1; n <= 26; n++) {
                  if (n === 13) {
                      console.log("Løkken stopper her. Vi har nådd break-setningen");
                      break;
                  }
                  console.log(n);
              }

Den resulterende koden vil vises som:

Continue-setninger

continue-setningen brukes til å hoppe over en spesifikk kodeblokk og fortsette iterasjonen med neste verdi.

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

Den resulterende koden vil vises som:

Konklusjon

Ovenfor er de vanligste løkkene du vil møte i vanlig JavaScript og dets rammeverk/biblioteker. Som vi har sett, har hver løkketype sin egen bruk og oppførsel. Å velge feil løkketype kan føre til feil og uforutsigbar oppførsel i koden din.

Hvis du arbeider med et JavaScript-rammeverk eller bibliotek, bør du alltid sjekke dokumentasjonen og bruke de innebygde løkkene.