JavaScript è tra i linguaggi di programmazione più utilizzati. Gli sviluppatori che intendono diventare ingegneri JavaScript devono apprendere le basi dei loop, i loro tipi e come funzionano.
Un ciclo JavaScript è uno strumento utilizzato per eseguire attività ripetute in base a una determinata condizione. D’altra parte, ‘iterate’ è un termine generico, che significa ripetere nel contesto del ciclo. Un ciclo continuerà a iterare finché non viene soddisfatta una condizione di arresto.
Per capirlo meglio, puoi pensarlo come un gioco computerizzato in cui ti viene chiesto di fare X passi verso nord e poi Y passi verso sinistra.
Puoi rappresentare fare 7 passi verso nord come;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
quando viene eseguito il blocco di codice sopra, avrai questo;
Sommario:
Perché vengono solitamente utilizzati i loop?
- Eseguire attività ripetitive: è possibile utilizzare i cicli per eseguire istruzioni finché non vengono soddisfatte determinate condizioni.
- Itera su oggetti o array: con i loop, puoi iterare sulle proprietà di un oggetto o sugli elementi di un array, permettendoti di eseguire determinate azioni per ogni proprietà o elemento.
- Filtra i dati: puoi utilizzare un ciclo per filtrare i dati in base a condizioni specifiche.
I loop JavaScript sono disponibili in diverse forme; For, While, Do…While, For…of, e For…in. Esaminiamoli in dettaglio e dimostriamo come ciascuno di essi funziona.
Per ciclo
Un ciclo for si ripeterà fino a quando una condizione specificata non sarà vera. Un ciclo for ha tre espressioni opzionali, seguite da un blocco di codice.
for (initialization; condition; finalExpression) {
// code
}
- L’espressione di inizializzazione precede l’esecuzione del primo ciclo. Questa espressione in genere inizializza uno o più contatori.
- Un’espressione di condizione viene verificata ogni volta prima dell’esecuzione del ciclo for. Il codice nel ciclo o nell’istruzione viene eseguito ogni volta che l’espressione restituisce true. D’altra parte, il ciclo si interrompe quando l’espressione restituisce false. Tuttavia, se l’espressione viene omessa, l’espressione restituirà true automaticamente.
- finalExpression viene eseguito dopo ogni iterazione del ciclo. L’espressione è usata principalmente per incrementare un contatore.
È possibile utilizzare {}, istruzione in blocco, per raggruppare ed eseguire più istruzioni. Se si desidera uscire dal ciclo in anticipo prima che l’espressione della condizione restituisca false, utilizzare l’istruzione break.
Esempi di cicli for con codice
for (let i = 0; i < 7; i++) {
console.log(i);
}
In questo blocco di codice;
- La variabile i viene inizializzata a zero (sia i=0).
- La condizione è che dovrei essere minore di 7 (i=7).
- Il ciclo ripeterà ripetutamente se il valore di i è minore di 7 (i<7>.
- L’iterazione aggiungerà 1 al valore di i dopo ogni iterazione (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- Il blocco di codice itera da 1 a 10 (i<11).
- Il ciclo inizializza una variabile i con un valore di 1 (let i = 1).
- La condizione del ciclo continuerà ad essere eseguita se il valore di i è minore di 11 (i < 11).
- Il valore di i aumenta di 2 dopo ogni iterazione (i += 2).
L’istruzione if valuta se il valore di i=9. Se la condizione è vera, l’istruzione break viene eseguita e il ciclo termina.
(Immagine)
Per…di ciclo
Il ciclo for…of itera su oggetti iterabili come Map, Array, Arguments e Set. Questo ciclo richiama un hook di iterazione personalizzato con istruzioni che vengono eseguite per il valore di ciascuna proprietà distinta.
La struttura di base di un ciclo for… è;
for (variable of object) statement
Esempi di ciclo for…of in azione
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
In questo codice;
- Definiamo un array chiamato frontendLanguages
- L’array ha tre elementi; “HTML”, “CSS”, “JavaScript” e “React”.
- Il ciclo for…of itera su ogni elemento in frontendLanguages.
- La i nel blocco di codice assume il valore di ogni elemento durante ogni iterazione e i valori stampati sulla console.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
In questo blocco di codice;
- Dichiariamo una variabile s, che assegniamo a un nuovo Set usando il costruttore Set().
- Due elementi vengono aggiunti al codice utilizzando il metodo add()
- Il for….of itera sull’oggetto elements.
- Il ciclo assegna l’elemento corrente a n prima di eseguire l’istruzione console.log(n).
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
In questo blocco di codice;
- Usiamo il costruttore Map() per creare un nuovo oggetto Map.
- Viene dichiarata una variabile m.
- Usando il metodo .set(), aggiungiamo cinque coppie chiave-valore.
- Un ciclo for…of itera sugli elementi dell’oggetto Map m.
Per… in loop
Un ciclo for…in viene utilizzato per iterare sulle proprietà di un oggetto. La struttura di base di un ciclo for…in è;
for (property in object) {
// code
}
Puoi usare for…in loop per iterare su array e oggetti simili ad array.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
In questo blocco di codice;
- Introduciamo un oggetto JavaScript e lo chiamiamo shoppingList.
- Usiamo il ciclo for per iterare su ogni proprietà sulla shoppingList usando l’operatore in.
- In ogni iterazione, il ciclo assegna il nome della proprietà corrente in shoppingList.
Mentre
Il ciclo while valuta una condizione, se la trova vera, il blocco di codice viene eseguito. Tuttavia, se la condizione è falsa, il ciclo termina e il blocco di codice non verrà eseguito.
Questa è la struttura di base di un ciclo while;
while (condition) Statement
La condizione di test deve verificarsi prima dell’esecuzione dell’istruzione nel ciclo. È possibile eseguire più istruzioni utilizzando {} o istruzioni di blocco.
Esempio di ciclo while in azione
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
In questo codice;
- Una variabile n viene inizializzata con un valore zero (lascia n=0).
- Il ciclo verrà eseguito finché il valore di n è minore di 9 (n<9)
- Il valore di n viene visualizzato sulla console e aumentato di 1 dopo ogni iterazione (n++)
- Il codice interromperà l’esecuzione alle 8.
Fare… Mentre Loop
Un ciclo do…while itera fino a quando una condizione specifica restituisce false.
La struttura generale di un’istruzione do…while è;
do statement while (condition);
L’istruzione viene eseguita una volta ma prima di verificare la condizione. L’istruzione verrà eseguita se la condizione è vera. Tuttavia, se la condizione valutata è falsa, l’esecuzione si interromperà e il controllo passerà all’istruzione dopo do..while. È garantito che il codice in un ciclo do…while venga eseguito almeno una volta, anche se la condizione restituisce true.
Esempio di do…while
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
In questo codice;
- Introduciamo una variabile n e impostiamo il suo valore iniziale come 0 (lascia n=0).
- La nostra variabile n entra in un ciclo do…while dove il suo valore viene incrementato di 1 dopo ogni iterazione (n+=1)
- Il valore di n viene registrato.
- Il ciclo continuerà ad essere eseguito finché il valore di n è minore di 7 (n<7).
Quando esegui questo codice, la console mostrerà i valori di n a partire da 1 a 7 mentre il ciclo viene eseguito 7 volte.
Ciclo nidificato
Un ciclo nidificato è una situazione in cui abbiamo un ciclo all’interno di un ciclo. Ad esempio, possiamo avere un ciclo for annidato all’interno di un altro ciclo for.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Ci sono due variabili; outer e inner ed entrambi sono inizializzati con il valore zero.
- Entrambe le variabili vengono incrementate di 2 dopo ogni iterazione
- I cicli esterno e interno si ripetono tre volte ciascuno.
Dichiarazioni di controllo del ciclo
Le istruzioni di controllo del ciclo, a volte note come “istruzioni di salto”, interrompono il normale flusso di un programma. Break e continue sono esempi di istruzioni di controllo del ciclo.
Dichiarazioni di rottura
Le istruzioni break terminano immediatamente un ciclo, anche se la condizione non è stata soddisfatta.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
Il codice visualizzato apparirà come;
Continua dichiarazioni
Le istruzioni continue vengono utilizzate per saltare un certo blocco di codice ed eseguire l’iterazione per il nuovo ciclo.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Il codice visualizzato apparirà come;
Conclusione
Sopra sono riportati i loop comuni che incontrerai in JavaScript vanilla e nei suoi framework/librerie. Come evidenziato, ogni tipo di loop ha il suo caso d’uso e comportamenti diversi. Se scegli il tipo di ciclo sbagliato, probabilmente avrai dei bug e il tuo codice probabilmente mostrerà un comportamento imprevisto.
Se hai a che fare con un framework o una libreria JavaScript, controlla sempre la sua documentazione e usa i loop incorporati.