Riktlinjer för bästa praxis vid användning av for-loopar i TypeScript

Den här artikeln förklarar riktlinjer för bästa praxis vid användning av for-loopar i TypeScript.

YouTube Video

Riktlinjer för bästa praxis vid användning av for-loopar i TypeScript

for-satser är en grundläggande och kraftfull syntax för att utföra repetitiva operationer. I TypeScript möjliggör utnyttjandet av typkontroll och skrivande av kod med läsbarhet och underhållbarhet i åtanke att du kan skriva effektiv kod med färre fel.

Att välja rätt looptyp

TypeScript erbjuder flera loopkonstruktioner som passar för olika användningsområden. Att välja en lämplig loop är avgörande för kodens tydlighet och prestanda.

Standard for-loop

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

Den standardmässiga for-loopen är idealisk när du behöver exakt kontroll över iterationsindexet.

Bästa praxis

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

När du skriver for-satser kan du genom att tänka på följande punkter skriva säkrare och mer läsbar kod.

• Använd let för indexvariabler
  • Att använda let istället för var begränsar räckvidden till blocket och förhindrar oavsiktligt beteende.
• Använd konstanter och beskrivande variabelnamn för att göra loopgränser explicita
  • Att undvika magiska nummer och använda meningsfulla variabelnamn förbättrar läsbarheten.

for...of-loop

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

for...of-loopen är lämplig för att iterera över itererbara objekt som arrayer och strängar.

Bästa praxis

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

När du skriver for...of-loopar kan du genom att tänka på följande punkter skriva säkrare kod.

• Använd const för loopvariabler
  • Om värden inte ändras inom loopen hjälper användningen av const till att förhindra oavsiktlig återtilldelning.

for...in-loop

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

for...in-loopen itererar över egenskapliga properties hos ett objekt.

Bästa praxis

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}

När du skriver en for...in-loop kan du tänka på följande punkter.

• Filtrera egenskaper
  • Om du behöver undvika ärvda egenskaper kan du använda hasOwnProperty.
• Använd inte for...in med arrayer Undvik att använda for...in med arrayer. Det kan iterera över alla uppräkningsbara egenskaper, inklusive de som inte är arrayindex.

forEach-metod

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

När du itererar över arrayer är forEach kortfattad och eliminerar behovet av att hantera index.

Bästa praxis

När du använder metoden forEach kan du tänka på följande punkter.

• Använd pilfunktioner
  • Använd koncisa pilfunktioner för att förbättra läsbarheten.
• Undvik avbrott
  • forEach stöder inte break eller continue. Använd for...of eller for-loopar när det behövs:.

Typsäkerhet och felförebyggande

Genom att använda TypeScripts typsystem kan du förhindra körningsfel under iteration:.

Definiera strikta typer för loopvariabler

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});

Genom att explicit specificera typer för loopvariabler kan du upptäcka typkonflikter tidigt.

Undvik implicit any

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

Genom att aktivera noImplicitAny i tsconfig.json kan du dessutom förhindra att variabler utan explicita typer tilldelas typen any implicit.

Använd ReadonlyArray när det behövs

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

Om du itererar över en array som inte bör modifieras kan du använda ReadonlyArray.

Prestandaöverväganden

Effektivitet är avgörande för loopar som bearbetar stora datamängder eller körs ofta:.

Välj den optimala metoden för loop-implementering.

Det finns olika sätt att implementera loopar, alla med skillnader i läsbarhet och exekveringseffektivitet.

 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');

Effektiviteten varierar beroende på exekveringsmiljön, men till exempel, när man kör en loop en miljon gånger, kan skillnaden bli ganska märkbar. Välj den optimala loopmetoden med hänsyn till underhåll och prestanda.

Använd inbyggda iterationsmetoder

 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]

Metoder som map och filter kan i vissa fall vara mer läsbara.

Föredra for...of för läsbarhet

Prestanda bör prioriteras endast i begränsade fall; att skriva läsbar kod är generellt sett viktigare. Till exempel kan prioritering av for...of förbättra läsbarheten.

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

Bästa praxis

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

Genom att prioritera for...of-loopar kan du skriva mer lättläst och felfri kod. Som visas i detta exempel, om du också behöver arrayindex, är det effektivt att kombinera entries() med for...of.

Undvik vanliga fallgropar

Ändra samlingar under iteration

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);

Att ändra en array under iteration kan leda till oväntat beteende:. Använd en kopia om nödvändigt.

Tänk på kantfall

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

Den här koden fungerar bra, men om du behöver hantera tomma arrayer kan du förbättra den på följande sätt.

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}

Att överväga kantfall kan hjälpa till att förhindra fel i efterföljande kod.

Slutsats

För att bemästra for-satsen i TypeScript är det viktigt att förstå olika loopstrukturer, följa typ-säkra praxis och optimera prestanda. Dessa bästa praxis hjälper dig att skriva renare, mer pålitlig och mer underhållbar kod.

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