Wiederholungsverarbeitung in JavaScript

In diesem Artikel erklären wir die Wiederholungsverarbeitung in JavaScript.

YouTube Video

Die for-Anweisung in JavaScript

Grundlegende Syntax

1for (initialization; condition; update) {
2  // Code to repeat
3}

Die for-Anweisung in JavaScript ist eine Syntax zur Durchführung von Iterationen. Sie führt einen bestimmten Codeblock solange wiederholt aus, wie eine bestimmte Bedingung erfüllt ist. Durch die Verwendung der for-Anweisung kann derselbe Prozess effizient mehrfach ausgeführt werden.

• Initialisierung (initialization): Der Teil, der nur einmal vor dem Start der Schleife ausgeführt wird. Initialisieren Sie Variablen wie den Schleifenzähler.
• Bedingung (condition): Die Bedingung, die bestimmt, ob die Schleife fortgesetzt wird. Wenn true, wird die Schleife fortgesetzt; wenn false, endet sie.
• Aktualisierung (update): Wird am Ende jeder Schleife ausgeführt, um den Schleifenzähler zu aktualisieren.

Beispiel

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

In diesem Fall beginnt i bei 0, und die Schleife läuft, solange i < 5 true ist. i++ erhöht i bei jeder Iteration der Schleife um 1. Als Ergebnis werden die Zahlen von 0 bis 4 angezeigt.

Gültigkeitsbereich des Schleifenzählers

Deklarieren oder initialisieren Sie Variablen im Initialisierungsteil der for-Anweisung. Hier deklarierte Variablen sind nur innerhalb der Schleife gültig.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Wie in diesem Beispiel gezeigt, führt das Verweisen auf eine Variable außerhalb der for-Anweisung zu einem Fehler.

Endlosschleife

Wenn eine Bedingung gesetzt wird, die die Schleife nicht beendet, entsteht eine Endlosschleife. Dies könnte den Browser oder das System belasten, daher ist Vorsicht geboten.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Arrays und die for-Anweisung

Es ist üblich, die for-Anweisung zusammen mit Arrays zu verwenden. Es ist praktisch, jedes Element eines Arrays zu verarbeiten.

Beispiel

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

Auf diese Weise können Sie jedes Element eines Arrays mit Indizes verarbeiten.

Andere Schleifenkonstrukte

for...of-Anweisung

Die for...of-Anweisung wird für iterierbare Objekte wie Arrays und Strings verwendet.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Dies ermöglicht es Ihnen, jedes Element ohne die Verwendung von Indizes zu verarbeiten.

for...in-Anweisung

Die for...in-Anweisung wird verwendet, um über die Eigenschaften eines Objekts zu iterieren.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

Auf diese Weise können Sie Operationen für jedes Element mit den Schlüsseln durchführen.

Zusammenfassung

• Die for-Anweisung ist ein Schleifenkonstrukt mit drei Teilen: Initialisierung, Bedingung und Aktualisierung.
• Sie können das Verhalten von Schleifen mit break oder continue steuern.
• In Kombination mit Arrays oder Objekten können Elemente oder Eigenschaften effizient verarbeitet werden.

Die while-Anweisung in JavaScript

Grundlegende Syntax

1while (condition) {
2    // Code that repeats while the condition is true
3}

Die while-Anweisung in JavaScript ist eine Schleifenstruktur, die wiederholte Operationen ausführt, solange die angegebene Bedingung true ist. Ähnlich wie bei der for-Anweisung gibt die while-Anweisung nur die Bedingung an.

• Bedingung: Schreiben Sie den Wahrheitsausdruck, der bestimmt, ob die Schleife fortgesetzt wird. Die Schleife läuft weiter, solange sie true ist, und endet, wenn sie false wird.

Beispiel

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

In diesem Beispiel beginnt die Schleife mit der Variablen i bei 0 und wird ausgeführt, solange i < 5 true ist. In jeder Schleifeniteration wird i um 1 erhöht, und wenn i 5 erreicht, wird die Bedingung false und die Schleife endet. Als Ergebnis zeigt die while-Anweisung Werte von 0 bis 4 an.

Im Gegensatz zur for-Anweisung werden bei der while-Anweisung Initialisierung und Aktualisierung der Variablen als separate Anweisungen geschrieben. Sie können auch nach der while-Anweisung auf die Variable zugreifen. In diesem Fall wird nach dem Ende der while-Anweisung 5 angezeigt.

Endlosschleife

Wenn die Bedingung immer true ist, tritt eine Endlosschleife auf, die nicht endet. Endlosschleifen sollten vermieden werden, aber wenn sie absichtlich verwendet werden, können Sie die Schleife mit einer break-Anweisung beenden.

Beispiel

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Verarbeitung von Arrays mit einer while-Schleife

Es ist auch möglich, Arrays mit einer while-Anweisung zu verarbeiten.

Beispiel

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

do...while-Anweisung

Grundlegende Syntax

1do {
2    // Code that is executed at least once
3} while (condition);

Die do...while-Anweisung, eine Variante der while-Anweisung, überprüft die Bedingung, nachdem die Schleife mindestens einmal ausgeführt wurde. Während die while-Anweisung die Bedingung zuerst überprüft, führt die do...while-Anweisung den Prozess einmal aus, bevor die Bedingung überprüft wird.

