JavaScript: i Cicli
Lezione#08 I Cicli in JavaScript. In questa lezione parleremo di cicli di elaborazione, ossia di costrutti di iterazione che consentono l’esecuzione ripetuta di una specifica istruzione, semplice o strutturata.
Una cosa che si vuole sempre evitare, per ragioni di leggibilità e di semplicità del codice, è la ripetizione di istruzioni che possono aumentare la ridondanza di un listato. Al fine di migliorare questi aspetti, in JavaScript è possibile ricorrere ai Cicli. Pensiamo al seguente esempio.
/* Esempio #01 */ var numbers = [3, 7, 14, 15, 22, 41]; numbers[0]++; numbers[1]++; numbers[2]++; numbers[3]++; numbers[4]++; numbers[5]++; console.log(numbers);
[4, 8, 15, 16, 23, 42]
Come ben si evince dal primo esempio, si vuole incrementare ogni elemento, della variabile numbers, di un’unità. In tal caso è stata ripetuta n volte l’operazione di incremento. Ovviamente, è uno spreco di tempo ripetere le istruzioni, potremmo pensare di organizzarle in un ciclo , in modo da fare eseguire la stessa istruzione su elementi differenti, per un numero desiderato di volte.
Possiamo usare, quindi, un loop per ripetere pezzi di codice tutte le volte che vogliamo. Iniziamo con uno dei più gettonati, il ciclo for.
// Esempio #02
var s = "";
for(var i = 0; i < 5; i++) {
s += i;
}
console.log(s);
01234
Tra parentesi, dopo la parola for, inseriamo una variabile di controllo , una condizione e un incremento . In questo modo, abbiamo realizzato un primo semplicissimo ciclo for, andando a riempire la variabile s con i numeri da 0 a 4.
Proviamo ad usare il ciclo for per incrementare i sei valori dell’array dell’esempio #01.
// Esempio #03
var numbers = [3, 7, 14, 15, 22, 41];
for(var i = 0; i < numbers.length; i++) {
numbers[i]++;
}
console.log(numbers);
[4, 8, 15, 16, 23, 42]
Grandioso! Il ciclo inizia a contare da zero e prosegue fin quando la variabile i ha un valore inferiore alla lunghezza dell’array (number.length).
C’è un altro modo, molto inusuale, per utilizzare il ciclo for. Si usa la keyword in.// Esempio #04
var supereroi = ["spider-man", "x-men", "flash", "batman"];
for (var hero in supereroi){
console.log(supereroi[hero]);
}
spider-man
x-men
flash
batman
// Esempio #05
var numbers = [3, 7, 14, 15, 22, 41];
var i = 0;
while (i < numbers.length) {
numbers[i]++;
i++;
}
console.log(numbers);
[4, 8, 15, 16, 23, 42]
Abbiamo ottenuto di nuovo il risultato aspettato. In questo caso, tuttavia, il ciclo girerà fino a quando la condizione tra parentesi tonde verrà violata. Per uscire dal ciclo è necessario incrementare la variabile i: quando i eguaglia il valore di numbers.length (numero di elementi dell’array), il ciclo termina.
Una variante del ciclo while è il ciclo do-while, che ha la condizione alla fine del costrutto (controllo in coda), piuttosto che all’inizio (controllo in testa).
// Esempio #06
var numbers = [3, 7, 14, 15, 22, 41];
var i = 0;
do {
numbers[i]++;
i++;
}
while (i < numbers.length);
console.log(numbers);
[4, 8, 15, 16, 23, 42]
Un do-while loop esegue almeno una volta il codice contenuto nel do, anche se la condizione del while è falsa. Ciò avviene, poichè il controllo sulla condizione è posto in coda al costrutto.
Due keywords molto utili sono break e continue: la prima ci permette di uscire dal ciclo se si verifica una specifica condizione, mentre la seconda ci permette di saltare una o più istruzioni, riprendendo da un’altra posizione interna al codice.
// Esempio #07
var v = [];
for (var i = 0; i < 10; i++) {
if (i == 7) {
break;
} if (i == 3) {
continue;
}
v[i] = 1;
}
console.log(v.length);
console.log(v);
Nell’ultimo esempio, si può capire come funziona break: quando la variabile i corrisponde a 7, si ha l’interruzione del ciclo; inoltre quanto i corrisponde a 3, la keyword continue fa si che l’elemento v[3] venga saltato!
Ritorna alla precedente <– []–> Vai alla successiva
