Les boucles peuvent exécuter un bloc de code un nombre de fois spécifié.
Boucles JavaScript
Si vous souhaitez exécuter le même code encore et encore, avec la même valeur chacune temps différent, alors il est très pratique d'utiliser des boucles.
JavaScript prend en charge différents types de boucles :
for - boucle un bloc de code un certain nombre de fois
for/in - Parcourez les propriétés de l'objet
while - Parcourez le bloc de code spécifié lorsque la condition spécifiée est vraie
do/ while - De même, lorsque la condition spécifiée est vraie, bouclez le bloc de code spécifié
For boucle
La boucle for est un outil que vous utilisez souvent lorsque vous souhaitez créer une boucle.
Voici la syntaxe de la boucle for :
for (instruction 1 ; instruction 2 ; instruction 3)
{
Le bloc de code exécuté
>
L'instruction 1 (bloc de code) exécute les démarrages avant de démarrer.
L'instruction 2 définit les conditions d'exécution de la boucle (code block)
L'instruction 3 est exécutée après l'exécution de la boucle (bloc de code)
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>Exécutez le programme et essayez-le
Dans l'exemple ci-dessus, vous pouvez voir :
L'instruction 1 définit la variable (var i=0) avant que la boucle ne commence.
L'instruction 2 définit les conditions d'exécution de la boucle (je dois être inférieur à 5).
L'instruction 3 incrémente une valeur (i++) à chaque fois que le bloc de code est exécuté.
Instruction 1
Habituellement, nous utilisons l'instruction 1 pour initialiser les variables utilisées dans la boucle (var i=0 ) .
La déclaration 1 est facultative, ce qui signifie que vous pouvez vous passer de la déclaration 1.
Vous pouvez initialiser n'importe quelle (ou plusieurs) valeurs dans l'instruction 1 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["小明","小龙","小奇","小涛"];
for (var i=0,l=cars.length; i<l; i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>Exécutez le programme et essayez-le
Vous pouvez également omettre l'instruction 1 ( tels que Lorsque la valeur a été définie avant le début de la boucle) :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=2,len=cars.length;
for (; i<len; i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>Exécutez le programme pour l'essayer
Déclaration 2
Habituellement, l'instruction 2 est utilisée pour évaluer la condition de la variable initiale.
La déclaration 2 est également facultative.
Si l'instruction 2 renvoie vrai, la boucle recommence, si elle renvoie faux, la boucle se termine.
Remarque : Si vous omettez l'instruction 2, alors break doit être fourni à l'intérieur de la boucle. Sinon, le cycle ne peut pas être arrêté. Cela peut faire planter le navigateur.
Déclaration 3
Habituellement, l'instruction 3 augmentera la valeur de la variable initiale.
La déclaration 3 est également facultative.
La déclaration 3 a de nombreuses utilisations. L'incrément peut être négatif (i--) ou supérieur (i=i+15).
L'instruction 3 peut également être omise (par exemple, lorsqu'il y a du code correspondant à l'intérieur de la boucle) :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0,len=cars.length;
for (; i<len; ){
document.write(cars[i] + "<br>");
i++;
}
</script>
</body>
</html>Exécutez Essayez le programme
Boucle For/In
L'instruction JavaScript for/in parcourt les propriétés de l'objet :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>Exécutez le programme et essayez-le
Nous expliquerons la boucle while et ferons /while en boucle dans le chapitre suivant.
section suivante