Instruction for en JavaScript

Définition et utilisation

L'instruction for crée une boucle qui s'exécute tant que la condition est vraie.

Tant que la condition est vraie, la boucle continue de s'exécuter. Elle s'arrête seulement lorsque la condition devient fausse.

JavaScript supporte différents types de boucles :

  • for - Boucle de code répétée
  • for/in - Parcourir les propriétés d'un objet
  • for/of - Parcourir les valeurs d'un objet itérable
  • while - Répéter le bloc de code tant que la condition est vraie
  • do/while - Exécuter un bloc de code une fois, puis répéter la boucle si la condition est vraie

Conseil :Utilisez l'instruction break pour sortir de la boucle, utilisez l'instruction continue pour sauter une valeur dans la boucle.

Exemple

Exécuter le bloc de code de boucle cinq fois :

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "Le nombre est " + i + "<br>";
}

Essayez vous-même

Vous trouverez plus d'exemples TIY en bas de la page.

Syntaxe

for (statement 1; statement 2; statement 3) {
  bloc de code à exécuter
}

Valeur des paramètres

Paramètres Description
statement1

Optionnel. Exécuté avant le début de la boucle (bloc de code). Habituellement utilisé pour initialiser le variable de compteur. Pour initialiser plusieurs valeurs, séparez chaque valeur par une virgule.

Remarque :Ce paramètre peut être omis. Cependant, ne pas omettre le point-virgule ";"
statement2

Optionnel. Définir la condition de la boucle (bloc de code) à exécuter. Habituellement utilisé pour évaluer la condition du variable de compteur. Si elle retourne true, la boucle recommencera, si elle retourne false, la boucle se terminera.

Remarque :Ce paramètre peut être omis. Cependant, ne pas omettre le point-virgule ";". De plus, si ce paramètre est omis, il doit y avoir un break à l'intérieur de la boucle. Sinon, la boucle ne se terminera jamais, ce qui peut faire planter votre navigateur.
statement3

Optionnel. Exécuté après chaque exécution de la boucle (bloc de code). Habituellement utilisé pour incrémenter ou décrémenter le variable de compteur.

Remarque :Ce paramètre peut être omis (par exemple, augmenter / diminuer la valeur à l'intérieur de la boucle).

Détails techniques

Version JavaScript : ECMAScript 1

Plus d'exemples

Exemple

Parcourir les indices du tableau, collecter les noms des voitures à partir du tableau cars :

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Essayez vous-même

Explication de l'exemple :

  • Tout d'abord, nous définissons une variable avant le début de la boucle (var i = 0;)
  • Ensuite, nous définissons la condition de la boucle. Tant que la variable est inférieure à la longueur du tableau (c'est-à-dire 4), la boucle continuera
  • Chaque fois que la boucle est exécutée, la variable est augmentée (i++)
  • Une fois que la variable n'est plus inférieure à 4 (la longueur du tableau), la condition est fausse, la boucle se termine

Exemple

Initialiser plusieurs valeurs dans le premier paramètre :

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) { 
  text += cars[i] + "<br>";
}

Essayez vous-même

Exemple

Omettre le premier paramètre (définir la valeur avant le début de la boucle):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Essayez vous-même

Exemple

Utiliser l'instruction continue - Exécuter le bloc de code de boucle, mais sauter la valeur "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "Le nombre est " + i + "<br>";
}

Essayez vous-même

Exemple

Utilisation de l'instruction break - Exécuter un segment de code, mais sortir de la boucle lorsque la variable i est égale à "3" :

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "Le nombre est " + i + "<br>";
}

Essayez vous-même

Exemple

Omettre le second paramètre. Dans cet exemple, nous utilisons également l'instruction break pour sortir de la boucle lorsque i est égal à "3" (si vous omettez le second paramètre, vous devez fournir un break à l'intérieur de la boucle. Sinon, la boucle ne se terminera jamais, et votre navigateur peut planter).

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

Essayez vous-même

Exemple

Parcourir l'index de l'array en ordre décroissant (décroissance négative) :

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

Essayez vous-même

Exemple

Omettre le dernier paramètre et incrémenter la valeur à l'intérieur de la boucle :

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
for (; i < len;) { 
  text += cars[i] + "<br>";
  i++;
}

Essayez vous-même

Exemple

Parcourir les nœuds d'un objet NodeList et modifier la couleur de fond de tous les éléments <p> de la liste :

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

Essayez vous-même

Exemple

Exemple de boucles imbriquées (une boucle dans une boucle) :

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

Essayez vous-même

Support du navigateur

Instructions Chrome IE Firefox Safari Opera
pour Support Support Support Support Support

Pages associées

Tutoriel JavaScript :Boucle for JavaScript

Manuel de référence JavaScript :Instruction for ... in JavaScript

Manuel de référence JavaScript :Instruction break JavaScript

Manuel de référence JavaScript :Instruction continue JavaScript

Manuel de référence JavaScript :Instruction while JavaScript