Diefor...of-Anweisung führt eine Schleife aus, die mit einer Sequenz von Werten arbeitet, die von einemiterierbaren Objekt stammen. Zu iterierbaren Objekten gehören Instanzen von eingebauten Objekten wieArray,String,TypedArray,Map,Set,NodeList (und andere DOM-Sammlungen) sowie dasarguments Objekt,Generatoren, die vonGeneratorfunktionen erzeugt wurden, und benutzerdefinierte Iterables.

Probieren Sie es aus

const array = ["a", "b", "c"];for (const element of array) {  console.log(element);}// Expected output: "a"// Expected output: "b"// Expected output: "c"

Syntax

for (variable of iterable)  statement

variable

Empfängt bei jeder Iteration einen Wert aus der Sequenz. Kann entweder eine Deklaration mitconst,let,var,using,await using oder einZuweisungsziel (z. B. eine zuvor deklarierte Variable, eine Objekteigenschaft oder einDestrukturierungsmuster) sein. Variablen, die mitvar deklariert werden, sind nicht lokal zur Schleife, d.h. sie befinden sich im selben Gültigkeitsbereich, in dem diefor...of Schleife steht.

iterable

Ein iterierbares Objekt. Die Quelle der Wertsequenz, auf der die Schleife operiert.

statement

Eine Anweisung, die bei jeder Iteration ausgeführt wird. Kann aufvariable referieren. Sie können eineBlockanweisung verwenden, um mehrere Anweisungen auszuführen.

Beschreibung

Einefor...of-Schleife arbeitet mit den Werten, die aus einem iterierbaren Objekt nacheinander in sequenzieller Reihenfolge stammen. Jede Operation der Schleife mit einem Wert wird alsIteration bezeichnet, und die Schleife wird alsIterieren über das Iterable bezeichnet. Jede Iteration führt Anweisungen aus, die auf den aktuellen Sequenzwert verweisen können.

Wenn einefor...of-Schleife über ein iterierbares Objekt iteriert, ruft sie zuerst die[Symbol.iterator]() Methode des iterierbaren Objekts auf, welche einenIterator zurückgibt und ruft dann wiederholt dienext() Methode des resultierenden Iterators auf, um die Sequenz von Werten zu erzeugen, die dervariable zugewiesen werden.

Einefor...of-Schleife wird beendet, wenn der Iterator abgeschlossen ist (dasnext()-Resultat ist ein Objekt mitdone: true). Wie bei anderen Schleifenanweisungen können Sie innerhalb derstatement AnweisungKontrollflussanweisungen verwenden:

• break unterbricht die Ausführung derstatement und geht zur ersten Anweisung nach der Schleife.
• continue unterbricht die Ausführung derstatement und geht zur nächsten Iteration der Schleife über.

Wenn diefor...of-Schleife frühzeitig beendet wurde (z. B. wird einebreak-Anweisung getroffen oder ein Fehler ausgelöst), wird diereturn() Methode des Iterators aufgerufen, um jegliche Aufräumarbeiten durchzuführen.

Dervariable Teil vonfor...of akzeptiert alles, was vor dem= Operator stehen kann. Sie könnenconst 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 Sielet verwenden.

const iterable = [10, 20, 30];for (let value of iterable) {  value += 1;  console.log(value);}// 11// 21// 31

Variablen, die mit derusing oderawait using Deklaration deklariert werden, werden jedes Mal entsorgt, wenn eine Schleifeniteration abgeschlossen ist (undawait using führt zu einem implizitenawait 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).

