Pour, While et Do While BOUCLE dans JavaScript avec exemple
James Hartmann
⚡ Résumé intelligent
Boucles For, While et Do While JavaCe script permet de répéter un bloc d'instructions sans dupliquer le code. Cet article explique chaque syntaxe, présente des exemples exécutables avec le résultat attendu, introduit les formes `for-in` et `for-of`, et aborde les instructions `break` et `continue`, ainsi que la prévention des boucles infinies.
Qu'est-ce qu'une boucle dans JavaScénario?
Les boucles sont utiles lorsque vous devez exécuter les mêmes lignes de code à plusieurs reprises, un nombre de fois spécifique ou tant qu'une condition spécifique est vraie. Supposons que vous souhaitiez taper un message « Bonjour » 100 fois sur votre page Web. Bien entendu, vous devrez copier et coller la même ligne 100 fois. Au lieu de cela, si vous utilisez des boucles, vous pouvez effectuer cette tâche en seulement 3 ou 4 lignes.
Chaque boucle est construite à partir des mêmes trois parties, quelle que soit sa syntaxe : une valeur initiale, une condition déterminant si une nouvelle itération est effectuée, et une instruction de mise à jour faisant progresser la boucle vers sa sortie. Le diagramme ci-dessous illustre ce cycle répétitif.
Différents types de boucles dans Javascénario
Il existe principalement quatre types de boucles dans Javascénario.
- pour la boucle
- boucle for/in
- boucle tout en
- faire… boucle while
Moderne JavaLe script ajoute la boucle `for…of` pour itérer directement sur les valeurs, offrant ainsi cinq formes possibles. Le tableau ci-dessous indique laquelle utiliser selon la situation.
| boucle | État vérifié | Exécutions minimales | Meilleur utilisé pour |
|---|---|---|---|
| pour | Avant chaque passage | 0 | Un nombre connu de répétitions |
| tout en | Avant chaque passage | 0 | Un nombre inconnu déterminé par une condition |
| faire…pendant que | Après chaque passage | 1 | Menus et invites qui doivent s'exécuter une seule fois |
| pour… dans | Avant chaque passage | 0 | Lire les clés d'un objet |
| pour…de | Avant chaque passage | 0 | Lecture des valeurs d'un tableau ou d'une chaîne de caractères |
pour la boucle
syntaxe:
for(statement1; statement2; statment3)
{
lines of code to be executed
}
- L'instruction 1 est exécutée en premier, avant même l'exécution de la fonction loo.ping Ce code est donc généralement utilisé pour assigner des valeurs à des variables qui seront utilisées à l'intérieur de la boucle.
- L'instruction2 est la condition pour exécuter la boucle.
- L'instruction 3 est exécutée systématiquement après chaque passage aux toilettes.ping Le code est exécuté.
Essayez ceci vous-même :
<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>
Sortie :
Using for loops John Ann Aaron Edwin Elizabeth
Le compteur commence à 0 car le premier index d'un tableau est nul, et la condition utilise students.length afin que la boucle s'adapte automatiquement lorsque des noms sont ajoutés ou supprimés.
boucle tout en
syntaxe:
while(condition)
{
lines of code to be executed
}
La « boucle while » est exécutée tant que la condition spécifiée est vraie. À l’intérieur de la boucle while, vous devez inclure l’instruction qui mettra fin à la boucle à un moment donné. Sinon, votre boucle ne se terminera jamais et votre navigateur risque de planter.
Essayez ceci vous-même :
<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>
Sortie :
Using while loops Fibonacci series less than 40 0 1 1 2 3 5 8 13 21 34
⚠️ Attention : Une boucle while dont la condition ne passe jamais à faux bloque l'onglet du navigateur. Assurez-vous toujours qu'une variable à l'intérieur de la boucle fait évoluer la condition vers faux et utilisez un compteur de sécurité lorsque la sortie dépend de données externes.
faire… boucle while
syntaxe:
do
{
block of code to be executed
} while (condition)
La boucle do…while est très similaire à la boucle while. La seule différence est que, dans la boucle do…while, le bloc de code est exécuté une fois avant même la vérification de la condition.
Essayez ceci vous-même :
<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>
Sortie :
Using do...while loops Even numbers less than 20 2 4 6 8 10 12 14 16 18
La différence devient visible lorsque la condition est fausse dès le départ. Une boucle `while` n'affiche rien, tandis qu'une boucle `do…while` affiche une ligne avant de s'arrêter.ping.
boucle pour…dans
La boucle for…in parcourt les noms de propriétés énumérables d'un objet. À chaque itération, la clé suivante est assignée à la variable de boucle, et sa valeur est lue entre crochets.
const student = { name: "Ann", age: 21, course: "JavaScript" }; for (const key in student) { console.log(key + " : " + student[key]); }
Sortie :
name : Ann age : 21 course : JavaScript
Astuce : Évitez d'utiliser `for…in` sur les tableaux. Cette boucle renvoie les valeurs des indices sous forme de chaînes de caractères et accède également aux propriétés héritées, ce qui peut donner des résultats inattendus. Préférez `for…of` ou une boucle `for` classique.
boucle for…of et forEach
La boucle `for…of` lit les valeurs de n'importe quel objet itérable, y compris les tableaux, les chaînes de caractères, les dictionnaires et les ensembles. La méthode `forEach` obtient le même résultat avec une fonction de rappel et donne accès à l'index.
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); }
Sortie :
John Ann Aaron 0 - John 1 - Ann 2 - Aaron A n n
Une différence pratique est importante : les fonctions break et continue fonctionnent à l’intérieur de for…of, mais elles ne peuvent pas être utilisées à l’intérieur de forEach, car chaque rappel est une fonction distincte.
Déclarations de rupture et de continuation
Deux mots clés modifient le déroulement normal d'une boucle. L'instruction `break` interrompt la boucle, tandis que l'instruction `continue` interrompt l'itération en cours et passe à la suivante.
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; } }
Sortie :
even: 4 even: 10 even: 16 first value above 12: 13
Les boucles apparaissent dans presque tous les scripts que vous écrirez. Continuez avec la pratique JavaExemples de code de script, revisit Javaméthodes de tableau de script pour les fonctions d'itération construites sur ces boucles, et lisez interne et externe Javascénario décider où le script final devrait être stocké.
