path: root/files/ca/web/javascript/referencia/sentencies/for/index.html

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

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

<p>La<strong> sentència</strong> <strong>for</strong> crea un bucle que consta de tres expressions opcionals, embolcallades entre paràntesis i separades per punts i comes, seguits d'una sentència o un grup de sentències executades en el bucle.</p>

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

<pre class="syntaxbox">for ([<em>inicialització</em>]; [<em>condició</em>]; [<em>expressió final</em>])
   <em>sentència</em>
</pre>

<dl>
 <dt><code>inicialització</code></dt>
 <dd>Una expressió (incloent expressions d'assignació) o declaració de variables. Normalment s'usa per inicialitzar una variable al contador. Opcionalment aquesta expressió pot declarar noves variables amb la paraula clau <code>var</code>.  Aquestes variables no sóc locals pel bucle, és a dir, es troben en el mateix àmbit en que es troba el bucle <code>for</code>. El resultat d'aquesta expressió es descarta.</dd>
 <dt><code>condició</code></dt>
 <dd>Una expressió que s'avalua abans de cada iteració del bucle. Si aquesta expressió s'avalua<strong> true,</strong> s'executa la <code>sentència</code>. Aquesta prova condicional és opcional. Si s'omet, la condició sempre avalua<strong> true.</strong> Si l'expressió avalua a false, l'execució salta a la primera expressió que es trobi després del constructe <code>for</code>.</dd>
 <dt><code>Expressió final</code></dt>
 <dd>Una expressió per ser avaluada al final de cada iteració del bucle. Això passa abans de la següent avaluació de <code>condició</code>. Generalment s'usa per actualitzar o incrementar la variable contador.</dd>
 <dt><code>sentència</code></dt>
 <dd>Una sentència que s'executa mentre la condició avalui a true. Per executar múltiples sentències dins el bucle, utilitzeu una sentència <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> (<code>{ ... }</code>) per agrupar aquestes sentències. Per no executar cap sentència dins el bucle, utilitzeu una sentència <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">buida</a>  (<code>;</code>).</dd>
</dl>

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

<h3 id="Example.3A_Using_for" name="Example.3A_Using_for">Exemple: Fer servir <code>for</code></h3>

<p>La següent sentència <code>for</code> comença declarant la variable <code>i</code> i l'inicialitza a <code>0</code>. Comprova que  <code>i</code> és menor que nou, realitza les dues sentències següents<u>, i incrementa <code>i</code> per 1 després de cada pas pel bucle.</u></p>

<pre class="brush: js">for (var i = 0; i &lt; 9; i++) {
   console.log(i);
   // more statements
}
</pre>

<h3 id="Exemple_Expressions_for_opcionals"><u>Exemple: Expressions <code>for</code> opcionals</u></h3>

<p>Les tres expressions en la capçalera del bucle <code>for</code> són opcionals.</p>

<p>Per exemple, enel bloc d'<em>inicialització</em> no es requereix inicialitzar les variablesblock it is not required to initialize variables:</p>

<pre class="brush: js">var i = 0;
for (; i &lt; 9; i++) {
    console.log(i);
    // more statements
}
</pre>

<p><u>Com el bloc d'<em>inicialització</em>, el bloc de <em>condició</em> també és opcional. Si s'omet aquesta expressió, s'ha de d'assegurar de trencar el bucle en el cos per evitar crear un bucle infinit.</u></p>

<pre class="brush: js">for (var i = 0;; i++) {
   console.log(i);
   if (i &gt; 3) break;
   // more statements
}</pre>

<p>També es pot ometre els tres blocs. Un alre cop, assegureu-vos de fer servir la sentència <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a></code> per finalitzar el bucle i també modificar (incrementar) una variable, de forma que la condició per la sentència break esdevé certa en algun moment determinat.</p>

<pre class="brush: js">var i = 0;

for (;;) {
  if (i &gt; 3) break;
  console.log(i);
  i++;
}
</pre>

<h3 id="Example.3A_Using_for_without_the_statement_section" name="Example.3A_Using_for_without_the_statement_section"><u>Exemple: Fer servir <code>for</code> amb una sentència buida</u></h3>

<p><u>El cicle <code>for</code> següent callcula la possició de desplaçament d'un node en la secció  <em>[expressió final]</em>, i per tant no requereix l'ús d'una <code>sentència</code> o secció de sentències <code><a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a></code>, es fa servir una sentència <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">buida</a> en el seu lloc</u>.</p>

<pre class="brush: js">function showOffsetPos (sId) {
  var nLeft = 0, nTop = 0;

  for (var oItNode = document.getElementById(sId); // initialization
       oItNode; // condition
       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression
       /* empty statement */ ;

  console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
}

// Example call:

showOffsetPos("content");

// Output:
// "Offset position of "content" element:
// left: 0px;
// top: 153px;"</pre>

<div class="note"><strong>Nota:</strong> En aquest cas, quan no es fa servir la secció <code>sentència</code>, <strong>es fica un punt i coma immediatament despres de la declaració del cicle</strong>.</div>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentaris</th>
  </tr>
  <tr>
   <td>1a edició de ECMAScript.</td>
   <td>Estàndard</td>
   <td>Definició inicial.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </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>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</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>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Vegeu també</h2>

<ul>
 <li>{{jsxref("Statements/break", "break")}}</li>
 <li>{{jsxref("Statements/continue", "continue")}}</li>
 <li>{{jsxref("Statements/empty", "empty")}}</li>
 <li>{{jsxref("Statements/while", "while")}}</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a></li>
 <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></code></li>
</ul>