1 files changed, 182 insertions, 0 deletions
diff --git a/files/ca/web/javascript/reference/statements/for...of/index.html b/files/ca/web/javascript/reference/statements/for...of/index.html
new file mode 100644
index 0000000000..0df66da1b8
--- /dev/null
+++ b/files/ca/web/javascript/reference/statements/for...of/index.html
@@ -0,0 +1,182 @@
+---
+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>