Herhalingsverwerking in JavaScript

In dit artikel leggen we herhalingsverwerking in JavaScript uit.

YouTube Video

De for-verklaring in JavaScript

Basis Syntax

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

De for-verklaring in JavaScript is een syntaxis voor het uitvoeren van iteraties. Het voert herhaaldelijk een opgegeven blok code uit zolang aan een bepaalde voorwaarde wordt voldaan. Met behulp van de for-verklaring kan hetzelfde proces efficiënt meerdere keren worden uitgevoerd.

• Initialisatie (initialization): Het deel dat slechts één keer wordt uitgevoerd voordat de lus begint. Initialiseer variabelen zoals de lus-teller.
• Voorwaarde (condition): De voorwaarde die bepaalt of de lus doorgaat. Als true, gaat de lus door; als false, eindigt deze.
• Update (update): Dit wordt aan het einde van elke lus uitgevoerd om de lus-teller bij te werken.

Voorbeeld

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

In dit geval begint i bij 0, en de lus loopt zolang i < 5 waar is. i++ verhoogt i met 1 bij elke iteratie van de lus. Als resultaat worden de nummers van 0 tot 4 weergegeven.

Bereik van de lus-teller

Declareer of initialiseer variabelen in het initialisatiegedeelte van de for-verklaring. Variabelen die hier worden gedeclareerd, zijn alleen geldig binnen de lus.

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

• Zoals in dit voorbeeld wordt getoond, zal het verwijzen naar een variabele buiten de for-instructie resulteren in een fout.

Oneindige lus

Het instellen van een voorwaarde die de lus niet beëindigt, resulteert in een oneindige lus. Dit kan de browser of het systeem belasten, dus voorzichtigheid is geboden.

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

Arrays en de for-verklaring

Het is gebruikelijk om de for-verklaring te gebruiken in combinatie met arrays. Het is handig om elk element van een array te verwerken.

Voorbeeld

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"

Op deze manier kun je elk element van een array verwerken met behulp van indices.

Andere lusconstructies

for...of-instructie

De for...of-instructie wordt gebruikt voor iterabele objecten zoals arrays en strings.

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

Hiermee kun je elk element verwerken zonder indices te gebruiken.

for...in-instructie

De for...in-instructie wordt gebruikt om door de eigenschappen van een object te itereren.

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"

Op deze manier kun je bewerkingen uitvoeren op elk element met behulp van de sleutels.

Samenvatting

• De for-instructie is een lusconstructie met drie delen: initialisatie, conditie en update.
• Je kunt het gedrag van lussen regelen met behulp van break of continue.
• Wanneer gecombineerd met arrays of objecten, kunnen elementen of eigenschappen efficiënt worden verwerkt.

De while-instructie in JavaScript

Basis Syntax

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

De while-instructie in JavaScript is een lusstructuur die herhaalde bewerkingen uitvoert zolang de opgegeven conditie true is. Net als de for-instructie specificeert de while-instructie alleen de conditie.

• Conditie: Schrijf de voorwaardelijke expressie die bepaalt of de lus doorgaat. De lus gaat door zolang true is en stopt wanneer deze false wordt.

Voorbeeld

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

In dit voorbeeld begint de lus met de variabele i op 0 en voert uit zolang i < 5 true is. Bij elke iteratie van de lus wordt i verhoogd met 1, en wanneer i 5 wordt, wordt de conditie false en eindigt de lus. Als resultaat toont de while-instructie van 0 tot 4.

In tegenstelling tot de for-instructie worden in de while-instructie de initialisatie en update van variabelen als afzonderlijke instructies geschreven. Je kunt ook naar de variabele verwijzen na de while-instructie. In dit geval wordt 5 weergegeven nadat de while-instructie is beëindigd.

Oneindige lus

Als de conditie altijd true is, ontstaat er een oneindige lus die niet eindigt. Oneindige lussen moeten worden vermeden, maar als ze opzettelijk worden gebruikt, kun je de lus beëindigen met een break-instructie.

Voorbeeld

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

Arrays verwerken met een while-lus

Het is ook mogelijk om arrays te verwerken met een while-instructie.

Voorbeeld

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

Basis Syntax

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

De do...while-instructie, een variant van de while-instructie, controleert de voorwaarde na het ten minste één keer uitvoeren van de lus. Waar de while-instructie eerst de voorwaarde controleert, voert de do...while-instructie het proces één keer uit voordat de voorwaarde wordt geverifieerd.

Voorbeeld

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

In dit voorbeeld wordt i weergegeven van 0 tot 4. De do...while-instructie verschilt van de while-instructie doordat deze altijd één keer wordt uitgevoerd, zelfs als de voorwaarde false is.

