Articles
Introduksjon til JavaScript
Repetisjonshåndtering i JavaScript

Repetisjonshåndtering i JavaScript

I denne artikkelen skal vi forklare repetisjonshåndtering i JavaScript.

YouTube Video

for-setningen i JavaScript

Grunnleggende Syntax 

1for (initialization; condition; update) {
2  // Code to repeat
3}

for-setningen i JavaScript er en syntaks for å utføre iterasjon. Den kjører gjentatte ganger en spesifisert kodeblokk så lenge en spesifisert betingelse er oppfylt. Ved å bruke for-setningen kan samme prosess kjøres effektivt flere ganger.

  • Initialisering (initialization): Delen som kun utføres én gang før løkken starter. Initialiser variabler, som løkketelleren.
  • Betingelse (condition): Betingelsen som avgjør om løkken skal fortsette. Hvis true, fortsetter løkken; hvis false, avsluttes den.
  • Oppdatering (update): Dette utføres på slutten av hver løkke for å oppdatere løkketelleren.

Eksempel 

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

I dette tilfellet starter i på 0, og løkken kjører så lenge i < 5 er true. i++ øker i med 1 for hver iterasjon av løkken. Som et resultat vises tallene fra 0 til 4.

Rekkevidde for løkketelleren

Deklarer eller initialiser variabler i initialiseringsdelen av for-setningen. Variabler erklært her er kun gyldige innenfor løkken.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError
  • Som vist i dette eksempelet, vil det å referere til en variabel utenfor for-setningen føre til en feil.

Uendelig løkke

Å sette en betingelse som ikke avslutter løkken fører til en uendelig løkke. Dette kan belaste nettleseren eller systemet, så vær forsiktig.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Array og for-setningen

Det er vanlig å bruke for-setningen i sammenheng med array. Det er praktisk for å behandle hvert element i en matrise.

Eksempel 

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

På denne måten kan du behandle hvert element i en matrise ved hjelp av indekser.

Andre løkkekonstruksjoner

for...of-setning

for...of-setningen brukes for iterable objekter som matriser og strenger.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Dette gjør det mulig å behandle hvert element uten å bruke indekser.

for...in-setning

for...in-setningen brukes til å iterere over egenskapene til et objekt.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

På denne måten kan du utføre operasjoner på hvert element ved hjelp av nøklene.

Sammendrag

  • for-setningen er en løkkekonstruksjon med tre deler: initialisering, betingelse og oppdatering.
  • Du kan kontrollere oppførselen til løkker ved hjelp av break eller continue.
  • Når den kombineres med matriser eller objekter, kan elementer eller egenskaper behandles effektivt.

while-setningen i JavaScript

Grunnleggende Syntax 

1while (condition) {
2    // Code that repeats while the condition is true
3}

while-setningen i JavaScript er en løkkestruktur som utfører gjentatte operasjoner så lenge den spesifiserte betingelsen er true. I likhet med for-setningen spesifiserer while-setningen bare betingelsen.

  • Betingelse: Skriv den betingede uttrykksbetingelsen som bestemmer om løkken skal fortsette. Løkken fortsetter mens den er true og avsluttes når den blir false.

Eksempel 

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

I dette eksemplet starter løkken med variabelen i på 0 og kjører så lenge i < 5 er true. I hver løkkeiterasjon økes i med 1, og når i blir 5, blir betingelsen false og løkken avsluttes. Som et resultat viser while-setningen fra 0 til 4.

I motsetning til for-setningen skrives initialisering og oppdatering av variabler som separate setninger i while-setningen. Du kan også referere til variabelen etter while-setningen. I dette tilfellet vises 5 etter at while-setningen er avsluttet.

Uendelig løkke

Hvis betingelsen alltid er true, oppstår det en uendelig løkke som ikke avsluttes. Uendelige løkker bør unngås, men hvis de brukes med vilje, kan du avslutte løkken med en break-setning.

Eksempel 

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Behandle arrays med en while-løkke

Det er også mulig å behandle arrays med en while-setning.

Eksempel 

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

do...while-setning

Grunnleggende Syntax 

1do {
2    // Code that is executed at least once
3} while (condition);

do...while-setningen, en variant av while-setningen, sjekker betingelsen etter at løkken er kjørt minst én gang. Mens while-setningen sjekker betingelsen først, utfører do...while-setningen prosessen én gang før betingelsen verifiseres.

