path: root/files/it/web/javascript/guide/loops_and_iteration/index.html

---
title: Cicli e iterazioni
slug: Web/JavaScript/Guide/Loops_and_iteration
tags:
  - Guide
  - JavaScript
  - Loop
  - Sintassi
translation_of: Web/JavaScript/Guide/Loops_and_iteration
original_slug: Web/JavaScript/Guida/Loops_and_iteration
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>

<p class="summary">I cicli offrono un modo semplice e rapido per fare cose ripetutamente. Questo capitolo della <a href="/en-US/docs/Web/JavaScript/Guide">guida al JavaScript</a> introduce i diversi metodi di iterazione disponibili in JavaScript.</p>

<p>Si può pensare al loop come ad una versione computerizzata di un gioco dove si dice a qualcuno di andare X passi in una direzione e Y passi in un'atra; per esempio "vai 5 passi a est" può essere espresso in questo modo con un loop:</p>

<pre class="brush: js notranslate">var passi;
for (passi = 0; passi &lt; 5; passi++) {
  // Viene eseguito 5 volte, con un valore di passi che va da 0 a 4.
  console.log('Fai un passo verso est');
}
</pre>

<p>Ci sono differenti tipi di ciclo, ma sono essenzialmente tutti la stessa cosa: ripetono un'azione o un insieme di azioni un certo numero di volte (è possibile che questo numero sia anche 0).</p>

<p>I diversi meccanismi di ciclo offrono differenti modi di determinare l'inizio e la fine del ciclo. Ci sono casi che si prestano più ad un tipo di ciclo rispetto ad altri.</p>

<p>Le istruzioni per i loop foriti in JavaScript sono:</p>

<ul>
 <li>{{anch("ciclo for")}}</li>
 <li>{{anch("ciclo do...while")}}</li>
 <li>{{anch("ciclo while")}}</li>
 <li>{{anch("labeled statement")}}</li>
 <li>{{anch("break statement")}}</li>
 <li>{{anch("continue statement")}}</li>
 <li>{{anch("ciclo for...in")}}</li>
 <li>{{anch("ciclo for...of")}}</li>
</ul>

<h2 id="Istruzione_for">Istruzione <code>for</code></h2>

<p>Il {{jsxref("statements/for","ciclo for")}} continua finché la condizione valutata non è falsa. Il fir loop JavaScript è simile a quello del Java e de C. L'istruzione <code>for</code> è definita come segue:</p>

<pre class="syntaxbox notranslate">for ([espressioneIniziale]; [condizione]; [incremento])
  istruzione
</pre>

<p>Quando viene eseguito un ciclo <code>for</code>, questo è ciò che accade:</p>

<ol>
 <li><code>espressioneIniziale</code>, se esiste, viene eseguita. L'espressione di solito inizializza uno o più indici, ma la sintassi permette di scrivere espressioni con diversi gradi di compessità. Questa espressione può anche dichiarare delle variabili.</li>
 <li>La <code>condizione</code> viene verificata. Se il suo valore è true, l'espressione <code>istruzione</code> viene eseguita. Se invece <code>condizione</code> è false, il ciclo finisce. Se <code>condizione</code> è omessa, l'espressione si assume sia true.</li>
 <li><code>istruzione</code> viene esguita. Per eseguire diverse istruzioni, è necessario usare il blocco (<code>{ ... }</code>) per raggrupparle.</li>
 <li>Viene incrementata la l'espressione <code>incremento</code>, se esiste, eseguita, e il ciclo <code>for</code> va al passo successivo.</li>
</ol>

<h3 id="Esempio"><strong>Esempio</strong></h3>

<p>Il seguente esempio contiene un ciclo <code>for</code> che conta il numero di opzioni selezionate in una lista a scorrimento (a {{HTMLElement("select")}} che permette selezioni multiple). L'istruzione <code>for</code> dichiara una variabile <code>i</code> e la inizializza a zero. Controlla che <code>i</code> sia minore del numero di opzioni dell'elemento <code>&lt;select&gt;</code> , esegue l'istruzione <code>if</code> e incrementa <code>i</code> di uno alla fine di ogni ciclo.</p>

