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.
Eine JavaScript-Schleife ist ein Werkzeug, das verwendet wird, um wiederholte Aufgaben basierend auf einer bestimmten Bedingung auszuführen. Andererseits ist „iterate“ ein allgemeiner Begriff, der im Kontext der Schleife „repeat“ bedeutet. Eine Schleife wird so lange wiederholt, bis eine Stoppbedingung erfüllt ist.
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;

Warum werden normalerweise Schleifen verwendet?
- Sich wiederholende Aufgaben ausführen: Sie können Schleifen verwenden, um Anweisungen auszuführen, bis bestimmte Bedingungen erfüllt sind.
- Über Objekte oder Arrays iterieren: Mit Schleifen können Sie Eigenschaften eines Objekts oder Elemente eines Arrays durchlaufen, sodass Sie bestimmte Aktionen für jede Eigenschaft oder jedes Element ausführen können.
- 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
. Lassen Sie uns sie im Detail untersuchen und zeigen, wie sie funktionieren.
For
loop
A for
Die Schleife wird wiederholt, bis eine angegebene Bedingung als wahr ausgewertet wird. Eine for-Schleife hat drei optionale Ausdrücke, gefolgt von einem Codeblock.
for (initialization; condition; finalExpression) {
// code
}
- Das
initialization
Ausdruck kommt, bevor die erste Schleife ausgeführt wird. Dieser Ausdruck initialisiert normalerweise einen oder mehrere Zähler. - A
condition
Ausdruck wird jedes Mal vor dem überprüftfor
Schleife läuft. Der Code in der Schleife oder Anweisung wird jedes Mal ausgeführt, wenn der Ausdruck als wahr ausgewertet wird. Andererseits stoppt die Schleife, wenn der Ausdruck als falsch ausgewertet wird. Wenn der Ausdruck jedoch ausgelassen wird, wird der Ausdruck automatisch als wahr ausgewertet. - Das
finalExpression
wird nach jedem Schleifendurchlauf ausgeführt. Der Ausdruck wird meistens verwendet, um einen Zähler zu inkrementieren.
Sie können {}, Blockanweisung, verwenden, um mehrere Anweisungen zu gruppieren und auszuführen. Wenn Sie die Schleife vorzeitig verlassen möchten, bevor der Bedingungsausdruck als falsch ausgewertet wird, verwenden Sie die break-Anweisung.
Beispiele for
Schleifen mit Code
- Nutzen Sie den
for
Schleife zuiterate
;
for (let i = 0; i < 7; i++) {
console.log(i);
}
In diesem Codeblock;
- Die Variable i wird auf Null initialisiert (es sei i=0).
- Die Bedingung ist, dass i kleiner als 7 sein sollte (i=7).
- Die Schleife wird wiederholt durchlaufen, wenn der Wert von i kleiner als 7 ist (i<7>.
- Die Iteration fügt dem Wert von i nach jeder Iteration 1 hinzu (++1).

- Nutzen Sie den
break
Anweisung zum Verlassen der Schleife, bevor die Bedingung als falsch ausgewertet wird;
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- Der Codeblock iteriert von 1 bis 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).

Die if-Anweisung wertet aus, ob der Wert von i=9 ist. Wenn die Bedingung wahr ist, wird die break
Anweisung ausgeführt und die Schleife beendet.
(Bild)
For…of
loop
Das for…of
Schleife iteriert über iterierbare Objekte wie z Map
, Array
, Arguments
und Set
. Diese Schleife ruft einen benutzerdefinierten Iterations-Hook mit Anweisungen auf, die für den Wert jeder einzelnen Eigenschaft ausgeführt werden.
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”
. - Das
for…of loop
iteriert über jedes Element infrontendLanguages
. - Das
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
- Das
for….of
iteriert über das Elements-Objekt. - Die Schleife weist vor der Ausführung das aktuelle Element n zu
console.log(n)
Aussage.

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()
-Konstruktor, um ein neues Map-Objekt zu erstellen. - Eine Variable
m
wird deklariert. - Die
.set()
-Methode fügen wir fünf Schlüssel-Wert-Paare hinzu. - A
for…of
loop iteriert über Elemente des Map-Objekts m.

For…in
loop
A for…in
Schleife wird verwendet, um die Eigenschaften eines Objekts zu durchlaufen. Die Grundstruktur einer for…in
Schleife ist;
for (property in object) {
// code
}
Sie können verwenden for…in
Schleife, um zu iterieren arrays
funktioniert 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
. - Wir verwenden eine for-Schleife, um über jede Eigenschaft auf der zu iterieren
shoppingList
mit dem in-Operator. - Bei jeder Iteration weist die Schleife den aktuellen Eigenschaftsnamen in der zu
shoppingList
.

While
Das while
Schleife wertet a . aus 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
Die Testbedingung muss vor der Ausführung der Anweisung in der Schleife auftreten. Sie können mehrere Anweisungen mit {}- oder Blockanweisungen ausführen.
Beispiel von while
Schleife in Aktion
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
In diesem Code;
- Eine Variable
n
wird mit einem Nullwert initialisiert (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
Schleife iteriert, bis eine bestimmte Bedingung ausgewertet wird false
.
Die allgemeine Struktur von a do…while
Aussage ist;
do
statement
while (condition);
Die Anweisung wird einmal ausgeführt, jedoch vor dem Prüfen der Bedingung. Die Anweisung wird ausgeführt, wenn die condition
is true
. Allerdings, wenn die ausgewertet condition
is false
, wird die Ausführung angehalten, und die Steuerung wird an die Anweisung nach übergeben do..while
. Code in a do…while
Die Schleife wird garantiert mindestens einmal ausgeführt, auch wenn die Bedingung zu ausgewertet wird 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.

Nested Loop
Eine verschachtelte Schleife ist eine Situation, in der wir eine Schleife in einer Schleife haben. Zum Beispiel können wir eine for-Schleife in einer anderen for-Schleife verschachteln.
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
funktioniertinner
und beide werden mit dem Wert Null initialisiert. - Beide Variablen werden nach jeder Iteration um 2 erhöht
- Das
outer
funktioniertinner
Schleifen werden jeweils dreimal durchlaufen.

Loop control statements
Loop control
Anweisungen, die manchmal auch als „Sprunganweisungen“ bezeichnet werden, unterbrechen den normalen Ablauf eines Programms. Break
funktioniert continue
sind Beispiele für Schleifensteuerungsanweisungen.
Anweisungen brechen
Break
Anweisungen beenden eine Schleife sofort, auch wenn die Bedingung nicht erfüllt ist.
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;

Aussagen fortsetzen
Continue
Anweisungen werden verwendet, um einen bestimmten Codeblock zu überspringen und eine Iteration für die neue Schleife auszuführen.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Der gerenderte Code erscheint als;

Fazit
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.