diff options
Diffstat (limited to 'files/ca/web/javascript/reference/statements/for...of/index.html')
-rw-r--r-- | files/ca/web/javascript/reference/statements/for...of/index.html | 182 |
1 files changed, 0 insertions, 182 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 deleted file mode 100644 index 0df66da1b8..0000000000 --- a/files/ca/web/javascript/reference/statements/for...of/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -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 > 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 > 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> |