Best practices voor for-loops in TypeScript

Dit artikel legt de beste praktijken uit voor het gebruik van for-loops in TypeScript.

YouTube Video

Best practices voor for-loops in TypeScript

for-verklaringen zijn een fundamentele en krachtige syntaxis voor het uitvoeren van herhalende bewerkingen. In TypeScript kun je efficiënte code met minder fouten schrijven door gebruik te maken van typeveiligheid en code te schrijven met leesbaarheid en onderhoudbaarheid in gedachten.

Het kiezen van het juiste looptype

TypeScript biedt verschillende loopconstructies, elk geschikt voor verschillende gebruiksscenario's. Het kiezen van de juiste loop is cruciaal voor codehelderheid en prestaties.

Standaard for-loop

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

De standaard for-lus is ideaal wanneer je nauwkeurige controle over de iteratie-index nodig hebt.

Beste Praktijken

1const maxIterations = 10;
2for (let i = 0; i < maxIterations; i++) {
3    console.log(i);
4}

Bij het schrijven van for-verklaringen kan het helpen om aan de volgende punten te denken om veiliger en leesbaardere code te schrijven.

• Gebruik let voor indexvariabelen
  • Door let in plaats van var te gebruiken, wordt de scope beperkt tot het blok, waardoor ongewenst gedrag wordt voorkomen.
• Gebruik constanten en beschrijvende variabelenamen om lusgrenzen expliciet te maken.
  • Het vermijden van magische getallen en het gebruik van betekenisvolle variabelenamen verbetert de leesbaarheid.

for...of-loop

1const array = [1, 2, 3];
2for (let value of array) {
3    console.log(value);
4}

De for...of-lus is geschikt voor het itereren over iterabele objecten zoals arrays en strings.

Beste Praktijken

1const array = [1, 2, 3];
2for (const value of array) {
3    console.log(value);
4}

Bij het schrijven van for...of-lussen kan het letten op de volgende punten helpen om veiliger code te schrijven.

• Gebruik const voor lusvariabelen
  • Als waarden niet worden gewijzigd binnen de lus, helpt het gebruik van const om onbedoelde hertoewijzing te voorkomen.

for...in-loop

1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    console.log(`${key}: ${obj[key]}`);
4}

De for...in-lus doorloopt de enumerable eigenschappen van een object.

Beste Praktijken

1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    if (obj.hasOwnProperty(key)) {
4        console.log(`${key}: ${obj[key]}`);
5    }
6}

Bij het schrijven van een for...in-lus kun je de volgende punten overwegen.

• Filter eigenschappen
  • Als je geërfde eigenschappen wilt vermijden, kun je hasOwnProperty gebruiken.
• Gebruik for...in niet met arrays. Vermijd het gebruik van for...in bij arrays. Het kan alle opsombare eigenschappen doorlopen, inclusief eigenschappen die geen array-indexen zijn.

forEach-methode

1const array = [1, 2, 3];
2array.forEach((value, index) => {
3    console.log(`Index: ${index}, Value: ${value}`);
4});

Bij het itereren over arrays is forEach beknopt en elimineert het de noodzaak om indexen te beheren.

Beste Praktijken

Bij het gebruik van de forEach-methode kun je de volgende punten overwegen.

• Gebruik pijl-functies
  • Gebruik beknopte pijl-functies om de leesbaarheid te verbeteren.
• Vermijd onderbrekingen
  • forEach ondersteunt geen break of continue. Gebruik for...of of for-lussen wanneer nodig:.

Typeveiligheid en Foutpreventie

Door gebruik te maken van TypeScript's typesysteem kunt u runtimefouten tijdens iteratie voorkomen:.

Definieer Strikte Types voor Lusvariabelen

1const items = [1, 2, 3];
2items.forEach(item => {
3    console.log(item * 2);
4});

1const items: number[] = [1, 2, 3];
2items.forEach((item: number) => {
3    console.log(item * 2);
4});

Door expliciet typen voor lusvariabelen op te geven, kun je typefouten vroeg detecteren.

Vermijd Impliciete any

1{
2  "compilerOptions": {
3    "noImplicitAny": true
4  }
5}

Daarnaast kun je door noImplicitAny in te schakelen in tsconfig.json voorkomen dat variabelen zonder expliciete typen impliciet het any type toegewezen krijgen.

Gebruik ReadonlyArray indien nodig

1const numbers: ReadonlyArray<number> = [1, 2, 3];
2for (const value of numbers) {
3    console.log(value);
4}

