for...of

Dieser Artikel benötigt eine technische Überprüfung. So können Sie helfen.

Dieser Artikel benötigt eine redaktionelle Überprüfung. So können Sie helfen.

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

Mit dem for...of statement können sogenannte iterable objects durchlaufen werden (ArrayMap, Set, das arguments Objekt und weitere eingeschlossen), wobei auf jeden gefundenen Wert eigene Statements ausgeführt werden können.

Syntax

for (variable of object) {
  statement
}
variable
Bei jedem Durchlauf wird variable der jeweils gefundene Wert zugewiesen.
object
Objekt, dessen aufzählbare Eigenschaften durchlaufen werden.

Beispiele

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

Das folgende Beispiel zeigt den Unterschied zwischen einer for...of und einer for...in Schleife. Während for...in über die Namen der Eigenschaften läuft, geht for...of über deren Werte:

let arr = [3, 5, 7];
arr.foo = "hallo";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

Nutzen von Array.prototype.forEach()

Um dieselben Werte zu bekommen, die eine for...of Schleife zurückgeben würde, kann man auch die Array.prototype.forEach() Methode nutzen:

let arr = [3, 5, 7];
arr.foo = "hallo";

arr.forEach(function (element, index) {
    console.log(element); // logs "3", "5", "7"
    console.log(index);   // logs "0", "1", "2"
});

// or with Object.keys()

Object.keys(arr).forEach(function (element, index) {
    console.log(arr[element]); // logs "3", "5", "7", "hallo"
    console.log(arr[index]);   // logs "3", "5", "7"
});

Durchlaufen von DOM collections 

DOM collections wie NodeList durchlaufen: Das folgende Beispiel fügt eine read class zu allen Paragraphen hinzu, die direkte Nachfolger eines Artikels sind:

// Notiz: Das wird nur auf Plattformen funktionieren, die
// NodeList.prototype[Symbol.iterator] implementiert haben
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

Durchlaufen von Generatoren

Man kann auch Generatoren durchlaufen:

function* fibonacci() { // ein Generator
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // die Sequence bei 1000 abbrechen
    if (n > 1000)
        break;
    print(n);
}

Spezifikation

Spezifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'for...of statement' in dieser Spezifikation.
Standard Initial definition.

Browserkompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 29[1]
38
13 (13)
17 (17) (.iterator)
27 (27) ("@@iterator")
36 (36) (Symbol.iterator)
Nicht unterstützt 25 7.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 29[1]
38
13.0 (13)
17.0 (17) (.iterator)
27.0 (27) ("@@iterator")
36.0 (36) (Symbol.iterator)
? ? iOS 8

[1] Dieses Feature ist als Option enthalten. In chrome://flags/#enable-javascript-harmony muss der Eintrag “Enable Experimental JavaScript” aktiviert werden.

See also

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Narigo
 Zuletzt aktualisiert von: Narigo,