HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
View in English Always switch to English
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die for...of-Anweisung führt eine Schleife aus, die mit einer Sequenz von Werten arbeitet, die von einem iterierbaren Objekt stammen. Zu iterierbaren Objekten gehören Instanzen von eingebauten Objekten wie Array, String, TypedArray, Map, Set, NodeList (und andere DOM-Sammlungen) sowie das arguments Objekt, Generatoren, die von Generatorfunktionen erzeugt wurden, und benutzerdefinierte Iterables.
for...of
Array
String
TypedArray
Map
Set
NodeList
arguments
const array = ["a", "b", "c"]; for (const element of array) { console.log(element); } // Expected output: "a" // Expected output: "b" // Expected output: "c"
for (variable of iterable) statement
variable
Empfängt bei jeder Iteration einen Wert aus der Sequenz. Kann entweder eine Deklaration mit const, let, var, using, await using oder ein Zuweisungsziel (z. B. eine zuvor deklarierte Variable, eine Objekteigenschaft oder ein Destrukturierungsmuster) sein. Variablen, die mit var deklariert werden, sind nicht lokal zur Schleife, d.h. sie befinden sich im selben Gültigkeitsbereich, in dem die for...of Schleife steht.
const
let
var
using
await using
iterable
Ein iterierbares Objekt. Die Quelle der Wertsequenz, auf der die Schleife operiert.
statement
Eine Anweisung, die bei jeder Iteration ausgeführt wird. Kann auf variable referieren. Sie können eine Blockanweisung verwenden, um mehrere Anweisungen auszuführen.
Eine for...of-Schleife arbeitet mit den Werten, die aus einem iterierbaren Objekt nacheinander in sequenzieller Reihenfolge stammen. Jede Operation der Schleife mit einem Wert wird als Iteration bezeichnet, und die Schleife wird als Iterieren über das Iterable bezeichnet. Jede Iteration führt Anweisungen aus, die auf den aktuellen Sequenzwert verweisen können.
Wenn eine for...of-Schleife über ein iterierbares Objekt iteriert, ruft sie zuerst die [Symbol.iterator]() Methode des iterierbaren Objekts auf, welche einen Iterator zurückgibt und ruft dann wiederholt die next() Methode des resultierenden Iterators auf, um die Sequenz von Werten zu erzeugen, die der variable zugewiesen werden.
[Symbol.iterator]()
next()
Eine for...of-Schleife wird beendet, wenn der Iterator abgeschlossen ist (das next()-Resultat ist ein Objekt mit done: true). Wie bei anderen Schleifenanweisungen können Sie innerhalb der statement Anweisung Kontrollflussanweisungen verwenden:
done: true
break
continue
Wenn die for...of-Schleife frühzeitig beendet wurde (z. B. wird eine break-Anweisung getroffen oder ein Fehler ausgelöst), wird die return() Methode des Iterators aufgerufen, um jegliche Aufräumarbeiten durchzuführen.
return()
Der variable Teil von for...of akzeptiert alles, was vor dem = Operator stehen kann. Sie können const verwenden, um die Variable zu deklarieren, solange sie nicht innerhalb des Schleifenkörpers neu zugewiesen wird (sie kann zwischen Iterationen geändert werden, da es sich um zwei separate Variablen handelt). Andernfalls können Sie let verwenden.
=
const iterable = [10, 20, 30]; for (let value of iterable) { value += 1; console.log(value); } // 11 // 21 // 31
Hinweis: Jede Iteration erzeugt eine neue Variable. Die Neu-Zuweisung der Variable im Schleifenkörper beeinflusst nicht den ursprünglichen Wert im iterierbaren Objekt (z. B. in einem Array).
Variablen, die mit der using oder await using Deklaration deklariert werden, werden jedes Mal entsorgt, wenn eine Schleifeniteration abgeschlossen ist (und await using führt zu einem impliziten await am Ende der Iteration). Wenn jedoch die Schleife vorzeitig beendet wird, werden alle Werte im Iterator, die noch nicht besucht wurden, nicht entsorgt (obwohl der aktuelle Wert entsorgt wird).
await
const resources = [dbConnection1, dbConnection2, dbConnection3]; for (using dbConnection of resources) { dbConnection.query("..."); // dbConnection is disposed here }
Sie können Destrukturierung verwenden, um mehrere lokale Variablen zuzuweisen, oder einen Eigenschafts-Accessor wie for (x.y of iterable) verwenden, um den Wert einer Objekteigenschaft zuzuweisen.
for (x.y of iterable)
Jedoch gibt es eine spezielle Regel, die verbietet, async als Variablennamen zu verwenden. Dies ist ungültige Syntax:
async
let async; for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
Dies dient dazu, Syntaxambiguität mit dem gültigen Code for (async of => {};;) zu vermeiden, welches eine for Schleife ist.
for (async of => {};;)
for
Ähnlich, wenn Sie die using Deklaration verwenden, dann kann die Variable nicht of genannt werden:
of
for (using of of []); // SyntaxError
Dies dient dazu, Syntaxambiguität mit dem gültigen Code for (using of []) zu vermeiden, bevor using eingeführt wurde.
for (using of [])
const iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10 // 20 // 30
Strings werden durch Unicode-Codepunkte iteriert.
const iterable = "boo"; for (const value of iterable) { console.log(value); } // "b" // "o" // "o"
const iterable = new Uint8Array([0x00, 0xff]); for (const value of iterable) { console.log(value); } // 0 // 255
const iterable = new Map([ ["a", 1], ["b", 2], ["c", 3], ]); for (const entry of iterable) { console.log(entry); } // ['a', 1] // ['b', 2] // ['c', 3] for (const [key, value] of iterable) { console.log(value); } // 1 // 2 // 3
const iterable = new Set([1, 1, 2, 2, 3, 3]); for (const value of iterable) { console.log(value); } // 1 // 2 // 3
Sie können über das arguments-Objekt iterieren, um alle Parameter zu überprüfen, die in eine Funktion übergeben wurden.
function foo() { for (const value of arguments) { console.log(value); } } foo(1, 2, 3); // 1 // 2 // 3
Das folgende Beispiel fügt Klassen read zu Absätzen hinzu, die direkte Nachkommen des <article> Elements sind, indem über eine DOM-Sammlung von NodeList iteriert wird.
read
<article>
const articleParagraphs = document.querySelectorAll("article > p"); for (const paragraph of articleParagraphs) { paragraph.classList.add("read"); }
Über ein Objekt mit einer [Symbol.iterator]() Methode iterieren, welche einen benutzerdefinierten Iterator zurückgibt:
const iterable = { [Symbol.iterator]() { let i = 1; return { next() { if (i <= 3) { return { value: i++, done: false }; } return { value: undefined, done: true }; }, }; }, }; for (const value of iterable) { console.log(value); } // 1 // 2 // 3
Über ein Objekt mit einer [Symbol.iterator]() Generator-Methode iterieren:
const iterable = { *[Symbol.iterator]() { yield 1; yield 2; yield 3; }, }; for (const value of iterable) { console.log(value); } // 1 // 2 // 3
Iterable Iteratoren (Iteratoren mit einer [Symbol.iterator]() Methode, die this zurückgeben) sind eine recht häufige Technik, um Iteratoren in Syntaxen, die Iterables erwarten, wie for...of, nutzbar zu machen.
this
let i = 1; const iterator = { next() { if (i <= 3) { return { value: i++, done: false }; } return { value: undefined, done: true }; }, [Symbol.iterator]() { return this; }, }; for (const value of iterator) { console.log(value); } // 1 // 2 // 3
function* source() { yield 1; yield 2; yield 3; } const generator = source(); for (const value of generator) { console.log(value); } // 1 // 2 // 3
Ausführung der break-Anweisung in der ersten Schleife verursacht, dass diese frühzeitig beendet wird. Der Iterator ist noch nicht fertig, sodass die zweite Schleife dort fortfährt, wo die erste unterbrochen wurde.
const source = [1, 2, 3]; const iterator = source[Symbol.iterator](); for (const value of iterator) { console.log(value); if (value === 1) { break; } console.log("This string will not be logged."); } // 1 // Another loop using the same iterator // picks up where the last loop left off. for (const value of iterator) { console.log(value); } // 2 // 3 // The iterator is used up. // This loop will execute no iterations. for (const value of iterator) { console.log(value); } // [No output]
Generatoren implementieren die return() Methode, die dazu führt, dass die Generatorfunktion früh zurückkehrt, wenn die Schleife beendet wird. Dies macht Generatoren nicht zwischen Schleifen wiederverwendbar.
function* source() { yield 1; yield 2; yield 3; } const generator = source(); for (const value of generator) { console.log(value); if (value === 1) { break; } console.log("This string will not be logged."); } // 1 // The generator is used up. // This loop will execute no iterations. for (const value of generator) { console.log(value); } // [No output]
Sowohl for...in als auch for...of-Anweisungen iterieren über etwas. Der Hauptunterschied zwischen ihnen besteht darin, worüber sie iterieren.
for...in
Die for...in-Anweisung iteriert über die enumerierten String-Eigenschaften eines Objekts, während die for...of-Anweisung über die Werte iteriert, die das iterierbare Objekt definiert, um darüber iteriert zu werden.
Das folgende Beispiel zeigt den Unterschied zwischen einer for...of-Schleife und einer for...in-Schleife, wenn sie mit einem Array verwendet werden.
Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {}; const iterable = [3, 5, 7]; iterable.foo = "hello"; for (const i in iterable) { console.log(i); } // "0", "1", "2", "foo", "arrCustom", "objCustom" for (const i in iterable) { if (Object.hasOwn(iterable, i)) { console.log(i); } } // "0" "1" "2" "foo" for (const i of iterable) { console.log(i); } // 3 5 7
Das Objekt iterable erbt die Eigenschaften objCustom und arrCustom, weil es sowohl Object.prototype als auch Array.prototype in seiner Prototypenkette enthält.
objCustom
arrCustom
Object.prototype
Array.prototype
Die for...in-Schleife protokolliert nur enumerierbare Eigenschaften des iterable Objekts. Sie protokolliert nicht die Array-Elemente 3, 5, 7 oder "hello", da diese keine Eigenschaften sind – sie sind Werte. Sie protokolliert Array-Indizes sowie arrCustom und objCustom, die tatsächliche Eigenschaften sind. Wenn Sie sich nicht sicher sind, warum diese Eigenschaften iteriert werden, gibt es eine ausführlichere Erklärung, wie Array-Iteration und for...in funktioniert.
3
5
7
"hello"
Die zweite Schleife ähnelt der ersten, verwendet jedoch Object.hasOwn(), um zu überprüfen, ob die gefundene enumerierbare Eigenschaft eigene des Objekts ist, d.h. nicht geerbt. Wenn dies der Fall ist, wird die Eigenschaft protokolliert. Die Eigenschaften 0, 1, 2 und foo werden protokolliert, da sie eigene Eigenschaften sind. Die Eigenschaften arrCustom und objCustom werden nicht protokolliert, da sie geerbt sind.
Object.hasOwn()
0
1
2
foo
Die for...of-Schleife iteriert und protokolliert Werte, die iterable, als ein Array (das iterierbar ist), definiert, um darüber zu iterieren. Die Elemente 3, 5, 7 des Objekts werden angezeigt, aber keine der Eigenschaften des Objekts.
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Array.prototype.forEach()
Map.prototype.forEach()
Object.entries()