<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
  &lt;p&gt;
    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
      &lt;option&gt;Jazz&lt;/option&gt;
      &lt;option&gt;Blues&lt;/option&gt;
      &lt;option&gt;New Age&lt;/option&gt;
      &lt;option&gt;Classical&lt;/option&gt;
      &lt;option&gt;Opera&lt;/option&gt;
    &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt;&lt;input id="btn" type="button" value="Quanti sono selezionati?" /&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;script&gt;
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i &lt; selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
});
&lt;/script&gt;

</pre>

<h2 id="Istruzione_do...while">Istruzione<code> do...while</code></h2>

<p>Il ciclo {{jsxref("statements/do...while", "do...while")}} si ripete finché la <code>condizione</code> non è falsa. Il <code>do...while</code> è viene definito come segue:</p>

<pre class="syntaxbox notranslate">do
  istruzione
while (condizione);
</pre>

<p>l'<code>istruzione</code> viene eseguita una volta prima che la <code>condizione</code> venga controllata. Per eseguire più istruzioni, è necessario usare il blocco (<code>{ ... }</code>) . Se la <code>condizione</code> è vera l'<code>istruzione</code> viene eseguita nuovamente. Alla fine di ogni esecuzione di <code>istruzione</code>, <code>condizione</code> viene controllata. Quando <code>condizione</code> è falsa l'esecuzione del ciclo <code>do..while</code> termina.</p>

<h3 id="Esempio_2"><strong>Esempio</strong></h3>

<p>Nel seguente esempio il ciclo do..while itera almeno una volta e continua finché il valore di <code>i</code> è minore di 5.</p>

<pre class="brush: js notranslate">var i = 0;
do {
  i += 1;
  console.log(i);
} while (i &lt; 5);</pre>

<h2 id="Istruzione_while">Istruzione <code>while</code></h2>

<p><code><font face="Open Sans, arial, sans-serif">Il ciclo</font> </code>{{jsxref("statements/while","while")}} esegue un'<code>istruzione</code> fino a quando una <code>condizione</code> è true. Ecco un esempio si un ciclo <code>while</code>:</p>

<pre class="syntaxbox notranslate">while (condizione)
  istruzione   //...statement
</pre>

<p>Se <code>condizione</code> diventa false, <code>istruzione</code> non viene eseguita a si passa ad eseguire i comandi successivi.</p>

<p>Durante il ciclo c<code>ondizione</code> viene testata prima di eseguire <code>istruzione</code>. Se c<code>ondizione </code>è true, <code>istruzione</code> viene esguita e c<code>ondizione</code> viene verificata nuovamente. Se <code>condizione</code> è false il ciclo di ferma e viene eseguito il codice successivo al ciclo <code>while</code>.</p>

<p>Per eseguire istruzioni multiple, è necessario usare il blocco ({ ... }) così da raggruppare le istruzioni.</p>

<h3 id="Esempio_1"><strong>Esempio 1</strong></h3>

<p>Il seguente esempio di ciclo <code>while</code> si ripete fino a quando <code>n</code> è minore di tre:</p>

<pre class="brush: js notranslate">var n = 0;
var x = 0;
while (n &lt; 3) {
  n++;
  x += n;
}
</pre>

<p>Ad ogni iterazione, il ciclo incrementa n e aggiunge quel valore a x. Pertanto,<code>x</code> e <code>n</code> assumono i seguenti valori:</p>

<ul>
 <li>Dopo il primo passaggio: <code>n</code> = 1 and <code>x</code> = 1</li>
 <li>Dopo il secondo passaggio: <code>n</code> = 2 and <code>x</code> = 3</li>
 <li>Dopo il terzo passaggio: <code>n</code> = 3 and <code>x</code> = 6</li>
</ul>

<p>Dopo aver completato il terzo passaggio, la condizione <code>n &lt; 3</code> non è più vera, quindi il ciclo termina.</p>

<h3 id="Esempio_2_2"><strong>Esempio 2</strong></h3>

<p>Evita loop infiniti. Assicurati che la condizione in un loop alla fine diventi falsa; altrimenti, il ciclo non terminerà mai. Le istruzioni nel seguente ciclo <code>while</code> vengono eseguite per sempre perché la condizione non diventa mai falsa:</p>

<div class="blockIndicator warning">
<pre class="brush: js notranslate">//I loop infiniti non vanno affatto bene
while (true) {
  console.log("Buongiorno, Mondo");
}</pre>
</div>

<h2 id="Istruzione_etichettata">Istruzione "etichettata"</h2>

