Derniers tutoriels de développement web
 

JavaScript Pour la boucle


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


JavaScript Loops

Les boucles sont à portée de main, si vous voulez exécuter le même code encore et encore, chaque fois avec une valeur différente.

Souvent, cela est le cas lorsque l'on travaille 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 (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 - boucles à travers un bloc de code un nombre de fois
  • for/in - boucle à travers les propriétés d'un objet
  • while - une boucle à travers un bloc de code tant qu'une condition spécifiée est vraie
  • do/while - boucles aussi à travers un bloc de code tant qu'une condition spécifiée est vraie

Le For boucle

La for la boucle est souvent l'outil que vous allez utiliser lorsque vous souhaitez créer une boucle.

La for la boucle a la syntaxe suivante:

for (statement 1; statement 2; statement 3) {
   code block to be executed
}

Déclaration 1 est exécutée avant que la boucle (le bloc de code) commence.

Déclaration 2 définit la condition pour l' exécution de la boucle (le bloc de code).

Déclaration 3 est exécutée chaque fois après la boucle (le bloc de code) a été exécuté.

Exemple

for (i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
}
Essayez - le vous - même »

Dans l'exemple ci-dessus, vous pouvez lire:

Déclaration 1 définit une variable avant que la boucle commence (var i = 0) .

Déclaration 2 définit la condition pour la boucle à exécuter (i doit être inférieur à 5).

Déclaration 3 augmente une valeur (i++) à chaque fois que le bloc de code dans la boucle a été exécutée.


Déclaration 1

Normalement , vous allez utiliser la déclaration 1 pour lancer la variable utilisée dans la boucle (i = 0) .

Ce n'est pas toujours le cas, JavaScript ne se soucie pas. Déclaration 1 est facultative.

Vous pouvez lancer plusieurs valeurs dans l'état 1 (séparés 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 omettre la déclaration 1 (comme lorsque vos valeurs sont réglées avant que la boucle commence):

Exemple

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
    text += cars[i] + "<br>";
}
Essayez - le vous - même »

Déclaration 2

Souvent énoncé 2 est utilisé pour évaluer l'état de la variable initiale.

Ce n'est pas toujours le cas, JavaScript ne se soucie pas. Déclaration 2 est également facultative.

Si les états 2 renvoie true, la boucle sera recommencer, si elle retourne false, la boucle se termine.

Si vous omettez la déclaration 2, vous devez fournir une break dans la boucle. Sinon, la boucle ne se terminera jamais. Cela va planter votre navigateur. Lisez à propos des ruptures dans un chapitre ultérieur de ce tutoriel.


Déclaration 3

Souvent, la déclaration 3 augmente la variable initiale.

Ce n'est pas toujours le cas, JavaScript ne se soucie pas, et la déclaration 3 est facultative.

Déclaration 3 peut faire quelque chose comme incrément négatif (i--) , l' incrément positif (i = i + 15) , ou toute autre chose.

Déclaration 3 peut également être omis (comme lorsque vous incrémenter vos valeurs dans la boucle):

Exemple

var i = 0;
var len = cars.length;
for (; i < len; ) {
    text += cars[i] + "<br>";
    i++;
}
Essayez - le vous - même »

Le For/In boucle

Le JavaScript for/in la déclaration des boucles à travers les propriétés d'un objet:

Exemple

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
    text += person[x];
}
Essayez - le vous - même »

Le While la boucle

Le while en boucle et le do/while boucle sera expliqué dans le chapitre suivant.


Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»