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中文网(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 the program to try it out

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:

<!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>

Run the program to try it

You 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中文网(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 it

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.

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中文网(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中文网(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 the program and try it

We will explain the while loop and do/while loop to you in the next chapter.

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

JavaScript for loop

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]