Articolo originale: https://www.freecodecamp.org/news/javascript-loops-explained-for-loop-for/
I cicli vengono utilizzati in JavaScript per eseguire attività ripetute in base a una condizione. Le condizioni in genere restituiscono true
o false
. Un ciclo continuerà a funzionare fino a quando la condizione da noi definita ritorna false
.
Ciclo for
Sintassi
for (inizializzazione; condizione; espressioneFianle) {
// codice
}
Il ciclo for
è costituito da tre espressioni facoltative, seguite da un blocco di codice:
inizializzazione
- Questa espressione viene eseguita prima dell'esecuzione del primo ciclo e viene solitamente utilizzata per creare un contatore.condizione
- Questa espressione viene controllata ogni volta prima dell'esecuzione del ciclo. Se restituiscetrue
, l'istruzione
o il codice nel ciclo viene eseguito. Se restituiscefalse
, il ciclo si interrompe. E se questa espressione viene omessa, restituisce automaticamentetrue
.espressioneFinale
- Questa espressione viene eseguita dopo ogni iterazione del ciclo. Questa è solitamente usata per incrementare un contatore, ma può anche essere usata per decrementare un contatore.
È possibile omettere una qualsiasi di queste tre espressioni o le istruzioni nel blocco di codice.
I cicli for
sono comunemente usati per eseguire il blocco di codice un determinato numero di volte. Inoltre, puoi usare break
per uscire anticipatamente dal ciclo, prima che l'espressione condizione
ritorni false
.
Esempi
1. Iterare tra numeri interi da 0 a 8:
for (let i = 0; i < 9; i++) {
console.log(i);
}
// Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
2. Utilizzare break
per uscire da un ciclo for
prima che la condizione
sia false
:
for (let i = 1; i < 10; i += 2) {
if (i === 7) {
break;
}
console.log('Elefanti totali: ' + i);
}
// Output:
// Elefanti totali: 1
// Elefanti totali: 3
// Elefanti totali: 5
Errore comune: superare i limiti di un Array
Quando si esegue l'iterazione su un array, è facile superare accidentalmente i limiti dell'array stesso.
Ad esempio, il tuo ciclo potrebbe provare a fare riferimento al 4° elemento di un array con solo 3 elementi:
const arr = [ 1, 2, 3 ];
for (let i = 0; i <= arr.length; i++) {
console.log(arr[i]);
}
// Output:
// 1
// 2
// 3
// undefined
Esistono due modi per correggere questo codice: impostare la condizione
su i < arr.length
o i <= arr.length - 1
.
Ciclo for...in
Sintassi
for (proprietà in oggetto) {
// codice
}
Il ciclo for...in
esegue un'iterazione sulle proprietà di un oggetto. Per ogni proprietà viene eseguito il codice nel blocco di istruzioni.
Esempi
1. Iterare sulle proprietà di un oggetto e stampare il nome e il valore nella console:
const capitali = {
a: "Atene",
b: "Belgrado",
c: "Cairo"
};
for (let key in capitali) {
console.log(key + ": " + capitali[key]);
}
// Output:
// a: Atene
// b: Belgrado
// c: Cairo
Errore comune: comportamento imprevisto durante l'iterazione su un array
Sebbene sia possibile utilizzare un ciclo for...in
per eseguire l'iterazione su un array, è consigliabile utilizzare invece un normale ciclo for
o un ciclo for...of
.
Il ciclo for...in
può scorrere su array e oggetti simili a array, ma potrebbe non accedere sempre agli indici dell'array in ordine.
Inoltre, il ciclo for...in
restituisce tutte le proprietà e le proprietà ereditate per un array o un oggetto simile a un array, e ciò può portare a comportamenti imprevisti.
Ad esempio, questo semplice ciclo funziona come previsto:
const array = [1, 2, 3];
for (const i in array) {
console.log(i);
}
// 0
// 1
// 2
Ma se qualcosa come una libreria JS che stai usando modifica direttamente il prototipo dell' Array
, un un ciclo for...in
scorrerà anche su quello:
const array = [1, 2, 3];
Array.prototype.someMethod = true;
for (const i in array) {
console.log(i);
}
// 0
// 1
// 2
// someMethod
Sebbene la modifica di prototipi di sola lettura come Array
o Object
vada direttamente contro le migliori pratiche, potrebbe essere un problema con alcune librerie o basi di codice.
Inoltre, poiché for...in
è pensato per gli oggetti, è molto più lento con gli array rispetto ad altri cicli.
In breve, ricorda di usare solo i cicli for...in
per scorrere gli oggetti, non gli array.
Ciclo for...of
Sintassi
for (variabile of oggetto) {
// codice
}
Il ciclo for...of
esegue un'iterazione sui valori di molti tipi di iterabili, inclusi gli array e i tipi di raccolta speciali come Set
e Map
. Per ogni valore nell'oggetto iterabile, viene eseguito il codice nel blocco di codice.
Esempi
1. Iterare su un array:
const arr = [ "Fred", "Tom", "Bob" ];
for (let i of arr) {
console.log(i);
}
// Output:
// Fred
// Tom
// Bob
2. Iterare su Map
:
const m = new Map();
m.set(1, "nero");
m.set(2, "rosso");
for (let n of m) {
console.log(n);
}
// Output:
// [1, nero]
// [2, rosso]
3. Iterare su Set
:
const s = new Set();
s.add(1);
s.add("rosso");
for (let n of s) {
console.log(n);
}
// Output:
// 1
// rosso
Ciclo while
Sintassi
while (condizione) {
// istruzione
}
Il ciclo while
inizia valutando la condizione
. Se condizione
restituisce true
, il codice nel blocco delle istruzioni viene eseguito. Se condizione
restituisce false
, il codice nel blocco delle istruzioni non viene eseguito e il ciclo termina.
Esempi:
- Mentre una variabile è inferiore a 10, stampala sulla console e incrementala di 1:
let i = 1;
while (i < 10) {
console.log(i);
i++;
}
// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
Ciclo do...while
Sintassi:
do {
// istruzione
} while (condizione);
Il ciclo do...while
è strettamente correlato al ciclo while
. In un ciclo do...while
, la condizione
viene verificata alla fine di ogni iterazione del ciclo, anziché all'inizio prima dell'esecuzione del ciclo.
Ciò significa che è garantito che il codice in un ciclo do...while
venga eseguito almeno una volta, anche se l'espressione condizione
restituisce già true
.
Esempio:
- Mentre una variabile è inferiore a 10, stampala sulla console e incrementala di 1:
let i = 1;
do {
console.log(i);
i++;
} while (i < 10);
// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
2. Eseguire il push su un array, anche se la condizione
restituisce true
:
const myArray = [];
let i = 10;
do {
myArray.push(i);
i++;
} while (i < 10);
console.log(myArray);
// Output:
// [10]