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 (Array
, Map
, 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
- for each...in - ein ähnliches Statement, durchläuft aber die Werte der Objekt-Eigenschaften statt der Namen der Eigenschaften selbst (veraltet).
Array.prototype.forEach()