Najlepsze praktyki dla pętli for w TypeScript

Ten artykuł wyjaśnia najlepsze praktyki dotyczące używania pętli for w TypeScript.

YouTube Video

Najlepsze praktyki dla pętli for w TypeScript

Instrukcje for to podstawowa i potężna składnia służąca do wykonywania operacji powtarzalnych. W TypeScript korzystanie z kontroli typów i pisanie kodu z myślą o czytelności i utrzymaniu pozwala tworzyć wydajny kod z mniejszą liczbą błędów.

Wybór odpowiedniego typu pętli

TypeScript oferuje kilka konstrukcji pętli, z których każda nadaje się do różnych zastosowań. Wybór odpowiedniej pętli jest kluczowy dla przejrzystości kodu i wydajności.

Standardowa pętla for

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

Standardowa pętla for jest idealna, gdy potrzebujesz precyzyjnej kontroli nad indeksem iteracji.

Najlepsze praktyki

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

Pisząc instrukcje for, pamiętanie o poniższych kwestiach pomoże pisać bezpieczniejszy i bardziej czytelny kod.

• Używaj let dla zmiennych indeksowych
  • Używanie let zamiast var ogranicza zakres do bloku, zapobiegając niezamierzonemu zachowaniu.
• Używaj stałych oraz opisowych nazw zmiennych, aby jasno określić granice pętli.
  • Unikanie magicznych liczb oraz stosowanie znaczących nazw zmiennych zwiększa czytelność.

Pętla for...of

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

Pętla for...of nadaje się do iteracji po iterowalnych obiektach, takich jak tablice i ciągi znaków.

Najlepsze praktyki

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

Pisząc pętle for...of, zwrócenie uwagi na poniższe wskazówki może pomóc w pisaniu bezpieczniejszego kodu.

• Używaj const dla zmiennych pętli
  • Jeśli wartości w pętli nie są modyfikowane, używanie const zapobiega przypadkowemu przypisaniu nowej wartości.

Pętla for...in

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

Pętla for...in iteruje po enumerowalnych właściwościach obiektu.

Najlepsze praktyki

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}

Pisząc pętlę for...in, możesz rozważyć następujące kwestie.

• Filtrowanie właściwości
  • Jeśli chcesz uniknąć dziedziczonych właściwości, możesz użyć hasOwnProperty.
• Nie używaj for...in z tablicami. Unikaj używania for...in z tablicami. Może iterować po wszystkich właściwościach wyliczalnych, w tym takich, które nie są indeksami tablicy.

Metoda forEach

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

Podczas iteracji po tablicach forEach jest zwięzłe i eliminuje konieczność zarządzania indeksami.

Najlepsze praktyki

Korzystając z metody forEach, możesz rozważyć następujące kwestie.

• Używaj funkcji strzałkowych
  • Używaj zwięzłych funkcji strzałkowych, aby poprawić czytelność.
• Unikaj przerwań
  • forEach nie obsługuje break ani continue. Używaj pętli for...of lub for, gdy jest to potrzebne:.

Bezpieczeństwo typów i zapobieganie błędom

Wykorzystując system typów TypeScript, można zapobiec błędom w czasie wykonywania podczas iteracji:.

Określ ścisłe typy dla zmiennych w pętli

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

Wyraźne określanie typów zmiennych w pętli pozwala na wczesne wykrywanie niezgodności typów.

Unikaj niejawnego any

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

Włączając opcję noImplicitAny w pliku tsconfig.json, możesz zapobiec przypisywaniu zmiennym bez jawnie określonych typów domyślnego typu any.

Używaj ReadonlyArray w razie potrzeby

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

Jeśli iterujesz po tablicy, która nie powinna być modyfikowana, możesz użyć ReadonlyArray.

Uwagi dotyczące wydajności

Wydajność jest kluczowa dla pętli przetwarzających duże zestawy danych lub często wykonywanych pętli:.

Wybierz optymalną metodę implementacji pętli.

Istnieje wiele sposobów implementacji pętli, z różnicami w czytelności i wydajności wykonania.

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

Wydajność różni się w zależności od środowiska wykonawczego, ale na przykład przy uruchamianiu pętli milion razy różnica może być dość zauważalna. Wybierz optymalną metodę pętli, mając na uwadze łatwość utrzymania i wydajność.

Używaj natywnych metod iteracyjnych

 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]

Metody takie jak map i filter mogą być bardziej czytelne w niektórych przypadkach.

Preferuj for...of dla lepszej czytelności

Wydajność powinna być priorytetem tylko w ograniczonych przypadkach; zwykle ważniejsze jest pisanie czytelnego kodu. Na przykład priorytetowe traktowanie for...of może poprawić czytelność.

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

Najlepsze praktyki

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

Priorytetowe traktowanie pętli for...of pozwala pisać kod bardziej czytelny i odporny na błędy. Jak pokazano w tym przykładzie, jeśli potrzebujesz również indeksów tablicy, skuteczne jest połączenie entries() z for...of.

Unikanie powszechnych pułapek

Modyfikowanie kolekcji podczas iteracji

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

Modyfikowanie tablicy podczas iteracji może prowadzić do nieoczekiwanego zachowania:. W razie potrzeby użyj kopii.

Rozważ przypadki brzegowe

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

Ten kod działa poprawnie, ale jeśli musisz obsłużyć puste tablice, możesz go poprawić w następujący sposób.

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}

Rozważenie przypadków brzegowych może pomóc w zapobieganiu błędom w dalszym kodzie.

Wnioski

Aby opanować instrukcję for w TypeScript, kluczowe jest zrozumienie różnych konstrukcji pętli, stosowanie bezpiecznych typów i optymalizacja wydajności. Te najlepsze praktyki pomagają pisać czystszy, bardziej niezawodny i łatwiejszy w utrzymaniu kod.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video