for...of

for (variable of iterable)
  statement

variable

Erhält bei jeder Iteration einen Wert aus der Sequenz. Kann entweder eine Deklaration mit const, let oder var sein, oder ein Ziel für Zuweisung (z.B. eine zuvor deklarierte Variable, eine Objekteigenschaft oder ein Destrukturierungsmuster). Mit var deklarierte Variablen sind nicht lokal zur Schleife, d.h. sie befinden sich im gleichen Gültigkeitsbereich wie die for...of-Schleife.

iterable

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

statement

Eine Anweisung, die bei jeder Iteration ausgeführt wird. Kann die variable referenzieren. Sie können eine Blockanweisung verwenden, um mehrere Anweisungen auszuführen.

Eine for...of-Schleife arbeitet nacheinander mit den Werten, die von einem iterierbaren Objekt stammen. Jede Operation der Schleife auf einen Wert wird als Iteration bezeichnet, und man sagt, die Schleife iteriert über das Iterable. Jede Iteration führt Anweisungen aus, die sich auf den aktuellen Sequenzwert beziehen können.

Wenn eine for...of-Schleife über ein iterierbares Objekt iteriert, ruft sie zuerst die [Symbol.iterator]()-Methode des iterierbaren Objekts auf, was 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.

Eine for...of-Schleife beendet ihre Ausführung, wenn der Iterator abgeschlossen ist (das next() Ergebnis ist ein Objekt mit done: true). Wie bei anderen Schleifenanweisungen können Sie Steuerflussanweisungen 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 Iteration der Schleife.

Wenn die for...of-Schleife frühzeitig beendet wird (z.B. bei einem break-Befehl oder beim Auftreten eines Fehlers), wird die return()-Methode des Iterators aufgerufen, um alle Bereinigungsaktionen 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 nicht innerhalb des Schleifenkörpers neu zugewiesen wird (sie kann zwischen den Iterationen verändert werden, da dies zwei separate Variablen sind). Ansonsten können Sie let verwenden.

const iterable = [10, 20, 30];

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

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

Es gibt jedoch eine spezielle Regel, die die Verwendung von async als Variablennamen verbietet. 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, Syntaxzweideutigkeiten mit dem gültigen Code for (async of => {};;) zu vermeiden, der eine for-Schleife ist.

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 an eine Funktion übergebenen Parameter zu untersuchen.

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

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

Das folgende Beispiel fügt Absatz-Elementen, die direkte Nachfahren des <article>-Elements sind, eine read-Klasse hinzu, indem über eine NodeList-DOM-Sammlung iteriert wird.

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

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

Über ein Objekt mit einer [Symbol.iterator]()-Generatorfunktion iterieren:

const iterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  },
};

for (const value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Iterable Iterators (Iteratoren mit einer [Symbol.iterator]()-Methode, die this zurückgibt) sind eine ziemlich gängige Technik, um Iteratoren in Syntaxen, die Iterables erwarten, wie for...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

Die Ausführung der break-Anweisung in der ersten Schleife führt dazu, dass sie frühzeitig beendet wird. Der Iterator ist noch nicht abgeschlossen, daher wird die zweite Schleife dort fortgesetzt, 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ühzeitig beendet wird, wenn die Schleife beendet wird. Dies macht Generatoren zwischen 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 besteht darin, worüber sie iterieren.

Die for...in-Anweisung iteriert über die zählbaren String-Eigenschaften eines Objekts, während die for...of-Anweisung über die Werte iteriert, die das iterierbare Objekt zum Iterieren definiert.

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 zählbare Eigenschaften des iterable-Objekts. Sie protokolliert keine Array-Elemente 3, 5, 7 oder "hello", weil diese keine Eigenschaften sind — sie sind Werte. Sie protokolliert Array-Indizes sowie arrCustom und objCustom, die tatsächliche Eigenschaften sind. Wenn Sie nicht sicher sind, warum diese Eigenschaften iteriert werden, gibt es eine detailliertere Erklärung, wie Array-Iteration und for...in funktionieren.

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

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

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