Repetition i JavaScript

I den här artikeln kommer vi att förklara repetition i JavaScript.

YouTube Video

for-satsen i JavaScript

Grundläggande syntax

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

for-satsen i JavaScript är en syntax för att utföra iteration. Den kör upprepade gånger ett angivet kodblock så länge ett specifikt villkor är uppfyllt. Genom att använda for-satsen kan samma process köras effektivt flera gånger.

• Initialisering (initialization): Delen som körs endast en gång innan loopen startar. Initiera variabler som loopräknaren.
• Villkor (condition): Villkoret som avgör om loopen ska fortsätta. Om true fortsätter loopen, om false avslutas den.
• Uppdatering (update): Detta körs i slutet av varje loop för att uppdatera loopräknaren.

Exempel

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

I detta fall börjar i på 0, och loopen körs så länge i < 5 är true. i++ ökar värdet av i med 1 vid varje iteration av loopen. Som resultat visas siffrorna från 0 till 4.

Omfattning för loopräknaren

Deklarera eller initiera variabler i initialiseringsdelen av for-satsen. Variabler som deklareras här är endast giltiga inom loopen.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Som visas i det här exemplet, kommer att referera till en variabel utanför for-satsen resultera i ett fel.

Oändlig loop

Att ange ett villkor som inte avslutar loopen leder till en oändlig loop. Detta kan belasta webbläsaren eller systemet, så försiktighet behövs.

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

Arrayer och for-satsen

Det är vanligt att använda for-satsen tillsammans med arrayer. Det är bekvämt för att bearbeta varje element i en array.

Exempel

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å detta sätt kan du bearbeta varje element i en array med hjälp av index.

Andra loopkonstruktioner

for...of-satsen

for...of-satsen används för itererbara objekt som arrayer och strängar.

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

Detta gör att du kan bearbeta varje element utan att använda index.

for...in-satsen

for...in-satsen används för att iterera över egenskaperna hos ett 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å detta sätt kan du utföra operationer på varje element med hjälp av nycklarna.

Sammanfattning

• for-satsen är en loopkonstruktion med tre delar: initiering, villkor och uppdatering.
• Du kan kontrollera looparnas beteende genom att använda break eller continue.
• När de kombineras med arrayer eller objekt kan element eller egenskaper bearbetas effektivt.

while-satsen i JavaScript

Grundläggande syntax

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

while-satsen i JavaScript är en loopstruktur som utför upprepade operationer så länge det angivna villkoret är true. Precis som for-satsen anger while-satsen endast villkoret.

• Villkor: Skriv det villkorsuttryck som avgör om loopen ska fortsätta. Loopen fortsätter medan villkoret är true och avslutas när det blir false.

Exempel

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

I detta exempel börjar loopen med variabeln i på 0 och körs så länge i < 5 är true. Vid varje iteration av loopen ökas i med 1, och när i blir 5, blir villkoret false och loopen avslutas. Som resultat visar while-satsen från 0 till 4.

Till skillnad från for-satsen skrivs initiering och uppdatering av variabler som separata satser i while-satsen. Du kan också referera till variabeln efter while-satsen. I detta fall visas 5 efter att while-satsen har avslutats.

Oändlig loop

Om villkoret alltid är true inträffar en oändlig loop som inte avslutas. Oändliga loopar bör undvikas, men om de används avsiktligt kan du avsluta loopen med en break-sats.

Exempel

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

Bearbeta arrayer med en while-loop

Det är också möjligt att bearbeta arrayer med ett while-uttryck.

Exempel

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

Grundläggande syntax

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

do...while-uttrycket, en variant av while-uttrycket, kontrollerar villkoret efter att loopens innehåll körts minst en gång. Medan while-uttrycket kontrollerar villkoret först, kör do...while-uttrycket innehållet en gång innan villkoret verifieras.

Exempel

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

I det här exemplet visas i från 0 till 4. do...while-uttrycket skiljer sig från while-uttrycket genom att det alltid körs minst en gång, även om villkoret är false.

Sammanfattning

• while-uttrycket används för att upprepat köra kod så länge villkoret är true.
• Var försiktig med oändliga loopar, men du kan kontrollera looparnas flöde med hjälp av break och continue.
• do...while-uttrycket är användbart när du vill köra loopen minst en gång.

break och continue

Du kan använda break och continue inuti loopen.

• break används för att avbryta loopen i förtid.
• continue hoppar över den aktuella iterationen och fortsätter till nästa iteration.

Exempel 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 detta fall körs break när i blir 5. Som resultat visas siffrorna från 0 till 4.

Exempel 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 detta fall körs continue när i är 2. Som ett resultat visas andra siffror än 2.

Nästa loopar i JavaScript

I JavaScript-programmering är en nästlad loop en struktur där en loop finns inuti en annan. Sådana loopar är mycket effektiva när specifika algoritmer eller processer sträcker sig över flera dimensioner eller lager. Till exempel är bearbetning av en flerdimensionell array med arrayer inuti arrayer ett typiskt fall.

Här kommer vi att förklara den grundläggande strukturen för nästlade loopar, användningsexempel, försiktighetsåtgärder och optimeringsöverväganden.

Grundläggande struktur för nästlade loopar

Den grundläggande strukturen för en nästlad loop är en form där en eller flera loopar är inneslutna i en annan loop. Varje gång den yttre loopen körs en gång, körs den inre loopen så många gånger.

Nedan är ett grundläggande exempel på två nästlade loopar.

 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 ovan räknas i i den yttre loopen, och j räknas i den inre loopen. Varje gång den yttre loopen körs en gång, körs den inre loopen två gånger.

Praktiskt exempel på nästlade loopar

Nästlade loopar är särskilt användbara för att hantera flerdimensionella arrayer. Till exempel, när du bearbetar en tvådimensionell array måste du hantera både raderna (yttre loop) och kolumnerna (inre loop).

I följande exempel hanterar vi en tvådimensionell array och skriver ut varje 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å detta sätt möjliggör användning av nästlade loopar åtkomst till varje element i en tvådimensionell array.

Anteckningar

Det finns några punkter att vara medveten om när man använder nästlade loopar.

1. Prestandafrågor

   När nästlade loopar blir djupare ökar exekveringstiden kraftigt. Till exempel, om den yttre loopen körs 100 gånger och den inre loopen 100 gånger, utförs totalt 10 000 operationer. Därför, om det finns många loopiterationer, bör du överväga loopoptimering för att öka effektiviteten.

2. Tillämpning på komplexa algoritmer

   Nästlade loopar är mycket kraftfulla, men när bearbetningen blir komplex kan koden bli svår att förstå. Därför, för att bibehålla läsbarheten i koden, är det viktigt att organisera bearbetningen med lämpliga kommentarer och funktioner.

Optimeringsöverväganden

När du använder nästlade loopar kan följande optimeringar övervägas.

1. Tidig avbruten loop

   Om ett specifikt villkor uppfylls inuti loopen kan du använda ett break-uttryck för att avsluta loopen. Detta kan undvika onödiga loopar och förbättra prestandan.

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. Flytta beräkningar utanför

   Istället för att utföra samma beräkning inuti loopen varje gång kan du utföra den en gång utanför loopen och använda resultatet för att göra processen 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}

Sammanfattning

Nästlade loopar är mycket användbara för att hantera komplexa datastrukturer och algoritmer i JavaScript. Om de dock inte används på rätt sätt kan de leda till prestandaförsämring och minskad läsbarhet i koden. För att använda nästlade loopar effektivt är det viktigt att sträva efter loopoptimering och kodorganisation samt att använda lämpliga tillvägagångssätt beroende på situationen.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video