for...of

for (variable of iterable)
  statement

variable

Empfängt bei jeder Iteration einen Wert aus der Folge. Kann entweder eine Deklaration mit const, let oder var sein oder ein Zuweisungsziel (z.B. eine vorher deklarierte Variable, eine Objekteigenschaft oder ein Destrukturierungsmuster). Variablen, die mit var deklariert sind, sind nicht lokal zur Schleife, d.h. sie befinden sich im selben Gültigkeitsbereich wie die for...of-Schleife.

iterable

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

statement

Ein auszuführender Ausdruck bei jeder Iteration. Kann sich auf variable beziehen. Sie können einen Blockausdruck verwenden, um mehrere Ausdrücke auszuführen.

Eine for...of-Schleife operiert der Reihe nach auf den Werten, die aus einem iterierbaren Objekt stammen. Jede Ausführung der Schleife auf einem Wert wird als Iteration bezeichnet, und die Schleife soll über das iterable iterieren. Jede Iteration führt Ausdrücke aus, die sich auf den aktuellen Wert der Folge beziehen können.

Wenn eine for...of-Schleife über ein iterables Objekt iteriert, wird zuerst die [Symbol.iterator]()-Methode des iterables Objekts aufgerufen, die einen Iterator zurückgibt, und dann wiederholt die Methode next() des resultierenden Iterators aufgerufen, um die Wertefolge zu erzeugen, die variable zugewiesen werden.

Eine for...of-Schleife wird beendet, wenn der Iterator abgeschlossen ist (das next()-Ergebnis ist ein Objekt mit done: true). Wie bei anderen 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 Iteration der Schleife.

Wenn die for...of-Schleife vorzeitig beendet wurde (z.B. wenn eine break-Anweisung auftritt oder ein Fehler geworfen wird), wird die return()-Methode des Iterators aufgerufen, um eine Bereinigung vorzunehmen.

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 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

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

Jedoch verbietet eine spezielle Regel die Verwendung von async als Variablennamen. 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 Code for (async of => {};;) zu vermeiden, welcher 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 in eine Funktion übergebenen Parameter zu überprüfen.

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

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

Das folgende Beispiel fügt Absätzen, die direkte Nachkommen des <article>-Elements sind, durch Iteration über eine NodeList-DOM-Sammlung eine read-Klasse hinzu.

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

Iteration ü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

Iteration über ein Objekt mit einer [Symbol.iterator]()-Generator-Methode:

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 übliche Technik, um Iteratoren für Syntaxen nutzbar zu machen, 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 sie vorzeitig beendet wird. Der Iterator ist noch nicht fertig, also wird die zweite Schleife 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ühzeitig zurückkehrt, 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 besteht darin, worüber sie iterieren.

Die for...in-Anweisung iteriert über die auflistbaren String-Eigenschaften eines Objekts, während die for...of-Anweisung über Werte iteriert, die das iterierbare Objekt definiert, über die iteriert werden soll.

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, da es sowohl Object.prototype als auch Array.prototype in seiner Prototyp-Kette enthält.

Die for...in-Schleife protokolliert nur auflistbare 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 die Array-Indizes sowie arrCustom und objCustom, die tatsächliche Eigenschaften sind. Wenn Sie sich nicht sicher sind, warum diese Eigenschaften über iteriert werden, gibt es eine detailliertere Erklärung, wie Array-Iteration und for...in funktionieren.

Die zweite Schleife ist der ersten ähnlich, verwendet jedoch Object.hasOwn(), um zu überprüfen, ob die gefundene auflistbare Eigenschaft die eigene des Objekts ist, also nicht geerbt wurde. Falls ja, 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.

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

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