JavaScript: i Cicli

Scritto da ambrix on . Postato in Corsi Programmazione, NotInHome Nessun Commento

js logo

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 riccorrere 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

Ogni volta che il ciclo viene eseguito, la variabile hero prende un indice diverso (in sequenza partendo da zero) dall’array supereroi.
 
Il ciclo while, un altro tipo di loop, è una valida alternativa al ciclo for, pur avendo prerogative diverse, permette di eseguire un’istruzione fintanto  che una condizione specifica risulta vera. Applichiamo il while all’esempio #01.
 
// 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

Trackback dal tuo sito.

Lascia un commento

Devi essere loggato per postare un commento.

Per Richieste, Avvisi e Lasciti Ereditari

Disclaimer

I contenuti di questo Blog (testi, immagini, foto, etc.) sono di mia creazione, tranne nei casi dove espressamente indicato.