From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../reference/statements/for...of/index.html | 183 +++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 files/de/web/javascript/reference/statements/for...of/index.html (limited to 'files/de/web/javascript/reference/statements/for...of/index.html') diff --git a/files/de/web/javascript/reference/statements/for...of/index.html b/files/de/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..4010e660e3 --- /dev/null +++ b/files/de/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,183 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - Experimental + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +
{{jsSidebar("Statements")}}
+ +

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

+ +

Syntax

+ +
for (variable of iterable) {
+  statement
+}
+
+ +
+
variable
+
Bei jedem Durchlauf wird variable der jeweils gefundene Wert zugewiesen.
+
iterable
+
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 {{jsxref("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 {{domxref("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;
+    console.log(n);
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ES2015')}}Initial definition.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(29)}}[1]
+ {{CompatChrome(38)}}		{{CompatGeckoDesktop("13")}}
+ {{CompatGeckoDesktop("17")}} (.iterator)
+ {{CompatGeckoDesktop("27")}} ("@@iterator")
+ {{CompatGeckoDesktop("36")}} (Symbol.iterator)		{{CompatNo}}257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome(29)}}[1]
+ {{CompatChrome(38)}}		{{CompatGeckoMobile("13")}}
+ {{CompatGeckoMobile("17")}} (.iterator)
+ {{CompatGeckoMobile("27")}} ("@@iterator")
+ {{CompatGeckoMobile("36")}} (Symbol.iterator)		{{CompatUnknown}}{{CompatUnknown}}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

+ + -- cgit v1.2.3-54-g00ecf