JavaScript for loop
Loops can execute a block of code a specified number of times.
JavaScript Loops
If you want to run the same code over and over again, with the same value each time Different, then it is very convenient to use loops.
JavaScript supports different types of loops:
for - loop a block of code a certain number of times
for/in - Loop through the properties of the object
while - Loop through the specified code block when the specified condition is true
do/ while - also loops the specified code block when the specified condition is true
##For loop
The for loop is a tool that you often use when you want to create a loop. The following is the syntax of the for loop:for (statement 1; statement 2; statement 3){
Executed code block
}
Statement 1 (code block) executes starts before starting.
Statement 2 defines the conditions for running the loop (code block)
Statement 3 is executed after the loop (block of code) has been executed
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>點(diǎn)擊按鈕循環(huán)代碼5次。</p>
<button onclick="myFunction()">點(diǎn)擊這里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "該數(shù)字為 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>Run the program to try it outFrom 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>Run the program to try itYou can also omit statement 1 (such as When the value has been set before the loop starts):
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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 the program to try itStatement 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.
Note: If you omit statement 2, you must provide a break inside the loop. Otherwise the cycle cannot be stopped. This may crash the browser.
Statement 3
Normally 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中文網(wǎng)(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 Try the program
For/In loop
JavaScript for/in statement loops through the properties of the object:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>點(diǎn)擊下面的按鈕，循環(huán)遍歷對象 "person" 的屬性。</p>
<button onclick="myFunction()">點(diǎn)擊這里</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 the program and try it
We will explain the while loop and do/while loop to you in the next chapter.
