TypeScript Herhalingsuitspraken

Dit artikel legt de herhalingsuitspraken in TypeScript uit.

YouTube Video

De for-instructie in TypeScript

De for-instructie in TypeScript is een basislusstructuur voor het uitvoeren van herhaalde bewerkingen. In een for-lus kan hetzelfde codeblok herhaaldelijk worden uitgevoerd op basis van een opgegeven aantal keren of voorwaarden.

Basis Syntax

1for (initialization; condition; update) {
2    // Code to execute repeatedly while the condition is true
3}

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

Voorbeeld 1: Basis for-lus

In het onderstaande voorbeeld geeft het de getallen van 0 tot 4 in volgorde weer.

1for (let i = 0; i < 5; i++) {
2    console.log("The value of i is: " + i);
3}
4// Outputs:
5// The value of i is: 0
6// The value of i is: 1
7// The value of i is: 2
8// The value of i is: 3
9// The value of i is: 4

Voorbeeld 2: for-lus met een array

Je kunt ook een for-lus gebruiken om de elementen van een array in volgorde te verwerken.

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

Voorbeeld 3: for-in-lus

De for-in-lus wordt gebruikt om door de eigenschappen van een object of de indices van een array te itereren in volgorde.

1let car = { brand: "Toyota", model: "Corolla", year: 2020 };
2
3for (let key in car) {
4    console.log(key + ": " + car[key]);
5}
6// Outputs:
7// brand: Toyota
8// model: Corolla
9// year: 2020

Voorbeeld 4: for-of-lus

De for-of-lus wordt gebruikt om de waarden van elementen achtereenvolgens op te halen uit iterabele objecten zoals arrays of strings.

1let colors: string[] = ["red", "green", "blue"];
2
3for (let color of colors) {
4    console.log("Color: " + color);
5}
6// Outputs:
7// Color: red
8// Color: green
9// Color: blue

Voorbeeld 5: Geneste for-lus

Het is ook mogelijk om een for-lus binnen een andere for-lus te gebruiken, wat een geneste lus wordt genoemd. Hiermee kun je onder andere dubbele lussen creëren.

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

Samenvatting

• De for-instructie voert herhaaldelijke bewerkingen uit op basis van opgegeven aantallen of voorwaarden.
• for-in wordt gebruikt om de eigenschappen van een object of de indexen van een array op te halen.
• for-of haalt de waarden op van elementen uit itereerbare objecten zoals arrays.
• Complexe herhaalde bewerkingen zijn ook mogelijk met geneste for-lussen.

De for-verklaring in TypeScript biedt krachtige en flexibele herhalende verwerking, vergelijkbaar met andere lussen.

While-verklaringen in TypeScript

In TypeScript is een while-verklaring een lusconstructie die een herhalend proces uitvoert zolang de opgegeven voorwaarde true is. Net als de for-lus is de while-lus geschikt voor situaties waarin het aantal herhalingen niet vooraf bepaald is, of wanneer je herhaling wilt regelen op basis van een voorwaarde.

Basis Syntax

1while (condition) {
2    // Code to execute repeatedly while the condition is true
3}

• Voorwaarde: De voorwaarde waaronder de lus wordt uitgevoerd. De lus gaat door zolang deze voorwaarde true is en stopt wanneer deze false wordt.

Voorbeeld 1: Basis while-lus

In het onderstaande voorbeeld blijft het de waarde van i weergeven zolang i minder is dan 5.

 1let i: number = 0;
 2
 3while (i < 5) {
 4    console.log("The value of i is: " + i);
 5    i++;
 6}
 7// Outputs:
 8// The value of i is: 0
 9// The value of i is: 1
10// The value of i is: 2
11// The value of i is: 3
12// The value of i is: 4

In dit voorbeeld eindigt de lus wanneer i 5 of meer wordt, omdat de voorwaarde false wordt.

Voorbeeld 2: Voorbeeld van een oneindige lus

