Boucles For JavaScript

Les boucles peuvent exécuter plusieurs fois un bloc de code.

Boucles JavaScript

Si vous avez besoin d'exécuter le code plusieurs fois avec différentes valeurs à chaque fois, le boucle (loop) est très pratique à utiliser.

Nous rencontrons généralement des exemples d'utilisation d'arrays :

Ne pas écrire ainsi :

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

Vous pouvez écrire ainsi :

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

Essayez-le vous-même

Différents types de boucles

JavaScript prend en charge différents types de boucles :

  • for - Parcourir plusieurs fois un bloc de code
  • for/in - Parcourir les propriétés de l'objet
  • while - Exécutez un bloc de code pendant que la condition est true
  • do/while - Exécutez un bloc de code pendant que la condition est true

Boucle for

La boucle for est un outil souvent utilisé lorsque vous souhaitez créer une boucle.

La syntaxe de la boucle for est la suivante :

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

La phrase 1 s'exécute avant le début de la boucle (bloc de code).

La phrase 2 définit la condition d'exécution de la boucle (bloc de code).

La phrase 3 s'exécute à chaque exécution du bloc de code de la boucle.

Exemple

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

Essayez-le vous-même

À partir du code ci-dessus, vous pouvez comprendre :

La phrase 1 définit une variable avant le début de la boucle (var i = 0).

La phrase 2 définit la condition d'exécution de la boucle (i doit être inférieur à 5).

La phrase 3 augmente la valeur à chaque exécution du bloc de code.

La phrase 1

Généralement, vous utilisez la phrase 1 pour initialiser les variables utilisées dans la boucle (i = 0).

Mais les choses ne sont pas toujours ainsi, JavaScript ne s'en soucie pas. La phrase 1 est également optionnelle.

Vous pouvez initialiser plusieurs valeurs dans la phrase 1 (séparées par des virgules) :

Exemple

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

Essayez-le vous-même

Et vous pouvez également omettre la phrase 1 (par exemple, en définissant la valeur avant le début de la boucle) :

Exemple

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

Essayez-le vous-même

La phrase 2

Généralement, la phrase 2 est utilisée pour calculer la condition de la variable initiale.

Mais les choses ne sont pas toujours ainsi, JavaScript ne s'en soucie pas. La phrase 2 est également optionnelle.

Si la phrase 2 renvoie true, la boucle recommencera, si elle renvoie false, la boucle se terminera.

Si la phrase 2 est omise, il faut fournir une break. Sinon, la boucle ne s'arrêtera jamais. Lisez plus à ce sujet dans le prochain chapitre.

La phrase 3

Généralement, la phrase 3 augmente la valeur de la variable initiale.

Mais les choses ne sont pas toujours ainsi, JavaScript ne s'en soucie pas. La phrase 3 est également optionnelle.

La phrase 3 peut faire n'importe quoi, par exemple la décrémentation négative (i--), l'incrémentation positive (i = i + 15), ou toute autre chose.

L'instruction 3 peut également être omise (par exemple, lorsque vous augmentez la valeur dans la boucle) :

Exemple

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

Essayez-le vous-même

Boucle For/In

JavaScript for/in L'instruction boucle traverse les propriétés de l'objet :

Exemple

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

Essayez-le vous-même

Boucle While

Nous allons apprendre les boucles while et do/while dans le prochain chapitre.

Livre de lecture en dehors de l'école

Pour plus d'informations sur Instruction for JavaScriptPour plus d'informations sur la connaissance, veuillez lire le contenu pertinent dans le tutoriel avancé JavaScript :

Instructions itératives ECMAScript
Les instructions itératives, également appelées instructions de boucle, sont introduites dans cette section. Vous y découvrirez les quatre instructions itératives fournies par ECMAScript.