Eksempel 

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

I dette eksempelet vises i fra 0 til 4. do...while-setningen skiller seg fra while-setningen ved at den alltid utføres minst én gang, selv om betingelsen er false.

Sammendrag

  • while-setningen brukes til å gjentatte ganger kjøre koden så lenge betingelsen er true.
  • Vær forsiktig med uendelige løkker, men du kan kontrollere løkkens flyt ved å bruke break og continue.
  • do...while-setningen er nyttig når du vil kjøre løkken minst én gang.

break og continue

Du kan bruke break og continue inne i løkken.

  • break brukes til å avslutte løkken før tiden.
  • continue hopper over den nåværende iterasjonen og fortsetter til neste iterasjon.

Eksempel på break 

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

I dette tilfellet utføres break når i blir 5. Som et resultat vises tallene fra 0 til 4.

Eksempel på continue 

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

I dette tilfellet utføres continue når i er 2. Som et resultat vises tallene bortsett fra 2.

Nøstede løkker i JavaScript

I JavaScript-programmering er en nøstet løkke en struktur der en løkke finnes inni en annen løkke. Slike løkker er svært effektive når spesifikke algoritmer eller prosesser dekker flere dimensjoner eller lag. For eksempel er behandling av et flerdimensjonalt array med arrays inni arrays et typisk tilfelle.

Her vil vi forklare den grunnleggende strukturen for nøstede løkker, brukereksempler, forholdsregler og optimaliseringshensyn.

Grunnleggende struktur for nøstede løkker

Den grunnleggende strukturen for en nestet løkke er en form der én eller flere løkker er inneholdt i en annen løkke. Hver gang den ytre løkken kjøres én gang, kjøres den indre løkken like mange ganger.

Nedenfor er et grunnleggende eksempel på to nestede løkker.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

I koden ovenfor telles i i den ytre løkken, og j telles i den indre løkken. Hver gang den ytre løkken kjøres én gang, kjøres den indre løkken to ganger.

Praktisk eksempel på nestede løkker

Nestede løkker er spesielt nyttige for å håndtere flerdimensjonale matriser. For eksempel, når du håndterer en todimensjonal matrise, må du håndtere både radene (ytre løkke) og kolonnene (indre løkke).

I det følgende eksempelet håndterer vi en todimensjonal matrise og skriver ut hvert element.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

På denne måten lar bruk av nestede løkker deg få tilgang til hvert element i en todimensjonal matrise.

Notater

Det er noen punkter man bør være oppmerksom på når man bruker nestede løkker.

  1. Ytelsesproblemer

    Jo dypere nestede løkker blir, desto kraftigere øker kjøretiden. For eksempel, hvis den ytre løkken kjøres 100 ganger og den indre løkken 100 ganger, utføres totalt 10,000 operasjoner. Derfor, hvis det er mange løkkekjøringer, bør du vurdere løkkeoptimalisering for bedre effektivitet.

  2. Anvendelse på komplekse algoritmer

    Nestede løkker er svært kraftige, men når behandlingen blir kompleks, kan koden bli vanskelig å forstå. Derfor, for å opprettholde leseligheten i koden, er det viktig å organisere behandlingen med passende kommentarer og funksjoner.

Optimaliseringshensyn

Når du bruker nestede løkker, kan følgende optimaliseringer vurderes.

  1. Tidlig avbrudd av løkke

    Hvis en spesifikk betingelse er oppfylt inne i løkken, kan du bruke en break-setning for å avslutte løkken. Dette kan unngå unødvendige løkker og forbedre ytelsen.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

  1. Flytt beregninger utenfor

    I stedet for å utføre den samme beregningen inne i løkken hver gang, kan du utføre den én gang utenfor løkken og bruke resultatet for å gjøre prosessen mer effektiv.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Sammendrag

Nested loops er veldig nyttige for å håndtere komplekse datastrukturer og algoritmer i JavaScript. Men hvis de ikke brukes riktig, kan de føre til ytelsesforringelse og redusert lesbarhet i koden. For å bruke nested loops effektivt er det viktig å streve etter loop-optimalisering og kodeorganisering, og å ta passende tilnærminger avhengig av situasjonen.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Beste praksis for betingelsesuttalelser i JavaScriptBeste praksis for iterasjon i JavaScript