Best Practices für for-Schleifen in TypeScript

Dieser Artikel erklärt die Best Practices für die Verwendung von for-Schleifen in TypeScript.

YouTube Video

Best Practices für for-Schleifen in TypeScript

for-Anweisungen sind eine grundlegende und leistungsstarke Syntax, um wiederholte Operationen auszuführen. In TypeScript ermöglicht die Nutzung der Typsicherheit sowie das Schreiben von Code mit Fokus auf Lesbarkeit und Wartbarkeit die Erstellung effizienter Programme mit weniger Fehlern.

Die richtige Schleifenart wählen

TypeScript bietet mehrere Schleifenkonstrukte, die jeweils für unterschiedliche Anwendungsfälle geeignet sind. Die Wahl der passenden Schleife ist entscheidend für die Codeklarheit und Performance.

Standard-for-Schleife

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

Die Standard-for-Schleife ist ideal, wenn Sie präzise Kontrolle über den Iterationsindex benötigen.

Best Practices

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

Beim Schreiben von for-Anweisungen können die folgenden Punkte helfen, sicheren und besser lesbaren Code zu schreiben.

• Verwenden Sie let für Indexvariablen
  • Die Verwendung von let anstelle von var begrenzt den Geltungsbereich auf den Block und verhindert unbeabsichtigtes Verhalten.
• Verwenden Sie Konstanten und beschreibende Variablennamen, um Schleifengrenzen klar zu definieren.
  • Das Vermeiden von magischen Zahlen und die Verwendung aussagekräftiger Variablennamen verbessern die Lesbarkeit.

for...of-Schleife

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

Die for...of-Schleife eignet sich zum Iterieren über iterierbare Objekte wie Arrays und Strings.

Best Practices

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

Beim Schreiben von for...of-Schleifen helfen die folgenden Punkte, sichereren Code zu schreiben.

• Verwenden Sie const für Schleifenvariablen
  • Wenn Werte innerhalb der Schleife nicht geändert werden, hilft die Verwendung von const, versehentliche Zuweisungen zu verhindern.

for...in-Schleife

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

Die for...in-Schleife iteriert über die aufzählbaren Eigenschaften eines Objekts.

Best Practices

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}

Beim Schreiben einer for...in-Schleife können Sie die folgenden Punkte berücksichtigen.

• Eigenschaften filtern
  • Wenn Sie geerbte Eigenschaften vermeiden möchten, können Sie hasOwnProperty verwenden.
• Verwenden Sie for...in nicht mit Arrays. Vermeiden Sie die Verwendung von for...in mit Arrays. Es kann über alle aufzählbaren Eigenschaften iterieren, einschließlich derer, die keine Array-Indizes sind.

forEach-Methode

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

Beim Iterieren über Arrays ist forEach prägnant und beseitigt die Notwendigkeit, Indizes zu verwalten.

Best Practices

Bei der Verwendung der forEach-Methode können Sie die folgenden Punkte berücksichtigen.

• Verwenden Sie Arrow-Funktionen
  • Verwenden Sie prägnante Arrow-Funktionen, um die Lesbarkeit zu verbessern.
• Unterbrechungen vermeiden
  • forEach unterstützt weder break noch continue. Verwenden Sie bei Bedarf for...of- oder for-Schleifen.

Typensicherheit und Fehlerprävention

Durch die Nutzung des TypeScript-Typsystems können Sie Laufzeitfehler während der Iteration vermeiden:.

Definieren Sie strenge Typen für Schleifenvariablen

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

Durch die explizite Angabe von Typen für Schleifenvariablen können Typinkonsistenzen frühzeitig erkannt werden.

Vermeiden Sie implizites any

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

Indem Sie noImplicitAny in tsconfig.json aktivieren, können Sie verhindern, dass Variablen ohne explizite Typen implizit dem Typ any zugewiesen werden.

Verwenden Sie bei Bedarf ReadonlyArray

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

Wenn Sie über ein Array iterieren, das nicht modifiziert werden sollte, können Sie ReadonlyArray verwenden.

Leistungsüberlegungen

Effizienz ist entscheidend für Schleifen, die große Datenmengen verarbeiten oder häufig ausgeführt werden:.

Wählen Sie die optimale Methode zur Implementierung einer Schleife.

Es gibt verschiedene Möglichkeiten, Schleifen zu implementieren, die sich in Lesbarkeit und Ausführungseffizienz unterscheiden.

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

Die Effizienz variiert je nach Ausführungsumgebung, aber beispielsweise kann der Unterschied bei einer Million Schleifenläufen recht deutlich werden. Wählen Sie die optimale Schleifenmethode unter Berücksichtigung der Wartbarkeit und Leistung.

Verwenden Sie native Iterationsmethoden

 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 wie map und filter können in einigen Fällen lesbarer sein.

Bevorzugen Sie for...of für bessere Lesbarkeit

Leistung sollte nur in begrenzten Fällen priorisiert werden; das Schreiben lesbaren Codes ist im Allgemeinen wichtiger. Zum Beispiel kann die Priorisierung von for...of die Lesbarkeit verbessern.

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

Best Practices

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

Durch die Priorisierung von for...of-Schleifen können Sie lesbareren und fehlerresistenteren Code schreiben. Wie in diesem Beispiel gezeigt, ist die Kombination von entries() mit for...of effektiv, wenn Sie auch Array-Indizes benötigen.

Häufige Fallstricke vermeiden

Ändern von Sammlungen während der 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);

Das Ändern eines Arrays während der Iteration kann zu unerwartetem Verhalten führen:. Verwenden Sie bei Bedarf eine Kopie.

Berücksichtigen Sie Sonderfälle

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

Dieser Code funktioniert einwandfrei, aber wenn Sie leere Arrays behandeln müssen, können Sie ihn wie folgt verbessern.

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}

Das Berücksichtigen von Sonderfällen kann helfen, Fehler im nachfolgenden Code zu vermeiden.

Fazit

Um die for-Anweisung in TypeScript zu beherrschen, ist es wichtig, verschiedene Schleifenkonstrukte zu verstehen, typensichere Praktiken einzuhalten und die Leistung zu optimieren. Diese bewährten Methoden helfen Ihnen, saubereren, zuverlässigeren und besser wartbaren Code zu schreiben.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video