Als je een array doorloopt die niet mag worden gewijzigd, kun je gebruik maken van ReadonlyArray.

Prestatieoverwegingen

Efficiëntie is cruciaal voor lussen die grote datasets verwerken of vaak worden uitgevoerd:.

Kies de optimale implementatiemethode voor lussen.

Er zijn verschillende manieren om lussen te implementeren, elk met verschillen in leesbaarheid en uitvoerings efficiëntie.

 1// Prepare input data (an array from 1 to 1000000)
 2const input: number[] = Array.from({ length: 1000000 }, (_, i) => i + 1);
 3
 4// --- for ---
 5console.time('for loop');
 6const squaresFor: number[] = [];
 7for (let i = 0; i < input.length; i++) {
 8    squaresFor.push(input[i] * input[i]);
 9}
10console.timeEnd('for loop');
11
12// --- while ---
13console.time('while loop');
14const squaresWhile: number[] = [];
15let i: number = 0;
16while (i < input.length) {
17    squaresWhile.push(input[i] * input[i]);
18    i++;
19}
20console.timeEnd('while loop');
21
22// --- for-of ---
23console.time('for-of loop');
24const squaresForOf: number[] = [];
25for (const num of input) {
26    squaresForOf.push(num * num);
27}
28console.timeEnd('for-of loop');
29
30// --- forEach ---
31console.time('forEach loop');
32const squaresForEach: number[] = [];
33input.forEach((num: number): void => {
34    squaresForEach.push(num * num);
35});
36console.timeEnd('forEach loop');
37
38// --- map ---
39console.time('map');
40const squaresMap: number[] = input.map((value: number): number => value * value);
41console.timeEnd('map');

De efficiëntie varieert afhankelijk van de uitvoeringsomgeving, maar bijvoorbeeld bij het een miljoen keer uitvoeren van een lus kan het verschil behoorlijk merkbaar worden. Kies de optimale lusmethode met oog op onderhoudbaarheid en prestaties.

Gebruik Natuurlijke Iteratiemethoden

 1const squares = [1, 2, 3].map(value => value * value);
 2console.log(squares);
 3
 4const numbers = [1, 2, 3, 4, 5, 6];
 5const evenNumbers = numbers.filter(value => value % 2 === 0);
 6console.log(evenNumbers); // [2, 4, 6]
 7
 8const squaredEvens = numbers
 9    .filter(value => value % 2 === 0) // Keep only even numbers
10    .map(value => value * value);     // Square the remaining values
11
12console.log(squaredEvens); // [4, 16, 36]

Methoden zoals map en filter kunnen in sommige gevallen leesbaarder zijn.

Geef de voorkeur aan for...of voor Leesbaarheid

Prestaties zouden alleen in beperkte gevallen prioriteit moeten krijgen; het schrijven van leesbare code is over het algemeen belangrijker. Bijvoorbeeld, het prioriteren van for...of kan de leesbaarheid verbeteren.

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

Beste Praktijken

1const fruits = ["apple", "banana", "cherry"];
2
3for (const [index, fruit] of fruits.entries()) {
4    console.log(`${index}: ${fruit}`);
5}

Door de voorkeur te geven aan for...of-lussen, kun je leesbaardere en foutbestendigere code schrijven. Zoals in dit voorbeeld getoond, is het combineren van entries() met for...of effectief als je ook array-indexen nodig hebt.

Veelvoorkomende Valkuilen Vermijden

Collecties Wijzigen Tijdens Iteratie

1const array = [1, 2, 3];
2for (const value of [...array]) {
3    if (value === 2) {
4        array.push(4); // Avoid this!
5    }
6}
7console.log(array);

Het wijzigen van een array tijdens iteratie kan tot onverwacht gedrag leiden:. Gebruik indien nodig een kopie.

Houd rekening met randgevallen

1const array: number[] = [];
2for (const value of array) {
3    console.log(value); // No output, but no errors
4}

Deze code werkt prima, maar als je lege arrays moet verwerken, kun je het als volgt verbeteren.

1const array: number[] = [];
2if (array.length === 0) {
3    console.log("The array is empty.");
4} else {
5    for (const value of array) {
6        console.log(value);
7    }
8}

Rekening houden met randgevallen kan helpen fouten in volgende code te voorkomen.

Conclusie

Om de for-instructie in TypeScript te beheersen, is het essentieel om verschillende lusconstructies te begrijpen, veilige typepraktijken aan te houden en prestaties te optimaliseren. Deze beste praktijken helpen je om schonere, betrouwbaardere en beter onderhoudbare code te schrijven.

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

YouTube Video