JavaScript pour la boucle
Les boucles exécutent un bloc de code un nombre de fois spécifié.
Boucles JavaScript
L'utilisation de boucles est pratique si vous souhaitez exécuter le même code encore et encore, avec des valeurs différentes à chaque fois.
Nous pouvons afficher la valeur du tableau comme ceci :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Différents types de boucles
JavaScript prend en charge différents types de boucles :
for - Parcourez le bloc de code un certain nombre de fois
for/in - Parcourez les propriétés du object
while - Boucle 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 Boucle le bloc de code spécifié lorsqu'il est vrai
Boucle For
La boucle for est un outil que vous sera souvent utilisé lorsque vous souhaitez créer une boucle.
Voici la syntaxe de la boucle for :
{
Le bloc de code exécuté
>
L'instruction 1 (bloc de code) est exécutée avant de démarrer commence.
L'instruction 2 définit la condition sous laquelle la boucle (bloc de code) est exécutée
L'instruction 3 est exécutée après la boucle ( bloc de code) a été exécuté
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écuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Dans l'exemple ci-dessus, vous pouvez voir :
L'instruction 1 définit la variable (var i=0) avant le début de la boucle.
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é.
Déclaration 1
Habituellement, nous utiliserons 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 :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0,l=cars.length; i<l; i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
En même temps, vous pouvez également omettre l'instruction 1 (par exemple, lorsque la valeur a été définie avant le la boucle démarre) :
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écuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne exemple
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.
 | 如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。 |
|---|
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écuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Boucle For/In
Instruction JavaScript for/in parcourt les propriétés de l'objet :
Instance
<!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écuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour visualiser l'instance en ligne
Vous en apprendrez plus sur les boucles for/in dans le chapitre sur les objets JavaScript.
While Loop
Nous vous expliquerons la boucle while et la boucle do/while dans le prochain chapitre.
