path: root/files/de/web/javascript/reference/statements/for...of/index.html

---
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>