1 files changed, 183 insertions, 0 deletions
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
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Mit dem <strong><code>for...of</code> statement</strong> können sogenannte <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> durchlaufen werden ({{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, das <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> Objekt und weitere eingeschlossen), wobei auf jeden gefundenen Wert eigene Statements ausgeführt werden können.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) {
+  <em>statement
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Bei jedem Durchlauf wird <em>variable</em> der jeweils gefundene Wert zugewiesen.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">iterable</span></font></dt>
+ <dd>Objekt, dessen aufzählbare Eigenschaften durchlaufen werden.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Unterschied_zwischen_for...of_und_for...in">Unterschied zwischen <code>for...of</code> und <code>for...in</code></h3>
+
+<p>Das folgende Beispiel zeigt den Unterschied zwischen einer <code>for...of</code> und einer <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> Schleife. Während <code>for...in</code> über die Namen der Eigenschaften läuft, geht <code>for...of</code> über deren Werte:</p>
+
+<pre class="brush:js">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"
+}
+</pre>
+
+<h3 id="Nutzen_von_Array.prototype.forEach">Nutzen von <code>Array.prototype.forEach()</code></h3>
+
+<p>Um dieselben Werte zu bekommen, die eine <code>for...of</code> Schleife zurückgeben würde, kann man auch die {{jsxref("Array.prototype.forEach()")}} Methode nutzen:</p>
+
+<pre class="brush: js">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"
+});</pre>
+
+<h3 id="Durchlaufen_von_DOM_collections">Durchlaufen von DOM collections </h3>
+
+<p>DOM collections wie {{domxref("NodeList")}} durchlaufen: Das folgende Beispiel fügt eine <code>read</code> class zu allen Paragraphen hinzu, die direkte Nachfolger eines Artikels sind:</p>
+
+<pre class="brush:js">// Notiz: Das wird nur auf Plattformen funktionieren, die
+// NodeList.prototype[Symbol.iterator] implementiert haben
+let articleParagraphs = document.querySelectorAll("article &gt; p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+</pre>
+
+<h3 id="Durchlaufen_von_Generatoren">Durchlaufen von Generatoren</h3>
+
+<p>Man kann auch <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generatoren</a> durchlaufen:</p>
+
+<pre class="brush:js">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 &gt; 1000)
+        break;
+    console.log(n);
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(29)}}<a href="#chrome-note-1">[1]</a><br>
+    {{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoDesktop("13")}}<br>
+    {{CompatGeckoDesktop("17")}} (.iterator)<br>
+    {{CompatGeckoDesktop("27")}} ("@@iterator")<br>
+    {{CompatGeckoDesktop("36")}} (Symbol.iterator)</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(29)}}<a href="#chrome-note-1">[1]</a><br>
+    {{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoMobile("13")}}<br>
+    {{CompatGeckoMobile("17")}} (.iterator)<br>
+    {{CompatGeckoMobile("27")}} ("@@iterator")<br>
+    {{CompatGeckoMobile("36")}} (Symbol.iterator)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a name="chrome-note-1"></a>[1] Dieses Feature ist als Option enthalten. In chrome://flags/#enable-javascript-harmony muss der Eintrag “Enable Experimental JavaScript” aktiviert werden.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - ein ähnliches Statement, durchläuft aber die Werte der Objekt-Eigenschaften statt der Namen der Eigenschaften selbst (veraltet).</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+</ul>