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

---
title: for...of
slug: Web/JavaScript/Reference/Statements/for...of
translation_of: Web/JavaScript/Reference/Statements/for...of
original_slug: Web/JavaScript/Referencia/Sentencies/for...of
---
<div>
<div>{{jsSidebar("Statements")}}</div>
</div>

<h2 id="Summary" name="Summary">Resum</h2>

<p>La instrucció <code>for...of</code> crea un bucle que itera sobre <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">objectes iterables</a> (incloent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objecte <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a>, etcètera), tot invocant un bloc de codi amb les instruccions a executar per a cada valor de la propietat.</p>

<h2 id="Sintaxi">Sintaxi</h2>

<pre class="syntaxbox">for (<em>variable</em> of <em>objecte</em>)
  codi
</pre>

<dl>
 <dt><code>variable</code></dt>
 <dd>A cada iteració el valor d'una propietat diferent és asignat a <em>variable</em>.</dd>
 <dt><code>object</code>e</dt>
 <dd>L'objecte del qual s'iteren les propietats, que són iterables.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<h3 id="Diferència_entre_for...of_i_for...in">Diferència entre <code>for...of</code> i <code>for...in</code></h3>

<p>El següent exemple mostra la diferència entre el bucle <code>for...of</code> i el bucle <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>. Mentre <code>for...in</code> itera sobre noms de propietats, <code>for...of</code> itera sobre els valors de les propietats:</p>

<pre class="brush:js">let arr = [3, 5, 7];
arr.foo = "hola";

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

for (let i of arr) {
   console.log(i); // mostra "3", "5", "7"
}
</pre>

<h3 id="Ús_de_Array.prototype.forEach()">Ús de <code>Array.prototype.forEach()</code></h3>

<p>Per a aconseguir els mateixos valors que s'obtenen amb <code>for...of</code> també es pot utilitzar el mètode {{jsxref("Array.prototype.forEach()")}}:</p>

<pre class="brush: js">let arr = [3, 5, 7];
arr.foo = "hola";

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

// or with Object.keys()

Object.keys(arr).forEach(function (element, index) {
    console.log(arr[element]); // mostra "3", "5", "7", "hello"
    console.log(arr[index]);   // mostra "3", "5", "7"
});</pre>

<h3 id="Iteració_de_coleccions_del_DOM">Iteració de coleccions del DOM</h3>

<p>Iterant sobre coleccions del DOM com {{domxref("NodeList")}}: el següent exemple afegeix la classe <code>read</code> als paràgrafs que són descendens directes d'un article:</p>

<pre class="brush:js">// Nota: Això només funcionarà en plataformes que
// implementen NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article &gt; p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}
</pre>

<h3 id="Iteració_de_generadors">Iteració de generadors:</h3>

<p>Els <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">generadors</a> també són iterables:</p>

<pre class="brush:js">function* fibonacci() { // una funció generadora
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // trunca la seqüència als 1000
    if (n &gt; 1000)
        break;
    print(n);
}
</pre>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</h2>

<p>{{CompatibilityTable()}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</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>Característica</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>Suport bàsic</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] La característica està disponible sota una preferència. A chrome://flags/#enable-javascript-harmony, activar la entrada “Enable Experimental JavaScript”.</p>

<h2 id="Vegeu_també">Vegeu també</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - una instrucció similar, però itera els valors de les propietats d'un objecte en comptes de les propietats mateixes de l'objecte (en desús).</li>
 <li>{{jsxref("Array.prototype.forEach()")}}</li>
</ul>