Als de voorwaarde in een while-lus altijd true is, kan het een oneindige lus worden. Dit zorgt er meestal voor dat het programma niet stopt zoals bedoeld, dus voorzichtigheid is geboden.

 1let x: number = 0;
 2
 3while (true) {
 4    console.log("The value of x is: " + x);
 5    x++;
 6    if (x >= 5) {
 7        break; // Exit the loop when the condition is met
 8    }
 9}
10// Outputs:
11// The value of x is: 0
12// The value of x is: 1
13// The value of x is: 2
14// The value of x is: 3
15// The value of x is: 4

Je kunt de break-verklaring gebruiken om de lus voortijdig af te breken wanneer aan een voorwaarde wordt voldaan.

Voorbeeld 3: do-while-lus

De do-while-lus is een structuur waarbij het lusproces minstens één keer wordt uitgevoerd. Omdat de voorwaarde na het proces wordt geëvalueerd, wordt het proces minstens één keer uitgevoerd, zelfs als de voorwaarde false is.

1let j: number = 5;
2
3do {
4    console.log("The value of j is: " + j);
5    j++;
6} while (j < 5);
7// Outputs: The value of j is: 5

In dit voorbeeld is j vanaf het begin 5 en is j < 5 false, maar in een do-while-lus wordt deze minstens één keer uitgevoerd, ongeacht de voorwaarde.

Samenvatting

• Een while-lus herhaalt de verwerking zolang de voorwaarde true is.
• Als de beëindigingsvoorwaarde van de lus onduidelijk is, moet je oppassen voor oneindige lussen.
• Een do-while-lus verschilt van een normale while-lus doordat de verwerking minstens één keer wordt uitgevoerd.

De while-verklaring in TypeScript is nuttig voor lusverwerking met een onzeker aantal herhalingen of wanneer dynamische voorwaardelijke controles nodig zijn.

break en continue

Je kunt break en continue binnen lussen gebruiken.

• break wordt gebruikt om een lus voortijdig te beëindigen.
• continue wordt gebruikt om de huidige iteratie over te slaan en door te gaan 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;
10while (i < 10) {
11    if (i === 5) {
12        break;  // Ends the loop when i is 5
13    }
14    console.log(i);
15    i++;
16}
17// Outputs 0, 1, 2, 3, 4

In dit geval wordt break uitgevoerd wanneer i gelijk is aan 5. 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    if (i === 2) {
12        i++;
13        continue;  // Skips when i is 2
14    }
15    console.log(i);
16    i++;
17}
18// Outputs 0, 1, 3, 4

In dit geval wordt continue uitgevoerd wanneer i gelijk is aan 2. Als resultaat worden alle nummers behalve 2 weergegeven.

Geneste lussen in TypeScript

Een geneste lus is een structuur waarbij een lus binnen een andere lus wordt gebruikt. In TypeScript worden loopconstructies zoals for, while en do-while ondersteund. Door geneste lussen te gebruiken, kun je tweedimensionale arrays (matrices) verwerken en de verwerking vereenvoudigen op basis van meerdere voorwaarden.

Basis Syntax

De basis syntaxis van een geneste lus is als volgt.

1for (let i: number = 0; i < n; i++) {
2    for (let j: number = 0; j < m; j++) {
3        // Processing for the inner loop
4    }
5}

Voor elke uitvoering van de buitenste lus voltooit de binnenste lus al zijn iteraties. Deze structuur is erg nuttig bij het werken met meerdere lussen of datastructuren.

Voorbeeld van een geneste lus in TypeScript

Doorlopen van een tweedimensionale array

Geneste lussen worden vaak gebruikt bij het manipuleren van multidimensionale datastructuren zoals tweedimensionale arrays. In het volgende voorbeeld worden de elementen van een tweedimensionale array doorlopen en worden hun waarden weergegeven op de console.

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

In dit voorbeeld doorlopen we de tweedimensionale array matrix. De buitenste lus behandelt de rijen en de binnenste lus behandelt de kolommen, waarbij elk element op volgorde wordt weergegeven.

Combinatie van twee arrays

