Best Practices für Iterationen in JavaScript

Dieser Artikel erklärt die Best Practices für Iterationen in JavaScript.

YouTube Video

Best Practices für Iterationen in JavaScript

In JavaScript ist es üblich, for-Schleifen für Iterationen zu verwenden. Hier geben wir eine detaillierte Erklärung der Best Practices für die Verwendung von for-Schleifen, um effizienten und lesbaren Code zu schreiben.

Wählen Sie die richtige Schleifenstruktur

JavaScript bietet mehrere Schleifenstrukturen, die jeweils für unterschiedliche Zwecke geeignet sind.

 1// Example of a for loop
 2for (let i = 0; i < 5; i++) {
 3    console.log(i);
 4}
 5
 6// Example of a for...of loop
 7const array = [10, 20, 30];
 8for (const value of array) {
 9    console.log(value);
10}
11
12// Example of a for...in loop
13const obj = { a: 1, b: 2, c: 3 };
14for (const key in obj) {
15    console.log(`${key}: ${obj[key]}`);
16}
17
18// Example of a while loop
19let count = 0;
20while (count < 5) {
21    console.log(count);
22    count++;
23}

• for-Anweisung ist geeignet, wenn die Anzahl der Iterationen vorbestimmt ist.
• for...of-Anweisung ist geeignet, um Arrays und iterierbare Objekte prägnant zu verarbeiten.
• for...in-Anweisung wird verwendet, um über die Eigenschaften eines Objekts zu iterieren. Jedoch ist sie nicht für Arrays geeignet.
• while-Anweisung und do...while-Anweisung werden verwendet, um Schleifen basierend auf Bedingungen zu steuern.

Verwendung der forEach-Methode und der for...of-Anweisung

Beim Durchlaufen eines Arrays ist es üblich, eine for-Anweisung zu verwenden, um auf den Index zuzugreifen, aber die forEach-Methode oder die for...of-Anweisung können lesbarer sein.

 1// Using a standard for loop
 2const array = ["apple", "banana", "cherry"];
 3for (let i = 0; i < array.length; i++) {
 4    console.log(array[i]);
 5}
 6
 7// Using forEach
 8array.forEach(item => console.log(item));
 9
10// Using for...of
11for (const item of array) {
12    console.log(item);
13}

• for-Anweisung ermöglicht explizites Indexmanagement während der Iteration.
• forEach-Methode verwendet eine Callback-Funktion, um jedes Element prägnant zu verarbeiten.
• for...of-Anweisung ist sehr gut lesbar und ermöglicht direkten Zugriff auf jedes Element in einem Array.

Optimieren Sie Schleifenbedingungen

Da die Schleifenbedingung wiederholt ausgewertet wird, können unnötige Berechnungen vermieden werden, um die Leistung zu verbessern.

 1const names = ["Alice", "Bob", "Charlie"];
 2const scores = [85, 92, 78];
 3
 4// Inefficient example
 5for (let i = 0; i < Math.min(names.length, scores.length); i++) {
 6    console.log(`${names[i]} scored ${scores[i]}`);
 7}
 8
 9// Efficient example
10for (let i = 0, len = Math.min(names.length, scores.length); i < len; i++) {
11    console.log(`${names[i]} scored ${scores[i]}`);
12}

• Wie in diesem Beispiel gezeigt, ermöglicht das Speichern des Berechnungsergebnisses in einer Variablen im Voraus eine effizientere Schleifenausführung.

 1const scores = [85, 92, 78];
 2let sum = 0;
 3let sum2 = 0;
 4
 5// Inefficient example
 6for (let i = 0; i < scores.length; i++) {
 7    sum += scores[i];
 8}
 9console.log(`Total score : ${sum}`);
10
11// Efficient example
12for (let i = scores.length - 1; i >= 0; i--) {
13    sum2 += scores[i];
14}
15console.log(`Total score : ${sum2}`);

• Wie in diesem Beispiel gezeigt, kann das Umkehren der Bedingung manchmal effizienter sein.

Optimierung der Schleifenverarbeitung

Da die Schleifenverarbeitung wiederholt ausgeführt wird, kann das Vermeiden unnötiger Berechnungen die Leistung verbessern.

 1const array = ["apple", "banana", "cherry"];
 2
 3// Inefficient example
 4for (let i = 0; i < 100; i++) {
 5    const element = document.querySelector("#myElement");
 6    element.textContent = `Count: ${i}`;
 7}
 8
 9// Efficient example
10const element = document.querySelector("#myElement");
11for (let i = 0; i < 100; i++) {
12    element.textContent = `Count: ${i}`;
13}

• In diesem Beispiel werden unnötige Wiederholungsberechnungen vermieden, indem die Methode querySelector außerhalb der Schleife platziert wird.

Achten Sie auf den Geltungsbereich (Scope)

Verwenden Sie let oder const, um sicherzustellen, dass Variablen innerhalb der Schleife den richtigen Geltungsbereich haben. Da var nur auf den Funktionsbereich beschränkt ist, kann dies zu unerwartetem Verhalten führen.

 1// Using let
 2for (let i = 0; i < 3; i++) {
 3    console.log(i);
 4}
 5
 6// Potential issue with var
 7for (var i = 0; i < 3; i++) {
 8    setTimeout(() => console.log(i), 1000); // 3, 3, 3
 9}
10
11// Using let to avoid the issue
12for (let i = 0; i < 3; i++) {
13    setTimeout(() => console.log(i), 1000); // 0, 1, 2
14}

