logo

Cicli JavaScript

I loop JavaScript sono essenziali per gestire in modo efficiente le attività ripetitive. Eseguono ripetutamente un blocco di codice finché una condizione specificata rimane vera. Questi loop sono strumenti potenti per automatizzare le attività e semplificare il codice.

Supponiamo ad esempio di voler stampare Ciao mondo 5 volte. Questo può essere fatto facilmente utilizzando JS Loop. In Loop, l'istruzione deve essere scritta solo una volta e il ciclo verrà eseguito 5 volte come mostrato di seguito:



JavaScript
for (let i = 0; i < 5; i++) {  console.log('Hello World!'); }>

Produzione
Hello World! Hello World! Hello World! Hello World! Hello World!>

Tabella dei contenuti

1. JavaScript per Ciclo

IL JS per ciclo fornisce un modo conciso di scrivere la struttura del ciclo. Il ciclo for contiene l'inizializzazione, la condizione e l'incremento/decremento in un'unica riga, fornendo così una struttura di loop più breve e di facile debug.

Sintassi

for (initialization; testing condition; increment/decrement) { statement(s) }>

Diagramma di flusso



  • Condizione di inizializzazione: Inizializza la variabile e segna l'inizio di un ciclo for. È possibile utilizzare una variabile già dichiarata oppure dichiarare una variabile, solo locale al loop.
  • Condizione di test: Viene utilizzato per testare la condizione di uscita di un ciclo for. Deve restituire un valore booleano. È anche un Circuito di controllo dell'ingresso poiché la condizione viene verificata prima dell'esecuzione delle istruzioni del ciclo.
  • Esecuzione dell'istruzione: Una volta che la condizione viene valutata come vera, vengono eseguite le istruzioni nel corpo del ciclo.
  • Incremento/Decremento: Viene utilizzato per aggiornare la variabile per l'iterazione successiva.
  • Terminazione del ciclo: Quando la condizione diventa falsa, il ciclo termina segnando la fine del suo ciclo di vita.

Esempio

Javascript
// JavaScript program to illustrate for loop let x; // for loop begins when x = 2 // and runs till x <= 4 for (x = 2; x <= 4; x++) {  console.log('Value of x: ' + x); }>

Produzione
Value of x: 2 Value of x: 3 Value of x: 4>

2. JavaScript durante il ciclo

IL JS ciclo while è un'istruzione del flusso di controllo che consente l'esecuzione ripetuta del codice in base a una determinata condizione booleana. Il ciclo while può essere pensato come un'istruzione if ripetuta.

Sintassi

while (boolean condition) { loop statements... }>

Diagramma di flusso

ciclo while

  • Il ciclo While inizia con il controllo della condizione. Se viene valutato come vero, vengono eseguite le istruzioni del corpo del ciclo, altrimenti viene eseguita la prima istruzione successiva al ciclo. Per questo motivo è anche chiamato il Circuito di controllo dell'ingresso
  • Una volta che la condizione viene valutata come vera, vengono eseguite le istruzioni nel corpo del ciclo. Normalmente le istruzioni contengono un valore aggiornato per la variabile elaborata per l'iterazione successiva.
  • Quando la condizione diventa falsa, il ciclo termina, segnando la fine del suo ciclo di vita.

Esempio

Javascript
// JavaScript code to use while loop let val = 1; while (val < 6) {  console.log(val);   val += 1; }>

Produzione
1 2 3 4 5>

3. Ciclo JavaScript do- while

IL Ciclo do-mentre di JS è simile al ciclo while con l'unica differenza che controlla la condizione dopo aver eseguito le istruzioni, e quindi è un esempio di Uscire dal ciclo di controllo. Esegue il contenuto del loop almeno una volta se la condizione è falsa.



Sintassi

do { Statements... } while (condition);>

Diagramma di flusso fare durante

  • Il ciclo do- while inizia con l'esecuzione delle istruzioni. Non viene effettuato alcun controllo di alcuna condizione per la prima volta.
  • Dopo l'esecuzione delle istruzioni e l'aggiornamento del valore della variabile, la condizione viene verificata per un valore vero o falso. Se viene valutato come vero, inizia la successiva iterazione del ciclo.
  • Quando la condizione diventa falsa, il ciclo termina, segnando la fine del suo ciclo di vita.
  • È importante notare che il ciclo do- while eseguirà le sue istruzioni almeno una volta prima che venga verificata qualsiasi condizione e quindi è un esempio del ciclo di controllo di uscita.

