for...of

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 sein (z.B. eine vorher deklarierte Variable, eine Objekteigenschaft oder ein Destructuring-Muster). Variablen, die mit var deklariert werden, sind nicht lokal zur Schleife, d.h. sie befinden sich im selben Scope wie die for...of-Schleife.

iterable

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

statement

Ein Anweisung, die bei jeder Iteration ausgeführt wird. Kann auf variable verweisen. Sie können einen Blockstatements verwenden, um mehrere Anweisungen auszuführen.

Eine for...of-Schleife arbeitet nacheinander an den Werten aus einem iterierbaren Objekt. Jede Ausführung der Schleife an einem Wert wird als Iteration bezeichnet, und die Schleife iteriert über das Iterable. 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 Iterables auf, die einen Iterator zurückgibt, und dann wiederholt die next()-Methode des resultierenden Iterators, um die Sequenz von Werten zu erzeugen, die variable zugewiesen werden.

Eine for...of-Schleife endet, wenn der Iterator abgeschlossen ist (das next()-Ergebnis ist ein Objekt mit done: true). Wie andere Schleifenanweisungen können Sie Kontrollflussanweisungen innerhalb von statement verwenden:

• break stoppt die Ausführung von statement und geht zur ersten Anweisung nach der Schleife.
• continue stoppt die Ausführung von statement und geht zur nächsten Schleifeniteration.

Wenn die for...of-Schleife frühzeitig beendet wurde (z.B. wenn eine break-Anweisung auftritt oder ein Fehler auftritt), wird die return()-Methode des Iterators aufgerufen, um eventuelle Aufräumarbeiten durchzuführen.

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 innerhalb des Schleifenkörpers nicht neu zugewiesen wird (sie kann zwischen den Iterationen geändert werden, da dies zwei separate Variablen sind). Andernfalls können Sie let verwenden.

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

Variablen, die mit der using- oder await using-Deklaration deklariert werden, werden jedes Mal entfernt, wenn eine Schleifeniteration abgeschlossen ist (und await using verursacht ein implizites await am Ende der Iteration). Wenn die Schleife jedoch frühzeitig endet, werden alle Werte im Iterator, die noch nicht besucht wurden, nicht entfernt (obwohl der aktuelle Wert es tut).

const resources = [dbConnection1, dbConnection2, dbConnection3];

for (using dbConnection of resources) {
  dbConnection.query("...");
  // dbConnection is disposed here
}

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

Es gibt jedoch 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 soll Syntaxambiguitäten mit dem gültigen Code for (async of => {};;) vermeiden, welcher eine for-Schleife ist.

Ähnlich, wenn Sie die using-Deklaration verwenden, kann die Variable nicht of genannt werden:

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

Dies soll Syntaxambiguitäten mit dem gültigen Code for (using of []) vermeiden, bevor using eingeführt wurde.

Strings werden nach Unicode-Codepunkten iteriert.

const iterable = "boo";

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

Sie können über das arguments-Objekt iterieren, um alle Parameter zu untersuchen, die in eine Funktion übergeben wurden.

function foo() {
  for (const value of arguments) {
    console.log(value);
  }
}

foo(1, 2, 3);
// 1
// 2
// 3

Im folgenden Beispiel wird eine read-Klasse zu Absätzen hinzugefügt, die direkte Nachfahren des <article>-Elements sind, indem über eine NodeList DOM-Sammlung iteriert wird.

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

Iterieren über ein Objekt mit einer [Symbol.iterator]()-Methode, die 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

Iterieren über ein Objekt mit einer [Symbol.iterator]()-Generatorfunktion:

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ückgibt) sind eine ziemlich übliche Technik, um Iteratoren in Syntaxen zu verwenden, die Iterables erwarten, wie for...of.

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

Die Ausführung der break-Anweisung in der ersten Schleife führt dazu, dass diese frühzeitig endet. Der Iterator ist noch nicht fertig, daher wird die zweite Schleife von dort weitermachen, wo die erste aufgehört hat.

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. Dadurch werden Generatoren zwischen den Schleifen nicht 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 liegt darin, worüber sie iterieren.

Die for...in-Anweisung iteriert über die enumerierbaren String-Eigenschaften eines Objekts, während die for...of-Anweisung über die Werte iteriert, die das iterierbare Objekt definiert, um über sie zu iterieren.

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.

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 detailliertere Erklärung darüber, wie Array-Iteration und for...in funktionieren.

Die zweite Schleife ähnelt der ersten, verwendet jedoch Object.hasOwn(), um zu überprüfen, ob die gefundene enumerierbare Eigenschaft die eigene des Objekts ist, d.h. nicht geerbt. Wenn sie das ist, wird die Eigenschaft protokolliert. Eigenschaften 0, 1, 2 und foo werden protokolliert, weil sie eigene Eigenschaften sind. Eigenschaften arrCustom und objCustom werden nicht protokolliert, weil sie geerbt sind.

Die for...of-Schleife iteriert und protokolliert Werte, die iterable als Array (das iterierbar ist) definiert, um über sie zu iterieren. Die Elemente des Objekts 3, 5, 7 werden angezeigt, aber keine der Eigenschaften des Objekts.

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