Beste praksis for for-løkker i TypeScript

Denne artikkelen forklarer beste praksis for bruk av for-løkker i TypeScript.

YouTube Video

Beste praksis for for-løkker i TypeScript

for-setninger er en grunnleggende og kraftig syntaks for å utføre repeterende operasjoner. I TypeScript, ved å utnytte typesikkerhet og skrive kode med fokus på lesbarhet og vedlikeholdbarhet, kan du skrive effektiv kode med færre feil.

Valg av riktig løkketype

TypeScript tilbyr flere løkkekonstruksjoner, hver egnet for ulike bruksområder. Valg av riktig løkke er avgjørende for kodeforståelse og ytelse.

Standard for-løkke

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

Den standard for-løkka er ideell når du trenger presis kontroll over iterasjonsindeksen.

Beste praksis

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

Når du skriver for-setninger, kan det å huske på følgende punkter hjelpe deg med å skrive tryggere og mer lesbar kode.

• Bruk let for indeksvariabler
  • Å bruke let i stedet for var begrenser omfanget til blokken, og forhindrer utilsiktet oppførsel.
• Bruk konstanter og beskrivende variabelnavn for å gjøre løkkegrenser eksplisitte
  • Å unngå magiske tall og bruke meningsfulle variabelnavn forbedrer lesbarheten.

for...of-løkke

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

for...of-løkken er egnet for iterering over itererbare objekter som arrayer og strenger.

Beste 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 å være oppmerksom på følgende punkter hjelpe deg med å skrive tryggere kode.

• Bruk const for løkkevariabler
  • Hvis verdier ikke endres innenfor løkken, kan bruk av const bidra til å forhindre utilsiktet gjenoppgave.

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økken itererer over de enumorerbare egenskapene til et objekt.

Beste 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 vurdere følgende punkter.

• Filtrer egenskaper
  • Hvis du trenger å unngå arvete egenskaper, kan du bruke hasOwnProperty.
• Ikke bruk for...in med matriser Unngå å bruke for...in med arrays. Den kan iterere over alle enumrerbare egenskaper, inkludert de som ikke er matriseindekser.

forEach-metode

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

Når du itererer over arrayer, er forEach kortfattet og eliminerer behovet for å håndtere indekser.

Beste praksis

Når du bruker forEach-metoden, kan du vurdere følgende punkter.

• Bruk pilfunksjoner
  • Bruk korte pilfunksjoner for å forbedre lesbarheten.
• Unngå avbrytelser
  • forEach støtter ikke break eller continue. Bruk for...of- eller for-løkker når det er nødvendig:.

Type-sikkerhet og Feilforebygging

Ved å utnytte TypeScripts typesystem kan du forhindre kjøretidsfeil under iterasjon:.

Definer strenge typer for løkkevariabler

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 å eksplisitt spesifisere typer for løkkevariabler, kan du oppdage typemismatcher tidlig.

Unngå implisitt any

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

Ved også å aktivere noImplicitAny i tsconfig.json, kan du hindre at variabler uten eksplisitte typer implisitt blir tildelt typen any.

Bruk ReadonlyArray når det er nødvendig

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

Hvis du itererer over en array som ikke bør endres, kan du bruke ReadonlyArray.

Ytelseshensyn

Effektivitet er avgjørende for løkker som behandler store datasett eller kjøres ofte:.

Velg den optimale implementeringsmetoden for løkken.

Det finnes ulike måter å implementere løkker på, hver med forskjeller i lesbarhet og utfø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 avhengig av kjøremiljøet, men for eksempel, når du kjører en løkke en million ganger, kan forskjellen bli ganske merkbar. Velg den optimale løkkemetoden med tanke på vedlikeholdbarhet og ytelse.

Bruk native iterasjonsmetoder

 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 være mer lesbare i noen tilfeller.

Foretrekk for...of for lesbarhet

Ytelse bør prioriteres kun i begrensede tilfeller; det å skrive lesbar kode er generelt viktigere. For eksempel kan det å prioritere for...of forbedre lesbarheten.

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

Beste praksis

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

Ved å prioritere for...of-løkker, kan du skrive mer lesbar og feilresistent kode. Som vist i dette eksempelet, hvis du også trenger matriseindekser, er det effektivt å kombinere entries() med for...of.

Unngå vanlige fallgruver

Modifisering av samlinger under iterasjon

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

Modifisering av en array under iterasjon kan føre til uventet oppførsel:. Bruk en kopi om nødvendig.

Vurder spesielle tilfeller

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

Denne koden fungerer fint, men hvis du trenger å 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}

Å vurdere spesielle tilfeller kan bidra til å forhindre feil i påfølgende kode.

Konklusjon

For å mestre for-setningen i TypeScript er det viktig å forstå ulike løkkekonstruksjoner, følge typesikre praksiser og optimalisere ytelsen. Disse beste praksisene hjelper deg med å skrive renere, mer pålitelig og mer vedlikeholdbart kode.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video