Esempio

Javascript
let test = 1; do {  console.log(test);  test++; } while(test <= 5)>

Produzione
1 2 3 4 5>

4. Ciclo for-in JavaScript

Ciclo for-in di JS viene utilizzato per scorrere le proprietà di un oggetto. Il ciclo for-in esegue l'iterazione solo su quelle chiavi di un oggetto la cui proprietà enumerabile è impostata su true.

Sintassi

for(let variable_name in object_name) { // Statement }>

Esempio: Questo esempio mostra l'uso del ciclo for-in.

Javascript
let myObj = { x: 1, y: 2, z: 3 }; for (let key in myObj) {  console.log(key, myObj[key]); }>

Produzione
x 1 y 2 z 3>

5. JavaScript for-of Loop

Ciclo for-of di JS viene utilizzato per ripetere gli oggetti iterabili, ad esempio: array, oggetto, set e mappa. Itera direttamente il valore dell'oggetto iterabile dato e ha una sintassi più concisa rispetto al ciclo for.

Sintassi:

for(let variable_name of object_name) { // Statement }>

Esempio: Questo esempio mostra l'uso del ciclo for-of.

Javascript
let arr = [1, 2, 3, 4, 5]; for (let value of arr) {  console.log(value); }>

Produzione
1 2 3 4 5>

6. Dichiarazione etichettata JavaScript

Parola chiave dell'etichetta JS non include una parola chiave goto. Gli utenti possono utilizzare la parola chiave continue con l'istruzione label. Inoltre, gli utenti possono utilizzare la parola chiave break per terminare il loop/blocco. È inoltre possibile utilizzare la parola chiave break senza definire l'etichetta ma termina solo il ciclo/blocco principale. Per terminare il ciclo esterno dal ciclo interno utilizzando la parola chiave break, gli utenti devono definire l'etichetta.

Sintassi

Label: statement (loop or block of code)>

Esempio

Javascript
let sum = 0, a = 1;  // Label for outer loop  outerloop: while (true) {   a = 1;   // Label for inner loop   innerloop: while (a < 3) {   sum += a;   if (sum>12) { // Interrompe il ciclo esterno dal ciclo interno interrompe il ciclo esterno;   } console.log('sum = ' + sum);   a++;   } }>

Produzione
sum = 1 sum = 3 sum = 4 sum = 6 sum = 7 sum = 9 sum = 10 sum = 12>

7. Dichiarazione di interruzione JavaScript

Dichiarazione di interruzione JS viene utilizzato per terminare l'esecuzione del ciclo o dell'istruzione switch quando la condizione è vera.

Sintassi

break;>

Esempio

Javascript
for (let i = 1; i < 6; i++) {  if (i == 4)   break;    console.log(i); }>

Produzione
1 2 3>

8. Dichiarazione di continuazione JavaScript

JS continua la dichiarazione viene utilizzato per interrompere l'iterazione del ciclo e proseguire con l'iterazione successiva. L'interruzione dell'iterazione è possibile solo quando si verifica la condizione specificata. La differenza principale tra l'istruzione continue e break è che l'istruzione break interrompe completamente il ciclo mentre continue viene utilizzato per interrompere un'istruzione e passare all'istruzione successiva.

Sintassi

continue;>

Esempio

Javascript
for (let i = 0; i < 11; i++) {  if (i % 2 == 0)   continue;    console.log(i); }>

Produzione
1 3 5 7 9>

9. Ciclo infinito JavaScript (errore del ciclo)

Uno degli errori più comuni durante l'implementazione di qualsiasi tipo di ciclo è che potrebbe non terminare mai, ovvero il ciclo viene eseguito per infinite volte. Ciò accade quando la condizione fallisce per qualche motivo.

Esempio: Questo esempio mostra un ciclo infinito.

Javascript
// JavaScript program to illustrate infinite loop // Infinite loop because condition is not false // condition should have been i>0. for (let i = 5; i != 0; i -= 2) { console.log(i); } sia x = 5; // Ciclo infinito perché l'istruzione update // non è fornita while (x == 5) { console.log('In the loop'); }>