Jeder JavaScript-Schleifentyp erklärt: [Mit Codeblöcken und Beispielen]

JavaScript gehört zu den am häufigsten verwendeten Programmiersprachen. Entwickler, die JavaScript-Ingenieure werden möchten, müssen die Grundlagen von Schleifen, ihre Typen und ihre Funktionsweise lernen. 

A JavaScript loop is a tool used to perform repeated tasks based on a certain condition. On the other hand, ‘iterate’ is a generic term, meaning repeat in the context of the loop. A loop will continue to iterate until a stopping condition is met. 

Um es besser zu verstehen, können Sie es sich als ein Computerspiel vorstellen, bei dem Sie angewiesen werden, X Schritte nach Norden und dann Y Schritte nach links zu machen. 

Sie können vertreten take 7 steps northwards wie; 

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

Wenn der obige Codeblock ausgeführt wird, haben Sie dies;

Why are loops usually benutzt?

• Sich wiederholende Aufgaben ausführen: Sie können Schleifen verwenden, um Anweisungen auszuführen, bis bestimmte Bedingungen erfüllt sind. 
• iterate over objects or arrays: With loops, you can iterate over properties of an object or elements of an array, allowing you to perform certain actions for each property or element. 
• Daten filtern: Sie können eine Schleife verwenden, um Daten basierend auf bestimmten Bedingungen zu filtern. 

JavaScript-Schleifen gibt es in verschiedenen Formen; For, While, Do...While, For...of und For...in. Let us explore them in detail and demonstrate how each works. 

For Schleife

A for loop will repeat until a specified condition evaluates to true. A for loop has three optional expressions, followed by a code block. 

for (initialization; condition; finalExpression) {

  // code

}

• Der initialization expression comes before the first loop is executed. This expression usually initializes one or more counters. 
• A condition Ausdruck wird jedes Mal vor dem überprüft for loop runs. The code in the loop or statement executes every time the expression evaluates to true. On the other hand, the loop stops when the expression evaluates to false. However, if the expression is omitted, the expression will evaluate to true automatically. 
• Der finalExpression wird nach jedem Schleifendurchlauf ausgeführt. Der Ausdruck wird meistens verwendet, um einen Zähler zu inkrementieren.

You can use {}, block statement, to group and execute multiple statements. If you want to exit the loop early before the condition expression evaluates to false, use the break statement. 

Beispiele for Schleifen mit Code 

1. Nutzen Sie den for Schleife zu iterate;

for (let i = 0; i < 7; i++) {

  console.log(i);

}

In diesem Codeblock;

• The variable i is initialized to zero (let i=0). 
• Die Bedingung ist, dass i kleiner als 7 sein sollte (i=7). 
• The loop will repeatedly iterate if the value of i is less than 7 (i<7>. 
• Die Iteration fügt dem Wert von i nach jeder Iteration 1 hinzu (++1). 

2. Nutzen Sie den break statement to exit the loop before the condition evaluates to false;

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + i);

}

• The code block iterates from 1 to 10 (i<11).
• Die Schleife initialisiert eine Variable i mit einem Wert von 1 (es sei i = 1). 
• Die Schleifenbedingung wird weiter ausgeführt, wenn der Wert von i kleiner als 11 ist (i < 11). 
• Der Wert der i erhöht sich nach jeder Iteration um 2 (i += 2). 

The if statement evaluates whether the value of i=9. If the condition is true, the break statement executes, and the loop terminates. 

(Bild)

For…of Schleife

Der for…of loop iterates over iterable objects such as Map, Array, Arguments und Set. This loop invokes a custom iteration hook with statements that execute for the value of each distinct property. 

Die Grundstruktur einer for…loop ist;

for (variable of object)

  statement

Beispiele for…of Schleife in Aktion

1. For…of Schleife, die über ein iteriert array

const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];

for (let i of frontendLanguages) {

  console.log(i);

}

In diesem Code;

• Wir definieren ein Array namens frontendLanguages
• Das Array hat drei Elemente; "HTML", "CSS",  "JavaScript" and “React”. 
• Der for…of loop Prozessates over each element in frontendLanguages.
• Der i im Codeblock nimmt den Wert jedes Elements während jeder Iteration und die auf der Konsole ausgegebenen Werte auf. 

2. For…of Schleife, die über a iteriert Set

const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

In diesem Codeblock;

• Wir deklarieren eine Variable s, die wir a zuordnen new Set mit dem Set()-Konstruktor.
• Mit der Methode add() werden dem Code zwei Elemente hinzugefügt
• Der for….of Prozessates over the elements object.
• Die Schleife weist vor der Ausführung das aktuelle Element n zu console.log(n) statement. 

3. For…of Schleife, die über a iteriert Map