Samenvatting

• De while-instructie wordt gebruikt om code herhaaldelijk uit te voeren zolang de voorwaarde true is.
• Let op voor oneindige lussen, maar je kunt de stroom van lussen controleren met behulp van break en continue.
• De do...while-instructie is handig wanneer je de lus ten minste één keer wilt uitvoeren.

break en continue

Je kunt break en continue binnen de lus gebruiken.

• break wordt gebruikt om de lus voortijdig te beëindigen.
• continue slaat de huidige iteratie over en gaat door naar de volgende iteratie.

Voorbeeld van 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

In dit geval wordt break uitgevoerd wanneer i 5 wordt. Als resultaat worden de nummers van 0 tot 4 weergegeven.

Voorbeeld van 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 === 2) {
13        continue;  // Skips when i is 2
14    }
15    console.log(i);
16}
17// Outputs 0, 1, 3, 4

In dit geval wordt continue uitgevoerd wanneer i 2 is. Als resultaat worden andere nummers dan 2 weergegeven.

Geneste lussen in JavaScript

In JavaScript-programmering is een geneste lus een structuur waarbij een lus binnen een andere lus bestaat. Dergelijke lussen zijn zeer effectief wanneer specifieke algoritmen of processen meerdere dimensies of lagen omvatten. Bijvoorbeeld, het verwerken van een multidimensionale array met arrays binnen arrays is een typisch geval.

Hier leggen we de basisstructuur van geneste lussen uit, inclusief gebruiksvoorbeelden, voorzorgsmaatregelen en optimalisatie-overwegingen.

Basisstructuur van geneste lussen

De basisstructuur van een genestelde lus is een vorm waarbij een of meer lussen binnen een andere lus zijn ingebed. Elke keer dat de buitenste lus eenmaal wordt uitgevoerd, wordt de binnenste lus dat aantal keren uitgevoerd.

Hieronder staat een basisvoorbeeld van twee genestelde lussen.

 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

In de bovenstaande code wordt i geteld in de buitenste lus en j in de binnenste lus. Elke keer dat de buitenste lus eenmaal wordt uitgevoerd, wordt de binnenste lus tweemaal uitgevoerd.

Praktisch voorbeeld van genestelde lussen

Genestelde lussen zijn bijzonder nuttig voor het beheren van multidimensionale arrays. Bijvoorbeeld, bij het verwerken van een tweedimensionale array moet je zowel de rijen (buitenste lus) als de kolommen (binnenste lus) verwerken.

In het volgende voorbeeld verwerken we een tweedimensionale array en printen we elk 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

Op deze manier kun je met genestelde lussen toegang krijgen tot elk element van een tweedimensionale array.

Notities

Er zijn enkele punten waar je op moet letten bij het gebruik van genestelde lussen.

1. Prestatieproblemen

   Naarmate genestelde lussen dieper worden, neemt de uitvoeringstijd sterk toe. Bijvoorbeeld, als de buitenste lus 100 keer wordt uitgevoerd en de binnenste lus 100 keer, worden er in totaal 10.000 operaties uitgevoerd. Daarom, als er veel lusherhalingen zijn, moet je lusoptimalisatie overwegen voor efficiëntie.

2. Toepassing op complexe algoritmen

   Genestelde lussen zijn zeer krachtig, maar naarmate de verwerking complexer wordt, kan de code moeilijker te begrijpen zijn. Daarom is het belangrijk om de verwerking met geschikte opmerkingen en functies te organiseren om de leesbaarheid van de code te behouden.

Overwegingen bij optimalisatie

Bij het gebruik van genestelde lussen kunnen de volgende optimalisaties worden overwogen.

1. Vroegtijdige beëindiging van lussen

   Als aan een specifieke voorwaarde binnen de lus wordt voldaan, kun je een break-instructie gebruiken om de lus te verlaten. Dit kan onnodige lussen vermijden en de prestaties verbeteren.

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. Berekeningen naar buiten verplaatsen

   In plaats van dezelfde berekening telkens binnen de lus uit te voeren, kun je deze één keer buiten de lus uitvoeren en het resultaat gebruiken om het proces efficiënter te maken.

 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}

Samenvatting

Geneste lussen zijn erg handig voor het omgaan met complexe datastructuren en algoritmen in JavaScript. Echter, als ze niet correct worden gebruikt, kunnen ze leiden tot prestatievermindering en verminderde code leesbaarheid. Om geneste lussen effectief te gebruiken, is het belangrijk om te streven naar lusoptimalisatie en codeorganisatie, en om geschikte benaderingen toe te passen afhankelijk van de situatie.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video