<p>Un {{jsxref("statements/label","label")}} fornisce un'istruzione con un identificatore che ti consente di fare riferimento ad esso altrove nel tuo programma. Ad esempio, è possibile utilizzare un'etichetta per identificare un ciclo e quindi utilizzare le istruzioni <code>break</code> o <code>continue</code> per indicare se un programma deve interrompere il loop o continuare la sua esecuzione.</p>

<p>La sintassi dell'istruzione etichettata è simile alla seguente:</p>

<pre class="syntaxbox notranslate">label :
   istruzione // statement
</pre>

<p>Il valore dell'etichetta <code><em>label </em></code>può essere qualsiasi identificatore JavaScript che non sia una parola riservata. L'affermazione che ti identifichi con un'etichetta <code><em>statement</em></code> può essere una qualsiasi affermazione.</p>

<h3 id="Esempio_3"><strong>Esempio</strong></h3>

<p>In questo esempio, la label <code>markLoop</code> identifica un ciclo <code>while</code>.</p>

<pre class="brush: js notranslate">markLoop:
while (theMark == true) {
   doSomething();
}</pre>

<h2 id="Istruzione_break">Istruzione <code>break</code></h2>

<p>Utilizzare l'istruzione {{jsxref("statements/break","break")}} per terminare un ciclo, uno <code>switch</code> o in congiunzione con un'istruzione etichettata.</p>

<ul>
 <li>Quando si utilizza <code>break</code> senza un'etichetta, termina l'enclosure più interno <code>while</code>, <code>do-while</code>, <code>for</code>, o <code>switch</code> immediatamente e trasferisce il controllo alla seguente istruzione.</li>
 <li>Quando usi la <code>break</code> con un'etichetta, termina l'istruzione etichettata specificata.</li>
</ul>

<p>La sintassi dell'istruzione <code>break</code> è simile a questa:</p>

<pre class="syntaxbox notranslate">break [<em>label</em>];
</pre>

<p>La prima forma della sintassi termina il ciclo <code>switch</code> di chiusura più interno; la seconda forma della sintassi termina l'istruzione dell'etichettata specificata.</p>

<h3 id="Esempio_1_2"><strong>Esempio</strong> <strong>1</strong></h3>

<p>L'esempio seguente esegue iterazioni attraverso gli elementi di un array (una matrice) fino a quando non trova l'indice di un elemento il cui valore è <code>theValue</code>:</p>

<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}</pre>

<h3 id="Esempio_2_Breaking_to_a_label_-_Interruzione_su_unetichetta"><strong>Esempio 2: </strong>Breaking to a label - Interruzione su un'etichetta</h3>

<pre class="brush: js notranslate">var x = 0;
var z = 0;
labelCancelLoops: while (true) {
  console.log("Outer loops: " + x);
  x += 1;
  z = 1;
  while (true) {
    console.log("Inner loops: " + z);
    z += 1;
    if (z === 10 &amp;&amp; x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}</pre>

<h2 id="Istruzione_continue">Istruzione <code>continue</code></h2>

<p>The {{jsxref("statements/continue","continue")}} statement can be used to restart a <code>while</code>, <code>do-while</code>, <code>for</code>, or <code>label</code> statement.</p>

<ul>
 <li>Quando usi <code>continue</code> senza un'etichetta, termina l'iterazione corrente dell'istruzione racchiudente, mentre <code>while</code>, <code>do-while</code>, o <code>for</code> continua l'esecuzione del ciclo con l'iterazione successiva. In contrasto con l'istruzione <code>break</code>, <code>continue</code> non termina interamente l'esecuzione del ciclo. In un ciclo <code>while</code>, torna alla condizione. In un ciclo <code>for</code>, salta all'espressione di incremento <code>increment-expression</code>.</li>
 <li>Quando si utilizza <code>continue</code> con un'etichetta, si applica all'istruzione looping identificata con tale etichetta.</li>
</ul>

<p>La sintassi dell'istruzione <code>continue</code> ha il seguente aspetto:</p>

<pre class="syntaxbox notranslate"><code>continue</code> [<em>label</em>];
</pre>

<h3 id="Esempio_1_3"><strong>Esempio 1</strong></h3>

<p>L'esempio seguente mostra un ciclo <code>while</code> con un'istruzione <code>continue</code> che viene eseguita quando il valore di <code>i</code> è tre. Quindi, <code>n</code> assume i valori uno, tre, sette e dodici.</p>

<pre class="brush: js notranslate">var i = 0;
var n = 0;
while (i &lt; 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}</pre>

<h3 id="Esempio_2_3"><strong>Esempio 2</strong></h3>

<p>Una dichiarazione etichettata <em><code>checkiandj</code> </em>contiene una dichiarazione etichettata <em><code>checkj</code></em>. Se si incontra <code>continue</code> il programma termina l'iterazione corrente di <em><code>checkj</code></em> e inizia la successiva iterazione. Ogni volta che si incontra <code>continue</code>, <em><code>checkj</code></em> viene reiterato finché la condizione non restituisce <code>false</code>. Quando viene restituito <code>false</code>, il resto dell'istruzione <em><code>checkiandj</code></em> è completato e <em><code>checkiandj</code></em> reiterate fino a quando la condizione non restituisce <code>false</code>. Quando viene restituito <code>false</code>, il programma continua con la seguente istruzione <em><code>checkiandj</code></em>.</p>

<p>Se <code>continue</code> ha un'etichetta di <em><code>checkiandj</code></em>, il programma continuerà nella parte superiore del <em><code>checkiandj</code></em> istruzione.</p>

<pre class="brush: js notranslate">var i = 0;
var j = 10;
checkiandj:
  while (i &lt; 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j &gt; 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue checkj;
        }
        console.log(j + ' is odd.');
      }
      console.log('i = ' + i);
      console.log('j = ' + j);
}</pre>

