Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

I cicli offrono un modo semplice e rapido per fare cose ripetutamente. Questo capitolo della guida al JavaScript introduce i diversi metodi di iterazione disponibili in JavaScript.

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:

var step;
for (step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log('Walking east one step');
}

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). 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.

Le istruzioni per i loop forniti in JavaScript sono:

Ciclo for

Il ciclo for continua finché la condizione valutata non è falsa. Il fir loop JavaScript è simile a quello del Java e de C. L'istruzione for è definita come segue:

for ([espressioneIniziale]; [condizione]; [incremento])
  istruzione

Quando viene eseguito un ciclo for, questo è ciò che accade:

  1. espressioneIniziale, 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.
  2. La condizione viene verificata. Se il suo valore è true, l'espressione istruzione viene eseguita. Se invece condizione è false, il ciclo finisce. Se condizione è omessa, l'espressione si assume sia true.
  3. istruzione viene esguita. Per eseguire diverse istruzioni, è necessario usare il blocco ({ ... }) per raggrupparle.
  4. Viene incrementata la l'espressione incremento, se esiste, eseguita, e il ciclo for va al passo successivo.

Esempio

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

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

<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < 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))
});
</script>

Ciclo do...while

Il ciclo do...while si ripete finché la condizione non è falsa. Il do...while è viene definito come segue:

do
  istruzione
while (condizione);

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

Esempio

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

var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

Ciclo while

Il ciclo while esegue un'istruzione fino a quando una condizione è true. Ecco un esempio si un ciclo while:

while (condizione)
  istruzione   //...statement

Se condizione diventa false, istruzione non viene eseguita a si passa ad eseguire i comandi successivi.

Durante il ciclo condizione viene testata prima di eseguire istruzione. Se condizione è true, istruzione viene esguita e condizione viene verificata nuovamente. Se condizione è false il ciclo di ferma e viene eseguito il codice successivo al ciclo while.

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

Esempio 1

Il seguente esempio di ciclo while si ripete fino a quando n è minore di tre:

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

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

  • Dopo il primo passaggio: n = 1 and x = 1
  • Dopo il secondo passaggio: n = 2 and x = 3
  • Dopo il terzo passaggio: n = 3 and x = 6

Dopo aver completato il terzo passaggio, la condizione n < 3 non è più vera, quindi il ciclo termina.

Esempio 2

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 while vengono eseguite per sempre perché la condizione non diventa mai falsa:

while (true) {
  console.log("Buongiorno, Mondo");
}

etichettato istruzione (statement)

Un 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 breakcontinue per indicare se un programma deve interrompere il loop o continuare la sua esecuzione.

La sintassi dell'istruzione etichettata è simile alla seguente:

label :
   istruzione // statement

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

Esempio

In questo esempio, la label markLoop identifica un ciclo while.

markLoop:
while (theMark == true) {
   doSomething();
}

istruzione break

Utilizzare l'istruzione break per terminare un ciclo, uno switch o in congiunzione con un'istruzione etichettata.

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

La sintassi dell'istruzione break è simile a questa:

break [label];

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

Esempio 1

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 è theValue:

for (var i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

Esempio 2: Breaking to a label - Interruzione su un'etichetta

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 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

istruzione continue

The continue statement can be used to restart a while, do-while, for, or label statement.

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

La sintassi dell'istruzione continue ha il seguente aspetto:

continue [label];

Esempio 1

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

var i = 0;
var n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

Esempio 2

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

Se continue ha un'etichetta di checkiandj, il programma continuerà nella parte superiore del checkiandj istruzione.

var i = 0;
var j = 10;
checkiandj:
  while (i < 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j > 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);
}

Ciclo for...in

L'istruzione 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 for...in ha il seguente aspetto:

for (variabile in oggetto) {
  istruzione
}
// for (variable in object) {
//  statements
// }

Esempio

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.

function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}

Per un oggetto car con proprietà make e model, result sarebbe:

car.make = Ford
car.model = Mustang

Arrays / Matrici

Gli elementi, l'istruzione Array elements, the for...in restituirà il nome delle proprietà definite dall'utente in Oltre agli indici numerici. Quindi è meglio usare un ciclo tradizionale for con un indice numerico quando si itera su array, perché l'istruzione for...in itera oltre alle proprietà definite dall'utente oltre agli elementi dell'array, se si modifica l'oggetto Array, ad esempio l'aggiunta di proprietà o metodi personalizzati.

for...of Istruzione

L'istruzione for...of crea un loop Iterating over oggetti iterabili (including Array, Map, Set, arguments oggetto e così via), richiamando un aggancio di iterazione personalizzato con istruzioni da eseguire per il valore di ogni proprietà distinta.

for (variabile di oggetto) {
  istruzione
}

Il seguente esempio mostra la differenza tra un ciclo for...of e un for...in ciclo continuo. Mentre for...in itera sopra i nomi delle proprietà, for...of itera sui valori delle proprietà:

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"
}

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: ladysilvia, massimiliamanto, Cereal84
Ultima modifica di: ladysilvia,