for...of

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

Empfngt 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 Gltigkeitsbereich, in dem die for...of Schleife steht.

iterable

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

statement

Eine Anweisung, die bei jeder Iteration ausgefhrt wird. Kann auf variable referieren. Sie knnen eine Blockanweisung verwenden, um mehrere Anweisungen auszufhren.

Beschreibung

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 fhrt Anweisungen aus, die auf den aktuellen Sequenzwert verweisen knnen.

Wenn eine for...of-Schleife ber ein iterierbares Objekt iteriert, ruft sie zuerst die [Symbol.iterator]() Methode des iterierbaren Objekts auf, welche einen Iterator zurckgibt 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 wird beendet, wenn der Iterator abgeschlossen ist (das next()-Resultat ist ein Objekt mit done: true). Wie bei anderen Schleifenanweisungen knnen Sie innerhalb der statement Anweisung Kontrollflussanweisungen verwenden:

• break unterbricht die Ausfhrung der statement und geht zur ersten Anweisung nach der Schleife.
• continue unterbricht die Ausfhrung der statement und geht zur nchsten Iteration der Schleife ber.

Wenn die for...of-Schleife frhzeitig beendet wurde (z. B. wird eine break-Anweisung getroffen oder ein Fehler ausgelst), wird die return() Methode des Iterators aufgerufen, um jegliche Aufrumarbeiten durchzufhren.

Der variable Teil von for...of akzeptiert alles, was vor dem = Operator stehen kann. Sie knnen const verwenden, um die Variable zu deklarieren, solange sie nicht innerhalb des Schleifenkrpers neu zugewiesen wird (sie kann zwischen Iterationen gendert werden, da es sich um zwei separate Variablen handelt). Andernfalls knnen 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 entsorgt, wenn eine Schleifeniteration abgeschlossen ist (und await using fhrt 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).

const resources = [dbConnection1, dbConnection2, dbConnection3];

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

Sie knnen Destrukturierung verwenden, um mehrere lokale Variablen zuzuweisen, oder einen Eigenschafts-Accessor wie for (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 ungltige 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, Syntaxambiguitt mit dem gltigen Code for (async of => {};;) zu vermeiden, welches eine for Schleife ist.

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

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

Dies dient dazu, Syntaxambiguitt mit dem gltigen Code for (using of []) zu vermeiden, bevor using eingefhrt 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 werden durch 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 knnen ber das arguments-Objekt iterieren, um alle Parameter zu berprfen, 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 fgt Klassen read zu Abstzen hinzu, die direkte Nachkommen des <article> Elements sind, indem ber eine DOM-Sammlung von NodeList 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 zurckgibt:

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 zurckgeben) sind eine recht hufige 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

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

Frhes Beenden

Ausfhrung der break-Anweisung in der ersten Schleife verursacht, dass diese frhzeitig beendet wird. Der Iterator ist noch nicht fertig, sodass die zweite Schleife dort fortfhrt, 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 fhrt, dass die Generatorfunktion frh zurckkehrt, 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

Sowohl for...in als auch for...of-Anweisungen iterieren ber etwas. Der Hauptunterschied zwischen ihnen besteht darin, worber sie iterieren.

Die for...in-Anweisung iteriert ber die enumerierten String-Eigenschaften eines Objekts, whrend die for...of-Anweisung ber die Werte iteriert, die das iterierbare Objekt definiert, um darber 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 enthlt.

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 tatschliche Eigenschaften sind. Wenn Sie sich nicht sicher sind, warum diese Eigenschaften iteriert werden, gibt es eine ausfhrlichere Erklrung, wie Array-Iteration und for...in funktioniert.

Die zweite Schleife hnelt der ersten, verwendet jedoch Object.hasOwn(), um zu berprfen, 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.

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

Spezifikationen

Browser-Kompatibilitt

Siehe auch

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