const resources = [dbConnection1, dbConnection2, dbConnection3];for (using dbConnection of resources) {  dbConnection.query("...");  // dbConnection is disposed here}

Sie könnenDestrukturierung verwenden, um mehrere lokale Variablen zuzuweisen, oder einen Eigenschafts-Accessor wiefor (x.y of iterable) verwenden, um den Wert einer Objekteigenschaft zuzuweisen.

Jedoch gibt es eine spezielle Regel, die verbietet,async als Variablennamen zu verwenden. Dies ist ungültige Syntax:

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 Codefor (async of => {};;) zu vermeiden, welches einefor Schleife ist.

Ähnlich, wenn Sie dieusing Deklaration verwenden, dann kann die Variable nichtof genannt werden:

for (using of of []); // SyntaxError

Dies dient dazu, Syntaxambiguität mit dem gültigen Codefor (using of []) zu vermeiden, bevorusing eingeführt wurde.

Beispiele

Über ein Array iterieren

const iterable = [10, 20, 30];for (const value of iterable) {  console.log(value);}// 10// 20// 30

Über einen String iterieren

Strings werdendurch Unicode-Codepunkte iteriert.

const iterable = "boo";for (const value of iterable) {  console.log(value);}// "b"// "o"// "o"

Über ein TypedArray iterieren

const iterable = new Uint8Array([0x00, 0xff]);for (const value of iterable) {  console.log(value);}// 0// 255

Über eine Map iterieren

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

Über ein Set iterieren

const iterable = new Set([1, 1, 2, 2, 3, 3]);for (const value of iterable) {  console.log(value);}// 1// 2// 3

Über das arguments-Objekt iterieren

Sie können über dasarguments-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

Über eine NodeList iterieren

Das folgende Beispiel fügt Klassenread zu Absätzen hinzu, die direkte Nachkommen des<article> Elements sind, indem über eine DOM-Sammlung vonNodeList iteriert wird.

const articleParagraphs = document.querySelectorAll("article > p");for (const paragraph of articleParagraphs) {  paragraph.classList.add("read");}

Über ein benutzerdefiniertes iterierbares Objekt iterieren

Ü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, diethis zurückgeben) sind eine recht häufige Technik, um Iteratoren in Syntaxen, die Iterables erwarten, wiefor...of, nutzbar zu machen.

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

Über einen Generator iterieren

function* source() {  yield 1;  yield 2;  yield 3;}const generator = source();for (const value of generator) {  console.log(value);}// 1// 2// 3

Frühes Beenden

Ausführung derbreak-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 diereturn() 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]

Unterschied zwischen for...of und for...in

Sowohlfor...in als auchfor...of-Anweisungen iterieren über etwas. Der Hauptunterschied zwischen ihnen besteht darin, worüber sie iterieren.

Diefor...in-Anweisung iteriert über dieenumerierten String-Eigenschaften eines Objekts, während diefor...of-Anweisung über die Werte iteriert, die dasiterierbare Objekt definiert, um darüber iteriert zu werden.

Das folgende Beispiel zeigt den Unterschied zwischen einerfor...of-Schleife und einerfor...in-Schleife, wenn sie mit einemArray 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 Objektiterable erbt die EigenschaftenobjCustom undarrCustom, weil es sowohlObject.prototype als auchArray.prototype in seinerPrototypenkette enthält.

Diefor...in-Schleife protokolliert nurenumerierbare Eigenschaften desiterable Objekts. Sie protokolliert nicht die Array-Elemente3,5,7 oder"hello", da diese keineEigenschaften sind – sie sindWerte. Sie protokolliert Array-Indizes sowiearrCustom undobjCustom, die tatsächliche Eigenschaften sind. Wenn Sie sich nicht sicher sind, warum diese Eigenschaften iteriert werden, gibt es eine ausführlichere Erklärung, wieArray-Iteration undfor...in funktioniert.

Die zweite Schleife ähnelt der ersten, verwendet jedochObject.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 Eigenschaften0,1,2 undfoo werden protokolliert, da sie eigene Eigenschaften sind. Die EigenschaftenarrCustom undobjCustom werden nicht protokolliert, da sie geerbt sind.

Diefor...of-Schleife iteriert und protokolliertWerte, dieiterable, als ein Array (dasiterierbar ist), definiert, um darüber zu iterieren. DieElemente3,5,7 des Objekts werden angezeigt, aber keine derEigenschaften des Objekts.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Array.prototype.forEach()
• Map.prototype.forEach()
• Object.entries()