• var hat Funktionsscope, daher ist nach der Schleife der Wert von i 3, und alle durch setTimeout ausgeführten Funktionen geben 3 aus.
• Beim Verwenden von let bezieht sich das i innerhalb der setTimeout-Callback-Funktion auf einen neuen Wert für jede Schleifeniteration, sodass wie erwartet 0, 1, 2 ausgegeben werden.

Verbessern Sie die Lesbarkeit durch frühzeitige Abbrüche

Um die Schleifenverarbeitung zu vereinfachen, verwenden Sie break und continue angemessen, um die Lesbarkeit zu verbessern.

 1// Example using break
 2for (let i = 0; i < 10; i++) {
 3    if (i === 5) {
 4        break; // Exit the loop
 5    }
 6    console.log(i);
 7}
 8
 9// Example using continue
10for (let i = 0; i < 10; i++) {
11    if (i % 2 === 0) {
12        continue; // Skip to the next iteration
13    }
14    console.log(i);
15}

• Mit break können Sie die Schleifenverarbeitung vorzeitig beenden, wobei alle folgenden Iterationen übersprungen werden.
• Mit continue können Sie den aktuellen Schleifendurchlauf überspringen und zur nächsten Iteration übergehen.

Vermeiden Sie tiefes Schachteln

Tiefes Schachteln macht den Code schwerer lesbar. Streben Sie daher an, Schachtelungen flach zu halten, indem Sie frühzeitige Rückgaben verwenden oder Funktionen aufteilen.

 1// Deeply nested example
 2for (let i = 0; i < 5; i++) {
 3    for (let j = 0; j < 5; j++) {
 4        if (i + j > 5) {
 5            console.log(i, j);
 6        }
 7    }
 8}
 9
10// Improved using function decomposition
11function processPairs(i) {
12    for (let j = 0; j < 5; j++) {
13        if (i + j > 5) {
14            console.log(i, j);
15        }
16    }
17}
18
19for (let i = 0; i < 5; i++) {
20    processPairs(i);
21}

• In diesem Beispiel werden Funktionen verwendet, um Verschachtelungen zu reduzieren.

Beachten Sie die Fehlerbehandlung

Wenn die Möglichkeit von Fehlern innerhalb der Schleife besteht, implementieren Sie eine geeignete Fehlerbehandlung.

 1const data = ["123", "abc", "456", "xyz"];
 2
 3// Without Error Handling
 4for (const item of data) {
 5    const result = parseInt(item);
 6    console.log(`Parsed value: ${result}`);
 7}
 8
 9// With Error Handling
10for (const item of data) {
11    try {
12        const result = parseInt(item);
13        if (isNaN(result)) {
14            throw new Error(`Invalid number: ${item}`);
15        }
16        console.log(`Parsed value: ${result}`);
17    } catch (error) {
18        console.error(`Error processing item: ${item}. ${error.message}`);
19    }
20}

• In diesem Beispiel wird Fehlerbehandlung durchgeführt, um ungültige Daten zu verarbeiten, Probleme zu erkennen und zu melden.

Wichtige Punkte bei der asynchronen Verarbeitung

Bei der Verarbeitung von asynchronen Vorgängen in Schleifen kann die Verwendung von async/await zu prägnantem und intuitivem Code führen.

 1const urls = ["https://example.com/1", "https://example.com/2"];
 2
 3// Proper handling of asynchronous operations
 4async function fetchUrls() {
 5    for (const url of urls) {
 6        const response = await fetch(url);
 7        const data = await response.json();
 8        console.log(data);
 9    }
10}
11
12fetchUrls();

• Dieser Code ruft asynchron URLs aus dem urls-Array nacheinander ab und verarbeitet die Ergebnisse im JSON-Format. Die Verwendung von async/await vereinfacht asynchrone Operationen, indem Daten für jede URL sequenziell abgerufen und auf der Konsole ausgegeben werden.

Verstehen Sie den Unterschied zwischen der for...of-Anweisung und forEach() bei der asynchronen Verarbeitung.

 1async function asyncTask(num) {
 2    return new Promise(resolve => {
 3        setTimeout(() => {
 4            console.log(`Task ${num} done`);
 5            resolve();
 6        }, 100);
 7    });
 8}
 9
10async function runWithForOf() {
11    console.log("Start for...of");
12    for (const num of [1, 2, 3]) {
13        await asyncTask(num);
14    }
15    console.log("End for...of");
16}
17
18async function runWithForEach() {
19    console.log("Start forEach");
20    [1, 2, 3].forEach(async num => {
21        await asyncTask(num);
22    });
23    console.log("End forEach");
24}
25
26async function executeExamples() {
27    await runWithForOf();
28    await runWithForEach();
29}
30
31executeExamples();

• Bei der Handhabung von asynchroner Verarbeitung in Schleifen beachten Sie die Verhaltensunterschiede, wie in diesem Beispiel zwischen der Verwendung von for...of mit async/await und forEach() gezeigt.

• Mit for...of wird der Code sequenziell ausgeführt und wartet bei jedem await innerhalb der Schleife, bevor er zur nächsten Iteration fortfährt. Im Gegensatz dazu führt forEach() die Verarbeitung parallel aus.

Fazit

Die for-Anweisung in JavaScript ist ein einfaches, aber leistungsstarkes Werkzeug. Durch die Anwendung der hier vorgestellten Best Practices können Sie effizienten und gut lesbaren Code schreiben. Achten Sie auf die Auswahl geeigneter Schleifenstrukturen, das Scope-Management, die Fehlerbehandlung und streben Sie leicht wartbaren Code an.

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