Bedste praksis for for-løkker i TypeScript

Denne artikel forklarer bedste praksis for brug af for-løkker i TypeScript.

YouTube Video

Bedste praksis for for-løkker i TypeScript

for-udtryk er en grundlæggende og kraftfuld syntaks til at udføre gentagne operationer. I TypeScript gør det at udnytte typesikkerhed og skrive kode med fokus på læsbarhed og vedligeholdelse det muligt at skrive effektiv kode med færre fejl.

Vælg den rigtige løkketype

TypeScript tilbyder flere løkkekonstruktioner, der hver især er velegnede til forskellige anvendelser. At vælge den rigtige løkke er afgørende for kodeklarhed og ydeevne.

Standard for-løkke

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

Den standardiserede for-løkke er ideel, når du har brug for præcis kontrol over iterationsindekset.

Bedste praksis

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

Når du skriver for-udtryk, kan det at holde følgende punkter i tankerne hjælpe dig med at skrive mere sikker og læsbar kode.

• Brug let til indeksvariabler
  • Ved at bruge let i stedet for var begrænses omfanget til blokken, hvilket forhindrer utilsigtet adfærd.
• Brug konstanter og beskrivende variabelnavne for at gøre løkkegrænserne tydelige
  • Ved at undgå magiske tal og bruge meningsfulde variabelnavne forbedres læsbarheden.

for...of-løkke

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

for...of-løkke er velegnet til at iterere over iterbare objekter som arrays og strenge.

Bedste praksis

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

Når du skriver for...of-løkker, kan det at være opmærksom på følgende punkter hjælpe dig med at skrive mere sikker kode.

• Brug const til løkkevariabler
  • Hvis værdierne ikke ændres inden for løkken, hjælper brugen af const med at forhindre utilsigtet genindsættelse.

for...in-løkke

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

for...in-løkke itererer over de enumererbare egenskaber af et objekt.

Bedste praksis

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-løkke, kan du overveje følgende punkter.

• Filtrer egenskaber
  • Hvis du skal undgå nedarvede egenskaber, kan du bruge hasOwnProperty.
• Brug ikke for...in med arrays Undgå at bruge for...in med arrays. Det kan iterere over alle enumererbare egenskaber, inklusive dem der ikke er array-indekser.

forEach-metode

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

Ved iteration over arrays er forEach kortfattet og slipper for at håndtere indeks.

Bedste praksis

Ved brug af forEach-metoden kan du overveje følgende punkter.

• Brug pilfunktioner
  • Brug kortfattede pilfunktioner for at forbedre læsbarheden.
• Undgå afbrydelser
  • forEach understøtter ikke break eller continue. Brug for...of- eller for-loops, når det er nødvendigt:.

Typesikkerhed og fejlforebyggelse

Ved at udnytte TypeScripts typesystem kan du forhindre kørselsfejl under iteration:.

Definer strikse typer for loop-variabler

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

Ved eksplicit at angive typer for løkkevariabler kan du finde typekonflikter tidligt.

Undgå implicit any

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

Desuden kan du ved at aktivere noImplicitAny i tsconfig.json forhindre, at variabler uden eksplicitte typer implicit tildeles typen any.

Brug ReadonlyArray, når det er nødvendigt

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

Hvis du itererer over et array, der ikke bør ændres, kan du bruge ReadonlyArray.

Overvejelser om ydeevne

Effektivitet er afgørende for loops, der behandler store datasæt eller udføres hyppigt:.

Vælg den optimale metode til løkkeimplementering.

Der er forskellige måder at implementere løkker på, hver med forskelle i læsbarhed og udførelseseffektivitet.

 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 varierer afhængigt af udførelsesmiljøet, men for eksempel når en løkke køres en million gange, kan forskellen blive ret mærkbar. Vælg den optimale løkkemetode med hensyntagen til vedligeholdelse og ydeevne.

Brug native 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 og filter kan i nogle tilfælde være mere læsbare.

Foretræk for...of for bedre læsbarhed

Ydeevnen bør kun prioriteres i begrænsede tilfælde; det er generelt vigtigere at skrive læsbar kode. For eksempel kan prioritering af for...of forbedre læsbarheden.

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

Bedste praksis

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

Ved at prioritere for...of-løkker kan du skrive mere læsbar og fejlresistent kode. Som vist i dette eksempel er det effektivt at kombinere entries() med for...of, hvis du også har brug for array-indekser.

Undgå almindelige faldgruber

Ændring af samlinger 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);

Ændring af et array under iteration kan føre til uventet adfærd:. Brug en kopi, hvis det er nødvendigt.

Overvej randtilfælde

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

Denne kode fungerer fint, men hvis du skal håndtere tomme arrays, kan du forbedre den som følger.

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}

Overvejelse af randtilfælde kan hjælpe med at forhindre fejl i efterfølgende kode.

Konklusion

For at mestre for-sætningen i TypeScript er det vigtigt at forstå forskellige løkkestrukturer, overholde typesikre praksisser og optimere ydeevnen. Disse bedste fremgangsmåder hjælper dig med at skrive renere, mere pålidelig og mere vedligeholdelsesvenlig kode.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video