const m = new Map();

m.set(4, "rabbit");

m.set(6, "monkey");

m.set(8, "elephant");

m.set(10, "lion");

m.set(12, "leopard");

for (let n of m) {

  console.log(n);

}

In diesem Codeblock;

• Wir verwenden Map() constructor to create a new Map object.
• Eine Variable m wird deklariert.
• Die richtigen .set() -Methode fügen wir fünf Schlüssel-Wert-Paare hinzu.
• A for…of loop iterates over elements of Map object m. 

For…in Schleife

A for…in loop is used to iterate over the properties of an object. The basic structure of a for…in Schleife ist;

for (property in object) {

  // code

}

Sie können verwenden for…in loop to iterate übrig arrays und array-like objects. 

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };

for (const vegetable in shoppingList) {

  console.log(vegetable);

}

In diesem Codeblock;

• Wir führen ein JavaScript-Objekt ein und benennen es shoppingList. 
• We use for loop to iterate over each property on the shoppingList mit dem in-Operator. 
• Bei jeder Iteration weist die Schleife den aktuellen Eigenschaftsnamen in der zu shoppingList. 

Während

Der while loop evaluates ein condition, wenn es das findet true, wird der Codeblock ausgeführt. Wenn jedoch die condition is false, endet die Schleife und der Codeblock wird nicht ausgeführt.

Dies ist die Grundstruktur von a while Schleife;

while (condition)

    Statement

The test condition must occur before the execution of the statement in the loop. You can execute multiple statements using {} or block statemente. 

Beispiel von while Schleife in Aktion

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

In diesem Code;

• Eine Variable n wird mit a . initialisiert zero value (let n=0).
• Die Schleife wird so lange ausgeführt, wie der Wert von n ist kleiner als 9 (n<9)
• Der Wert der n wird auf der Konsole angezeigt und nach jeder Iteration um 1 erhöht (n++)
• Die Ausführung des Codes wird bei 8 beendet. 

Do … While Loop

A do…while loop iterates until a specific condition evaluates false. 

Die allgemeine Struktur von a do…while statement is;

do

  statement

while (condition);

Der statement is executed once but before checking the condition. The statement will execute if the condition is true. However, if the evaluated condition is false, execution will stop, and the control passes to the statement after the do..while. Code in a do…while loop is guaranteed to run at least once, even if the condition evaluates true. 

Beispiel von do…while

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

In diesem Code;

• Wir führen eine Variable ein n und setze seinen Anfangswert auf 0 (n = 0).
• Unsere Variable n tritt in eine do…while-Schleife ein, in der ihr Wert nach jeder Iteration um 1 erhöht wird (n+=1)
• Der Wert der n wird protokolliert.
• Die Schleife wird so lange ausgeführt, wie der Wert von n kleiner als 7 ist (n < 7). 

Wenn Sie diesen Code ausführen, zeigt die Konsole Werte von n von 1 bis 7 an, während die Schleife 7 Mal ausgeführt wird.

Verschachtelte Schleife

A nested loop is a situation whereby we have a loop inside a loop. For instance, we can have a for loop nested inside another for loop. 

for (let outer = 0; outer < 5; outer += 2) {

  for (let inner = 0; inner < 6; inner += 2) {

    console.log(`${outer}-${inner}`);

  }

}

• Es gibt zwei Variablen; outer und inner and both are initialized with the value zero.
• Beide Variablen werden nach jeder Iteration um 2 erhöht
• Der outer und inner loops iterate jeweils dreimal. 

Loop control stategen

Loop control statements, sometimes known as “jump statements” interrupt the normal flow of a program. Break und continue are examples of loop control statemente.

Brechen Sie die Mategen

Break statements terminate a loop immediately, even if the condition has not been fulfilled. 

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("Loop stops here. We have reached the break statement");

    break;

  }

  console.log(n);

}

Der gerenderte Code erscheint als;

Continue stategen

Continue statements are used to skip a certain block of code and carry out iteration for the new loop. 

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

Der gerenderte Code erscheint als;

Schlussfolgerung

Oben sind die üblichen Schleifen, auf die Sie in Vanilla JavaScript und seinen Frameworks/Bibliotheken stoßen werden. Wie hervorgehoben, hat jeder Schleifentyp seinen Anwendungsfall und unterschiedliche Verhaltensweisen. Wenn Sie den falschen Schleifentyp auswählen, treten wahrscheinlich Fehler auf, und Ihr Code zeigt wahrscheinlich unerwartetes Verhalten. 

Wenn Sie es mit a zu tun haben JavaScript-Framework oder Bibliothek, überprüfen Sie immer deren Dokumentation und verwenden Sie die eingebauten Schleifen.