Die JavaScript-For-Schleife und welche Schleife wann passt
JavaScript-Schleifen im Vergleich
JavaScript-For-Schleife und alle anderen Schleifen live verglichen | We.Inc
for, for...of, for...in, while, do...while und forEach nebeneinander. Führe jede Schleife auf einem Array, einem String, einem Objekt oder einer Map aus und sieh die Ausgabe oder den Fehler, den sie wirft.
Eine klassische for-Schleife hat drei Teile: for (let i = 0; i < arr.length; i++) { ... }. Nutze sie, wenn du den Index oder eine eigene Schrittweite brauchst. Für einfache Werte nimmst du for...of, für die Keys eines Objekts for...in oder Object.entries, und while, wenn du vorher nicht weißt, wie viele Durchläufe du brauchst.
Welche Schleife zur Aufgabe passt
Schleife
Am besten für
Vorzeitig abbrechen?
for (let i = 0; i < n; i++)
Zählen, Zugriff per Index, rückwärts oder in Schritten von 2
Ja
for (const x of iterable)
Werte von Arrays, Strings, Maps, Sets, NodeLists
Ja
for (const key in obj)
Keys eines einfachen Objekts (inklusive geerbter)
Ja
while (condition)
Wiederholen, bis sich etwas ändert, unbekannte Anzahl
Ja
do { } while (condition)
Dasselbe, läuft aber immer mindestens einmal
Ja
arr.forEach(fn)
Seiteneffekte für jedes Array-Element
Nein (nur durch Werfen eines Fehlers)
Jede Schleife auf dieser Seite wiederholt Code, aber sie unterscheiden sich darin, was sie dir pro Durchlauf liefern, worüber sie iterieren können und wie du wieder herauskommst. Mit dem Runner unten richtest du jede Schleife auf vier Arten von Daten und siehst die echte Ausgabe, wodurch Fehler wie for...in auf einem Array oder for...of auf einem einfachen Objekt leicht auffallen.
Wähle eine Schleife und eine Art von Daten. Die Seite führt diese Schleife wirklich in deinem Browser aus.
Der Ausgabebereich listet, was die Schleifenvariable in jedem Durchlauf enthielt, oder den Fehler, den die Kombination wirft.
Aktiviere die break-Option, um beim dritten Durchlauf anzuhalten und zu sehen, welche Schleifen das unterstützen.
Kopiere ein beliebiges Muster aus den Beispielen weiter unten.
Deklariere den Zähler mit let, nicht mit var. Mit let bekommt jeder Durchlauf seine eigene Kopie, sodass in der Schleife erzeugte Callbacks die richtige Zahl sehen.
Nimm in for...of und for...in lieber const, wenn du die Variable nicht neu zuweist; jeder Durchlauf bekommt eine frische Bindung.
forEach wartet nicht auf async Callbacks. Um jedes Element nacheinander abzuwarten, nutze for...of mit await in einer async Funktion.
Stell sicher, dass die Bedingung einer while-Schleife false werden kann. Ändere die geprüfte Variable im Schleifenkörper, sonst friert der Tab ein.
Häufige Fragen
Was ist der Unterschied zwischen for...of und for...in?
for...of liefert dir Werte aus allem, was iterierbar ist, etwa die Elemente eines Arrays oder die Zeichen eines Strings. for...in liefert dir Eigenschaftsnamen als Strings, inklusive geerbter aufzählbarer. Auf einem Array liefert for...in '0', '1', '2' statt der Elemente.
Wie breche ich aus einer forEach-Schleife aus?
Gar nicht, außer durch das Werfen eines Fehlers. Wechsle zu for...of, das break unterstützt, oder zu some, every, find oder findIndex, die von selbst anhalten, sobald sie eine Antwort haben.
Wie iteriere ich in JavaScript über ein Objekt?
Nutze for (const [key, value] of Object.entries(obj)). Damit erfasst du nur die eigenen Keys des Objekts und bekommst beide Teile. for...of direkt auf einem einfachen Objekt wirft TypeError: obj is not iterable.
Wie verlasse ich zwei verschachtelte Schleifen auf einmal?
Setze ein Label vor die äußere Schleife und nutze es mit break: outer: for (...) { for (...) { if (found) break outer; } }. continue outer springt stattdessen zum nächsten Durchlauf der äußeren Schleife.
Wie laufe ich rückwärts durch eine Schleife?
Beginne beim letzten Index und zähle herunter: for (let i = arr.length - 1; i >= 0; i--). So entfernst du auch gefahrlos Elemente mit splice während der Schleife, denn die Positionen, die du noch besuchen musst, verschieben sich nicht.
Die drei Teile einer for-Schleife lesen
Der erste Teil läuft einmal vor allem anderen und erzeugt meist den Zähler. Der zweite wird vor jedem Durchlauf geprüft, und die Schleife endet, sobald er false ist. Der dritte läuft nach jedem Durchlauf, meist um den Zähler weiterzubewegen.
Jeder Teil darf leer bleiben. for (;;) ist eine Schleife, die nur durch break oder return endet, was gelegentlich für Wiederholungslogik mit klarem Ausstieg im Inneren nützlich ist.
break, continue und Labels
break verlässt sofort die innerste Schleife. continue überspringt den Rest des aktuellen Durchlaufs und geht zum nächsten über. Beide funktionieren in for, for...of, for...in, while und do...while, aber nicht in einem forEach-Callback, wo return nur diesen einen Aufruf beendet.
Ein Label ist ein Name mit Doppelpunkt vor einer Anweisung. break label und continue label zielen dann auf diese äußere Anweisung, was dir erspart, ein found-Flag über verschachtelte Schleifen hinweg zu verwalten.
Schleifenmuster zum Kopieren
Klassisches for, vorwärts, rückwärts und in Schritten
Ändere Startwert, Bedingung oder Schrittweite, um beliebig zu zählen.
for...of mit dem Index
entries() verbindet jeden Wert mit seiner Position, sodass du beides ohne Zähler bekommst.
while und do...while
do...while prüft seine Bedingung nach dem Schleifenkörper, daher läuft der Körper einmal, selbst wenn die Bedingung von Anfang an false ist.
Verschachtelte Schleifen mit einem Label verlassen
break grid stoppt beide Schleifen, sobald der erste Treffer gefunden ist.
Jedes Element der Reihe nach abwarten
for...of hält bei jedem await an. Derselbe Code in forEach würde alle Requests gleichzeitig starten und nicht warten.
Schleifen-Runner
Wähle eine Schleife und Daten. Die Schleife läuft wirklich, und jeder Durchlauf wird unten aufgelistet.
Schleife
Daten
Array
String
Einfaches Objekt
Map
break nach dem dritten Durchlauf
Was ausgeführt wird
Ausgabe
Durchlauf {n}: {v}
forEach hat kein break. Das return im Callback beendet nur diesen einen Aufruf, daher laufen trotzdem alle Durchläufe.