JavaScript for loop
Loops can execute a block of code a specified number of times.
JavaScript Loops
Using a loop is convenient if you want to run the same code over and over again, with different values each time.
We can output the value of the array like this:
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>Run instance»
Click "Run Example" button to view online examples
Different types of loops
JavaScript supports different types of loops:
for - Loop through the code block a certain number of times
for/in - Loop through the properties of the object
while - Loops the specified code block when the specified condition is true
do/while - Likewise, when the specified condition is Loops over the specified block of code when true
For Loop
The for loop is a tool that you will often use when you want to create a loop.
The following is the syntax of the for loop:
{
Executed code block
}
Execute before statement 1 (code block) starts starts.
Statement 2 Defines the condition for running the loop (code block)
Statement 3 Execute after the loop (code block) has been executed
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>Run Instance»
Click the "Run Instance" button to view the online instance
From the above example, you can see:
Statement 1 sets the variable (var i=0) before the loop starts.
Statement 2 defines the conditions for the loop to run (i must be less than 5).
Statement 3 increments a value (i++) each time the block of code has been executed.
Statement 1
Usually we use statement 1 to initialize the variables used in the loop (var i=0).
Statement 1 is optional, which means you can not use statement 1.
You can initialize any (or multiple) values in statement 1:
Example
<!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>Run Example »
Click the "Run Instance" button to view the online instance
At the same time, you can also omit statement 1 (for example, when the value has been set before the loop starts):
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>Run Instance»
Click the "Run Instance" button to view the online instance
Statement 2
Normally statement 2 is used to evaluate the condition of the initial variable.
Statement 2 is also optional.
If statement 2 returns true, the loop starts again, if it returns false, the loop ends.
 | If you omit statement 2, then break must be provided inside the loop. Otherwise the cycle cannot be stopped. This may crash the browser. Please read about break later in this tutorial. |
|---|
Statement 3
Usually statement 3 will increase the value of the initial variable.
Statement 3 is also optional.
Statement 3 has many uses. The increment can be negative (i--), or larger (i=i+15).
Statement 3 can also be omitted (for example, when there is corresponding code inside the loop):
Example
<!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>Run Example»
Click the "Run Example" button to view the online example
For/In Loop
JavaScript for/in statement loops through the properties of the object:
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>Run Instance»
Click the "Run Instance" button to view the online instance
You will learn more about for / in loops in the chapter on JavaScript objects.
While Loop
We will explain to you the while loop and do/while loop in the next chapter.
