Cicli e iterazioni

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 passi;
for (passi = 0; passi < 5; passi++) {
  // Viene eseguito 5 volte, con un valore di passi che va da 0 a 4.
  console.log('Fai un passo verso est');
}

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 foriti in JavaScript sono:

• ciclo for
• ciclo do...while
• ciclo while
• labeled statement
• break statement
• continue statement
• ciclo for...in
• ciclo for...of

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.

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>

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.

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

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.

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.

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:

//I loop infiniti non vanno affatto bene
while (true) {
  console.log("Buongiorno, Mondo");
}

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 break o continue 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.

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

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

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.

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

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

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];

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

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);
}

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

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

Anche se può essere allettante usarla come un modo per iterare sugli elementi Array , l'istruzione the for...in restituirà il nome delle proprietà definite dall'utente 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 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).

L'istruzione for...of crea un ciclo che itera su oggetti iterabili (inclusi oggetti di tipo Array, Map, Set, arguments 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"
}

• « Previous
• Next »