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üftfor
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
- Nutzen Sie den
for
Schleife zuiterate
;
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).

- 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
For…of
Schleife, die über ein iteriertarray
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 infrontendLanguages
. - Der
i
im Codeblock nimmt den Wert jedes Elements während jeder Iteration und die auf der Konsole ausgegebenen Werte auf.

For…of
Schleife, die über a iteriertSet
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 zuordnennew 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.

For…of
Schleife, die über a iteriertMap
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
undinner
and both are initialized with the value zero. - Beide Variablen werden nach jeder Iteration um 2 erhöht
- Der
outer
undinner
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.