Beispiel

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

In diesem Beispiel wird i von 0 bis 4 angezeigt. Die do...while-Anweisung unterscheidet sich von der while-Anweisung dadurch, dass sie immer einmal ausgeführt wird, selbst wenn die Bedingung false ist.

Zusammenfassung

• Die while-Anweisung wird verwendet, um Code wiederholt auszuführen, solange die Bedingung true ist.
• Beachten Sie die Gefahr von Endlosschleifen, aber Sie können den Schleifenfluss mit break und continue steuern.
• Die do...while-Anweisung ist nützlich, wenn Sie die Schleife mindestens einmal ausführen möchten.

break und continue

Sie können break und continue innerhalb der Schleife verwenden.

• break wird verwendet, um die Schleife vorzeitig zu beenden.
• continue überspringt die aktuelle Iteration und fährt mit der nächsten Iteration fort.

Beispiel für break

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

In diesem Fall wird break ausgeführt, wenn i den Wert 5 erreicht. Als Ergebnis werden die Zahlen von 0 bis 4 angezeigt.

Beispiel für continue

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

In diesem Fall wird continue ausgeführt, wenn i den Wert 2 hat. Dementsprechend werden alle Zahlen außer 2 angezeigt.

Verschachtelte Schleifen in JavaScript

In der JavaScript-Programmierung ist eine verschachtelte Schleife eine Struktur, bei der sich eine Schleife innerhalb einer anderen befindet. Solche Schleifen sind sehr effektiv, wenn spezifische Algorithmen oder Prozesse mehrere Dimensionen oder Ebenen umfassen. Ein typischer Fall ist beispielsweise die Verarbeitung eines mehrdimensionalen Arrays mit Arrays in Arrays.

Hier erklären wir die Grundstruktur von verschachtelten Schleifen, Anwendungsbeispiele, Vorsichtsmaßnahmen und Optimierungsüberlegungen.

Grundstruktur von verschachtelten Schleifen

Die grundlegende Struktur einer geschachtelten Schleife ist eine Form, bei der eine oder mehrere Schleifen in einer anderen Schleife enthalten sind. Jedes Mal, wenn die äußere Schleife einmal ausgeführt wird, wird die innere Schleife so oft ausgeführt.

Nachfolgend finden Sie ein einfaches Beispiel für zwei geschachtelte Schleifen.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

Im obigen Code wird i in der äußeren Schleife gezählt und j in der inneren Schleife. Jedes Mal, wenn die äußere Schleife einmal ausgeführt wird, wird die innere Schleife zweimal ausgeführt.

Praktisches Beispiel für geschachtelte Schleifen

Geschachtelte Schleifen sind besonders nützlich für die Verarbeitung von multidimensionalen Arrays. Beispielsweise müssen bei der Verarbeitung eines zweidimensionalen Arrays sowohl die Zeilen (äußere Schleife) als auch die Spalten (innere Schleife) behandelt werden.

Im folgenden Beispiel bearbeiten wir ein zweidimensionales Array und geben jedes Element aus.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

Auf diese Weise ermöglichen geschachtelte Schleifen den Zugriff auf jedes Element eines zweidimensionalen Arrays.

Notizen

Beim Einsatz von geschachtelten Schleifen gibt es einige Punkte zu beachten.

1. Leistungsprobleme

   Je tiefer geschachtelte Schleifen werden, desto stärker steigt die Ausführungszeit an. Wenn die äußere Schleife beispielsweise 100 Mal und die innere Schleife ebenfalls 100 Mal ausgeführt wird, werden insgesamt 10.000 Operationen durchgeführt. Daher sollten bei vielen Schleifeniterationen Optimierungen zur Effizienzsteigerung in Betracht gezogen werden.

2. Anwendung auf komplexe Algorithmen

   Geschachtelte Schleifen sind sehr mächtig, aber wenn die Verarbeitung komplex wird, kann der Code schwer verständlich werden. Um die Lesbarkeit des Codes zu erhalten, ist es daher wichtig, die Verarbeitung mit geeigneten Kommentaren und Funktionen zu strukturieren.

Optimierungsüberlegungen

Beim Einsatz von geschachtelten Schleifen können die folgenden Optimierungen berücksichtigt werden.

1. Frühe Schleifenbeendigung

   Wenn eine bestimmte Bedingung innerhalb der Schleife erfüllt ist, können Sie eine break-Anweisung verwenden, um die Schleife zu verlassen. Dies kann unnötige Schleifen vermeiden und die Leistung verbessern.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

2. Berechnungen nach außen verschieben

   Anstatt dieselbe Berechnung bei jeder Iteration innerhalb der Schleife durchzuführen, können Sie diese einmal außerhalb der Schleife ausführen und das Ergebnis verwenden, um den Prozess effizienter zu gestalten.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Zusammenfassung

Geschachtelte Schleifen sind sehr nützlich, um komplexe Datenstrukturen und Algorithmen in JavaScript zu verarbeiten. Wenn sie jedoch nicht richtig angewendet werden, können sie zu Leistungseinbußen und einer geringeren Lesbarkeit des Codes führen. Um geschachtelte Schleifen effektiv zu nutzen, ist es wichtig, die Schleifen zu optimieren, den Code gut zu organisieren und je nach Situation geeignete Ansätze zu wählen.

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