JavaScript pour la boucle
Exemple
Bouclez (itérez sur) un bloc de code cinq fois :
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Bouclez (parcourez) un tableau pour collecter les noms de voitures :
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- La boucle commence en position 0 (
let i = 0). - La boucle s'incrémente automatiquement
ià chaque exécution. - La boucle s'exécute tant que
i < cars.length.
Plus d'exemples ci-dessous.
Définition et utilisation
L' forinstruction définit un bloc de code qui est exécuté tant qu'une condition est
true.
Noter
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.Voir également:
Syntaxe
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Paramètres
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
Instructions de boucle JavaScript
| Déclaration | La description | |
| Pause | Sort d'une boucle | |
| Continuez | Ignore une valeur dans une boucle | |
| tandis que | Boucle un bloc de code alors qu'une condition est vraie | |
| faire pendant | Boucle un bloc de code une fois, puis tant qu'une condition est vraie | |
| pour | Boucle un bloc de code alors qu'une condition est vraie | |
| pour... de | Boucle les valeurs de tout itérable | |
| pour... dans | Boucle les propriétés d'un objet |
Plus d'exemples
Initiez plusieurs valeurs dans le premier paramètre :
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Omettez les premiers paramètres (définissez les valeurs avant le début de la boucle) :
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Use continue- Boucle dans un bloc de code, mais ignore la valeur 3 :
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Use break- Boucle un bloc de code, mais quitte la boucle lorsque i == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Omettez le deuxième paramètre.
Utilisez breakpour sortir de la boucle, sinon la boucle ne se terminera jamais et votre navigateur plantera :
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Boucle sur un tableau dans l'ordre décroissant (incrément négatif) :
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Omettez le dernier paramètre et incrémentez les valeurs à l'intérieur de la boucle :
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Bouclez une NodeList et changez la couleur de tous les éléments p de la liste :
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Une boucle imbriquée (une boucle à l'intérieur d'une boucle) :
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Prise en charge du navigateur
forest une fonctionnalité ECMAScript1 (ES1).
ES1 (JavaScript 1997) est entièrement pris en charge dans tous les navigateurs :
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |