Gentagelsesbehandling i JavaScript

I denne artikel forklarer vi gentagelsesbehandling i JavaScript.

YouTube Video

for-udsagnet i JavaScript

Grundlæggende syntaks

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

for-udsagnet i JavaScript er en syntaks til at udføre iterationer. Det udfører gentagne gange et specificeret kodeblok, så længe en bestemt betingelse er opfyldt. Ved at bruge for-udsagnet kan den samme proces effektivt udføres flere gange.

• Initialisering (initialization): Den del, der kun udføres én gang, før løkken starter. Initialiser variabler som f.eks. løkketælleren.
• Betingelse (condition): Betingelsen, der afgør, om løkken skal fortsætte. Hvis true, fortsætter løkken; hvis false, stopper den.
• Opdatering (update): Dette udføres i slutningen af hver iteration for at opdatere løkketælleren.

Eksempel

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

I dette tilfælde starter i ved 0, og løkken kører, så længe i < 5 er true. i++ øger i med 1 ved hver iteration af løkken. Som resultat vises tallene fra 0 til 4.

Omfanget af løkketælleren

Deklarer eller initialiser variabler i initialiseringsdelen af for-udsagnet. Variabler, der deklareres her, er kun gyldige inden for 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 eksempel, vil henvisning til en variabel uden for for-udsagnet resultere i en fejl.

Uendelig løkke

Indstilling af en betingelse, der ikke afslutter løkken, resulterer i en uendelig løkke. Dette kan belaste browseren eller systemet, så forsigtighed er nødvendig.

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

Arrays og for-udsagnet

Det er almindeligt at bruge for-udsagnet sammen med arrays. Det er praktisk til at behandle hvert element i et array.

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åde kan du behandle hvert element i et array ved hjælp af indekser.

Andre loop-konstruktioner

for...of-sætning

for...of-sætningen bruges til itérbare objekter som arrays og strenge.

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

Dette giver dig mulighed for at behandle hvert element uden at bruge indekser.

for...in-sætning

for...in-sætningen bruges til at iterere over et objekts egenskaber.

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åde kan du udføre operationer på hvert element ved hjælp af nøglerne.

Sammendrag

• for-sætningen er en loop-konstruktion med tre dele: initialisering, betingelse og opdatering.
• Du kan kontrollere adfærden af løkker ved hjælp af break eller continue.
• Når det kombineres med arrays eller objekter, kan elementer eller egenskaber behandles effektivt.

while-sætningen i JavaScript

Grundlæggende syntaks

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

while-sætningen i JavaScript er en løkkestruktur, der udfører gentagne operationer, så længe den specificerede betingelse er true. I lighed med for-sætningen specificerer while-sætningen kun betingelsen.

• Betingelse: Skriv det betingede udtryk, der bestemmer, om løkken skal fortsætte. Løkken fortsætter, mens true, og slutter, når det bliver false.

Eksempel

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

I dette eksempel starter løkken med variablen i sat til 0 og udføres, så længe i < 5 er true. Ved hver iteration af løkken øges i med 1, og når i bliver 5, bliver betingelsen false, og løkken stopper. Som resultat viser while-sætningen fra 0 til 4.

I modsætning til for-sætningen skrives initialisering og opdatering af variabler som separate sætninger i while-sætningen. Du kan også referere til variablen efter while-sætningen. I dette tilfælde vises 5, efter at while-sætningen er afsluttet.

Uendelig løkke

Hvis betingelsen altid er true, opstår en uendelig løkke, som ikke stopper. Uendelige løkker bør undgås, men hvis de bruges med vilje, kan du afslutte løkken med en break-sætning.

Eksempel

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

Behandling af arrays med en while løkke

Det er også muligt at behandle arrays med en while-udsagn.

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-udsagn

Grundlæggende syntaks

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

do...while-udsagnet, en variant af while-udsagnet, kontrollerer betingelsen efter mindst én gennemførelse af løkken. Mens while-udsagnet først kontrollerer betingelsen, udfører do...while-udsagnet processen én gang, før betingelsen verificeres.