Vervolgens introduceren we een voorbeeld voor het berekenen van alle combinaties van twee arrays. Bijvoorbeeld: u kunt één element uit elk van de twee arrays nemen en alle mogelijke paren weergeven.

 1const array1: string[] = ['A', 'B', 'C'];
 2const array2: number[] = [1, 2, 3];
 3
 4for (let i: number = 0; i < array1.length; i++) {
 5    for (let j: number = 0; j < array2.length; j++) {
 6        console.log(`Pair: (${array1[i]}, ${array2[j]})`);
 7    }
 8}
 9// Output
10// Pair: (A, 1)
11// Pair: (A, 2)
12// Pair: (A, 3)
13// Pair: (B, 1)
14// Pair: (B, 2)
15// Pair: (B, 3)
16// Pair: (C, 1)
17// Pair: (C, 2)
18// Pair: (C, 3)

In dit voorbeeld worden alle paren tussen de stringarray array1 en de nummerarray array2 gemaakt. De buitenste lus haalt elementen uit array1 en de binnenste lus haalt elementen uit array2, waarbij elk paar wordt weergegeven.

Coördinaten genereren met een drievoudige lus

Door drievoudig geneste lussen te gebruiken, kunt u bijvoorbeeld coördinaten genereren in een driedimensionale ruimte.

 1for (let x: number = 0; x < 3; x++) {
 2    for (let y: number = 0; y < 3; y++) {
 3        for (let z: number = 0; z < 3; z++) {
 4            console.log(`Coordinate: (${x}, ${y}, ${z})`);
 5        }
 6    }
 7}
 8// Output
 9// Coordinate: (0, 0, 0)
10// Coordinate: (0, 0, 1)
11// Coordinate: (0, 0, 2)
12// ...
13// Coordinate: (2, 2, 1)
14// Coordinate: (2, 2, 2)

Op deze manier kunt u met drievoudig geneste lussen eenvoudig coördinaten genereren in een driedimensionale ruimte.

Prestatie van geneste lussen

Geneste lussen zijn handig, maar de rekenkosten nemen snel toe naarmate de diepte van de lussen toeneemt. Bijvoorbeeld: als er n iteraties van de buitenste lus zijn en m iteraties van de binnenste lus, is het totale aantal iteraties n * m. Wanneer dit verder wordt genest, neemt de rekencapaciteit exponentieel toe, wat mogelijk invloed heeft op de programmavoorstelling.

Hieronder staan de rekenkundige complexiteiten bij het doorlopen van drie arrays.

 1const array1: number[] = [1, 2, 3];
 2const array2: number[] = [4, 5, 6];
 3const array3: number[] = [7, 8, 9];
 4
 5for (let i: number = 0; i < array1.length; i++) {
 6    for (let j: number = 0; j < array2.length; j++) {
 7        for (let k: number = 0; k < array3.length; k++) {
 8            console.log(`Combination: (${array1[i]}, ${array2[j]}, ${array3[k]})`);
 9        }
10    }
11}

In dit geval loopt de lus een aantal keren gelijk aan het product van de lengtes van.

Optimalisatie van geneste lussen

Bij het gebruik van geneste lussen kunt u de prestaties verbeteren door de volgende optimalisaties in overweging te nemen.

1. Introduceer vroege returns: Verlaat de lus vroegtijdig wanneer het doel is bereikt om onnodige iteraties te vermijden.
2. Cache-lusvariabelen: Cache van tevoren de waarden van variabelen die in de lus worden gebruikt (vooral lengtes en bereiken) om de rekenkosten elke keer te verminderen.
3. Wijzig datastructuren: Het herzien van de structuur van arrays en objecten kan effectief zijn bij het versnellen van specifieke repetitieve processen.

Conclusie

Geneste lussen zijn een krachtig hulpmiddel bij complexe gegevensverwerking en algoritmen. Echter, naarmate de luspdiepte en het aantal iteraties toenemen, kunnen prestatieproblemen optreden. Met geschikte optimalisaties en zorgvuldig ontwerp kunt u geneste lussen effectief benutten in TypeScript.

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

YouTube Video