<h2 id="Istruzione_for...in">Istruzione <code>for...in</code></h2>

<p>L'istruzione {{jsxref("statements/for...in","for...in")}} itera una variabile specificata su tutte le proprietà enumerabili di un oggetto. Per ogni proprietà distinta, JavaScript esegue le istruzioni specificate. L'istruzione <code>for...in</code> ha il seguente aspetto:</p>

<pre class="syntaxbox notranslate">for (variabile in oggetto) {
  istruzione
}
// for (variable in object) {
//  statements
// }
</pre>

<h3 id="Esempio_4"><strong>Esempio</strong></h3>

<p>La seguente funzione prende come argomento un oggetto e il nome dell'oggetto. Quindi itera su tutte le proprietà dell'oggetto e restituisce una stringa che elenca i nomi delle proprietà e i loro valori.</p>

<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
  }
  result += "&lt;hr&gt;";
  return result;
}
</pre>

<p>Per un oggetto <code>car</code> con proprietà <code>make</code> e <code>model</code>, <code>result</code> sarebbe:</p>

<pre class="brush: js notranslate">car.make = Ford
car.model = Mustang
</pre>

<h3 id="Arrays_Matrici"><strong>Arrays / Matrici</strong></h3>

<p>Anche se può essere allettante usarla come un modo per iterare sugli elementi {{jsxref("Array")}} , l'istruzione the <strong>for...in</strong> restituirà il nome delle proprietà definite dall'utente oltre agli indici numerici. Quindi è meglio usare un ciclo tradizionale {{jsxref("statements/for","for")}} con un indice numerico quando si itera su array, perché l'istruzione <strong>for...in</strong> itera sulle proprietà definite dall'utente oltre agli elementi dell'array, se si modifica l'oggetto Array, (come ad esempio l'aggiunta di proprietà o metodi personalizzati).</p>

<h2 id="Istruzione_for...of">Istruzione <code>for...of</code></h2>

<p>L'istruzione {{jsxref("statements/for...of","for...of")}} crea un ciclo che itera su <a href="/en-US/docs/Web/JavaScript/Guide/iterable">oggetti iterabili</a> (inclusi oggetti di tipo {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} e così via), richiamando un aggancio di iterazione personalizzato con istruzioni da eseguire per il valore di ogni proprietà distinta.</p>

<pre class="syntaxbox notranslate">for (<em>variabile</em> di <em>oggetto</em>) {
  <em>istruzione
</em>}</pre>

<p>Il seguente esempio mostra la differenza tra un ciclo <code>for...of</code> e un {{jsxref("statements/for...in","for...in")}} ciclo continuo. Mentre <code>for...in</code> itera sopra i nomi delle proprietà, <code>for...of</code> itera sui valori delle proprietà:</p>

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

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>

<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>