Eksempel

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

I dette eksempel vises i fra 0 til 4. do...while-udsagnet adskiller sig fra while-udsagnet, idet det altid udføres én gang, selv hvis betingelsen er false.

Sammendrag

• while-udsagnet bruges til at gentage udførelsen af kode, så længe betingelsen er true.
• Pas på uendelige løkker, men du kan kontrollere løkkernes forløb ved at bruge break og continue.
• do...while-udsagnet er nyttigt, når du ønsker at udføre løkken mindst én gang.

break og continue

Du kan bruge break og continue inden i løkken.

• break bruges til at afslutte løkken før tid.
• continue springer over den aktuelle iteration og fortsætter til den næste iteration.

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 tilfælde udføres break, når i bliver 5. Som 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 tilfælde udføres continue, når i er 2. Som resultat vises andre tal end 2.

Indlejrede løkker i JavaScript

I JavaScript-programmering er en indlejret løkke en struktur, hvor én løkke findes inden i en anden. Sådanne løkker er meget effektive, når bestemte algoritmer eller processer strækker sig over flere dimensioner eller lag. For eksempel er behandling af et flerdimensionelt array med arrays inden i arrays et typisk tilfælde.

Her vil vi forklare den grundlæggende struktur for indlejrede løkker, brugs-eksempler, forsigtighedsregler og overvejelser om optimering.

Grundlæggende struktur for indlejrede løkker

Den grundlæggende struktur i en indlejret løkke er en form, hvor en eller flere løkker er indeholdt i en anden løkke. Hver gang den ydre løkke udføres én gang, udføres den indre løkke det antal gange.

Nedenfor er et grundlæggende eksempel på to indlejrede 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 ovenstående kode bliver i talt i den ydre løkke, og j bliver talt i den indre løkke. Hver gang den ydre løkke udføres én gang, udføres den indre løkke to gange.

Praktisk eksempel på indlejrede løkker

Indlejrede løkker er særligt nyttige til at håndtere flerdimensionelle arrays. For eksempel, når du behandler et todimensionelt array, skal du håndtere både rækkerne (ydre løkke) og kolonnerne (indre løkke).

I det følgende eksempel håndterer vi et todimensionelt array og udskriver 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åde giver brugen af indlejrede løkker adgang til hvert element i et todimensionelt array.

Noter

Der er nogle punkter, man skal være opmærksom på, når man bruger indlejrede løkker.

1. Ydelsesproblemer

   Når indlejrede løkker bliver dybere, stiger udførelsestiden markant. For eksempel, hvis den ydre løkke udføres 100 gange og den indre løkke 100 gange, udføres der i alt 10.000 operationer. Derfor, hvis der er mange løkke-iterationer, bør du overveje løkkeoptimering for effektivitet.

2. Anvendelse på komplekse algoritmer

   Indlejrede løkker er meget kraftfulde, men efterhånden som behandlingen bliver kompleks, kan koden blive svær at forstå. Derfor er det vigtigt at organisere behandlingen med passende kommentarer og funktioner for at bevare kodens læsbarhed.

Overvejelser om optimering

Når man bruger indlejrede løkker, kan følgende optimeringer overvejes.

1. Tidlig afslutning af løkke

   Hvis en specifik betingelse opfyldes inde i løkken, kan du bruge en break-sætning til at afslutte løkken. Dette kan undgå unødvendige løkker og forbedre ydeevnen.

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}

2. Flyt beregninger udenfor

   I stedet for at udføre den samme beregning i løkken hver gang, kan du udføre den én gang udenfor løkken og bruge resultatet for at gøre processen mere 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

Indlejrede løkker er meget nyttige til at håndtere komplekse datastrukturer og algoritmer i JavaScript. Men hvis de ikke bruges korrekt, kan de føre til ydeevneforringelse og nedsat læsbarhed af koden. For at bruge indlejrede løkker effektivt er det vigtigt at stræbe efter løkkeoptimering og kodeorganisering samt at vælge passende tilgange afhængigt af situationen.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video