For, While e Do While LOOP in JavaScript con esempio
James Hartmann
⚡ Riepilogo intelligente
Cicli For, While e Do While in JavaQuesto script ripete un blocco di istruzioni senza duplicare il codice. L'articolo illustra la sintassi di ciascun comando, mostra esempi eseguibili con l'output previsto, introduce le forme for-in e for-of e tratta i comandi break, continue e la prevenzione dei cicli infiniti.
Che cos'è un ciclo in JavaCopione?
I cicli sono utili quando devi eseguire ripetutamente le stesse righe di codice, per un numero specifico di volte o finché una condizione specifica è vera. Supponiamo che tu voglia digitare un messaggio "Ciao" 100 volte nella tua pagina web. Ovviamente dovrai copiare e incollare la stessa riga 100 volte. Se invece utilizzi i loop, puoi completare questa attività in sole 3 o 4 righe.
Ogni ciclo è costituito dalle stesse tre parti, indipendentemente dalla sintassi: un valore iniziale, una condizione che decide se eseguire un altro passaggio e un aggiornamento che fa avanzare il ciclo verso la sua uscita. Il diagramma seguente mostra questo ciclo ripetitivo.
Diversi tipi di cicli in JavaCopione
Esistono principalmente quattro tipi di loop in JavaCopione.
- per loop
- ciclo for/in
- mentre il ciclo
- fai... while loop
Moderno JavaLo script aggiunge il ciclo for…of per iterare direttamente i valori, quindi in pratica sono disponibili cinque forme. La tabella seguente mostra quale utilizzare in una data situazione.
| Ciclo continuo | Condizione verificata | Esecuzioni minime | migliori Usato per |
|---|---|---|---|
| per | Prima di ogni passaggio | 0 | Un numero noto di ripetizioni |
| while | Prima di ogni passaggio | 0 | Un conteggio sconosciuto guidato da una condizione |
| fare...mentre | Dopo ogni passaggio | 1 | Menu e richieste che devono essere eseguiti una sola volta |
| per…in | Prima di ogni passaggio | 0 | Lettura dei tasti di un oggetto |
| per…di | Prima di ogni passaggio | 0 | Lettura dei valori di un array o di una stringa |
per loop
Sintassi:
for(statement1; statement2; statment3)
{
lines of code to be executed
}
- L'istruzione1 viene eseguita per prima, ancor prima dell'esecuzione del cicloping codice. Quindi, questa istruzione viene normalmente utilizzata per assegnare valori alle variabili che verranno utilizzate all'interno del ciclo.
- L'istruzione2 è la condizione per eseguire il ciclo.
- L'istruzione3 viene eseguita ogni volta dopo il loopping Il codice viene eseguito.
Provalo tu stesso:
<html>
<head>
<script type="text/javascript">
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
document.write("<b>Using for loops </b><br />");
for (i=0;i<students.length;i++)
{
document.write(students[i] + "<br />");
}
</script>
</head>
<body>
</body>
</html>
Produzione:
Using for loops John Ann Aaron Edwin Elizabeth
Il contatore inizia da 0 perché il primo indice di un schieramento è zero e la condizione utilizza students.length in modo che il ciclo si adatti automaticamente quando vengono aggiunti o rimossi nomi.
mentre il ciclo
Sintassi:
while(condition)
{
lines of code to be executed
}
Il "ciclo while" viene eseguito finché la condizione specificata è vera. All'interno del ciclo while, dovresti includere l'istruzione che terminerà il ciclo a un certo punto. Altrimenti, il ciclo non terminerà mai e il browser potrebbe bloccarsi.
Provalo tu stesso:
<html>
<head>
<script type="text/javascript">
document.write("<b>Using while loops </b><br />");
var i = 0, j = 1, k;
document.write("Fibonacci series less than 40<br />");
while(i<40)
{
document.write(i + "<br />");
k = i+j;
i = j;
j = k;
}
</script>
</head>
<body>
</body>
</html>
Produzione:
Using while loops Fibonacci series less than 40 0 1 1 2 3 5 8 13 21 34
⚠️ Attenzione: Un ciclo while la cui condizione non diventa mai falsa blocca la scheda del browser. Assicurati sempre che una variabile all'interno del corpo del ciclo modifichi la condizione verso il falso e utilizza un contatore di sicurezza quando l'uscita dipende da dati esterni.
fai... while loop
Sintassi:
do
{
block of code to be executed
} while (condition)
Il ciclo do…while è molto simile al ciclo while. L'unica differenza è che nel ciclo do…while il blocco di codice viene eseguito una sola volta, prima ancora di verificare la condizione.
Provalo tu stesso:
<html>
<head>
<script type="text/javascript">
document.write("<b>Using do...while loops </b><br />");
var i = 2;
document.write("Even numbers less than 20<br />");
do
{
document.write(i + "<br />");
i = i + 2;
}while(i<20)
</script>
</head>
<body>
</body>
</html>
Produzione:
Using do...while loops Even numbers less than 20 2 4 6 8 10 12 14 16 18
La differenza diventa evidente quando la condizione è falsa fin dall'inizio. Un ciclo while non stampa nulla, mentre un ciclo do…while stampa comunque una riga prima di fermarsi.ping.
per…nel ciclo
Il ciclo for…in scorre i nomi delle proprietà enumerabili di un oggetto. Ad ogni passaggio, la chiave successiva viene assegnata alla variabile del ciclo e il valore viene letto utilizzando la notazione tra parentesi quadre.
const student = { name: "Ann", age: 21, course: "JavaScript" }; for (const key in student) { console.log(key + " : " + student[key]); }
Produzione:
name : Ann age : 21 course : JavaScript
Suggerimento: Evitate di usare `for…in` sugli array. Restituisce i valori degli indici come stringhe e accede anche alle proprietà ereditate, il che può produrre risultati inaspettati. Utilizzate invece `for…of` o un classico ciclo `for` per gli array.
per…del ciclo e perEach
Il ciclo for…of legge i valori di qualsiasi oggetto iterabile, inclusi array, stringhe, mappe e insiemi. Il metodo forEach ottiene lo stesso risultato con una funzione di callback e consente l'accesso all'indice.
const students = ["John", "Ann", "Aaron"]; // for...of reads each value directly for (const name of students) { console.log(name); } // forEach supplies the value and the index students.forEach(function (name, index) { console.log(index + " - " + name); }); // strings are iterable too for (const letter of "Ann") { console.log(letter); }
Produzione:
John Ann Aaron 0 - John 1 - Ann 2 - Aaron A n n
Una differenza pratica è importante: break e continue funzionano all'interno di for…of, ma non possono essere utilizzati all'interno di forEach, perché ogni callback è una funzione separata.
Dichiarazioni di interruzione e continua
Due parole chiave modificano il normale flusso di qualsiasi ciclo. L'istruzione `break` esce completamente dal ciclo, mentre l'istruzione `continue` abbandona l'iterazione corrente e passa alla successiva.
const numbers = [4, 7, 10, 13, 16, 19]; // continue: skip odd numbers for (const n of numbers) { if (n % 2 !== 0) { continue; } console.log("even: " + n); } // break: stop at the first value above 12 for (const n of numbers) { if (n > 12) { console.log("first value above 12: " + n); break; } }
Produzione:
even: 4 even: 10 even: 16 first value above 12: 13
I cicli compaiono in quasi ogni script che scriverai. Continua con il pratico JavaEsempi di codice script, rivisitare JavaMetodi degli array di script per gli helper di iterazione costruiti sopra questi cicli e leggere interno ed esterno JavaCopione per decidere dove dovrebbe essere archiviata la sceneggiatura completa.
