JavaScript pour la boucle
Les boucles peuvent exécuter un bloc de code plusieurs fois.
Boucles JavaScript
Les boucles sont pratiques si vous souhaitez exécuter le même code encore et encore, à chaque fois avec une valeur différente.
C'est souvent le cas lorsque vous travaillez avec des tableaux :
Au lieu d'écrire :
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
Tu peux écrire:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Différents types de boucles
JavaScript prend en charge différents types de boucles :
for
- boucle plusieurs fois sur un bloc de codefor/in
- boucle à travers les propriétés d'un objetfor/of
- boucle sur les valeurs d'un objet itérablewhile
- parcourt un bloc de code alors qu'une condition spécifiée est vraiedo/while
- boucle également à travers un bloc de code alors qu'une condition spécifiée est vraie
La boucle For
La for
boucle a la syntaxe suivante :
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
L' instruction 1 est exécutée (une fois) avant l'exécution du bloc de code.
L' instruction 2 définit la condition d'exécution du bloc de code.
L' instruction 3 est exécutée (à chaque fois) après l'exécution du bloc de code.
Exemple
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Dans l'exemple ci-dessus, vous pouvez lire :
L'instruction 1 définit une variable avant le début de la boucle (soit i = 0).
L'instruction 2 définit la condition d'exécution de la boucle (i doit être inférieur à 5).
L'instruction 3 augmente une valeur (i++) chaque fois que le bloc de code dans la boucle a été exécuté.
Déclaration 1
Normalement, vous utiliserez l'instruction 1 pour initialiser la variable utilisée dans la boucle (soit i = 0).
Ce n'est pas toujours le cas, JavaScript s'en fiche. La déclaration 1 est facultative.
Vous pouvez initier plusieurs valeurs dans l'instruction 1 (séparées par une virgule) :
Exemple
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Et vous pouvez omettre l'instruction 1 (comme lorsque vos valeurs sont définies avant le début de la boucle) :
Exemple
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Déclaration 2
Souvent, l'instruction 2 est utilisée pour évaluer la condition de la variable initiale.
Ce n'est pas toujours le cas, JavaScript s'en fiche. La déclaration 2 est également facultative.
Si l'instruction 2 renvoie vrai, la boucle recommencera, si elle renvoie faux, la boucle se terminera.
Si vous omettez l'instruction 2, vous devez fournir une pause à l'intérieur de la boucle. Sinon, la boucle ne se terminera jamais. Cela plantera votre navigateur. En savoir plus sur les pauses dans un chapitre ultérieur de ce didacticiel.
Énoncé 3
Souvent, l'instruction 3 incrémente la valeur de la variable initiale.
Ce n'est pas toujours le cas, JavaScript s'en moque et l'instruction 3 est facultative.
L'instruction 3 peut faire n'importe quoi comme un incrément négatif (i--), un incrément positif (i = i + 15) ou n'importe quoi d'autre.
L'instruction 3 peut également être omise (comme lorsque vous incrémentez vos valeurs à l'intérieur de la boucle):
Exemple
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Portée de la boucle
Utilisation var
en boucle :
Exemple
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
Utilisation let
en boucle :
Exemple
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
Dans le premier exemple, en utilisant var
, la variable déclarée dans la boucle redéclare la variable en dehors de la boucle.
Dans le deuxième exemple, en utilisant let
, la variable déclarée dans la boucle ne redéclare pas la variable en dehors de la boucle.
Lorsque let
est utilisé pour déclarer la variable i dans une boucle, la variable i ne sera visible que dans la boucle.
Boucles For/Of et For/In
La for/in
boucle et la for/of
boucle sont expliquées dans le chapitre suivant.
Boucles While
La while
boucle et le do/while
sont expliqués dans les chapitres suivants.