Home > Article > Web Front-end > Keyword examples of three js loops (for and while)_Basic knowledge
Three ways to write loops:
<!doctype html> <title>js循环 by 脚本之家</title> <meta charset="utf-8"/> <meta name="keywords" content="js循环 by 脚本之家" /> <meta name="description" content="js循环 by 脚本之家" /> </head> <body> //while循环 <script type="text/javascript"> i = 1; while (i <= 6) { document.write("<h" + i+">脚本之家,这是标题"+i); document.write("</h"+i+">"); i++; } </script> //do_whilel循环 <script type="text/javascript"> i = 1; do { document.write("<h" + i+">jb51.net ,这是标题"+i); document.write("</h"+i+">"); i++; } while(i<=6); </script> //for循环 <script type="text/javascript"> for(i=1;i<=6;i++) { document.write("<h"+i+">脚本之家,这是标题"+i); document.write("</h"+i+">"); } </script> </body> </html>
Different types of loops
JavaScript supports different types of loops:
•for - loop through a block of code a certain number of times
•for/in - Loop through the properties of an object
•while - Loop through the specified block of code when the specified condition is true
•do/while - also loops through the specified code block when the specified condition is true
For loop
The for loop is a tool you will 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)
{
The executed code block
}
Statement 1 is executed before the loop (code block) starts
Statement 2 defines the condition for running the loop (block of code)
Statement 3 is executed after the loop (block of code) has been executed
Example
Try it for yourself
From the example above, 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 do it without using statement 1.
You can initialize any (or multiple) values in statement 1:
Example:
You can also omit statement 1 (for example, when the value has been set before the loop starts):
Example:
Statement 2
Usually 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.
Tip: If you omit statement 2, you must provide a break inside the loop. Otherwise the cycle cannot be stopped. This may crash the browser. Please read about break later in this tutorial.
Statement 3
Normally statement 3 will increase the value of the initial variable.
Statement 3 is also optional.
Statement 3 can be used in several ways. 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:
For/In loop
JavaScript for/in statement loops through the properties of an object:
Example
For details, please refer to this article: http://www.jb51.net/w3school/js/js_loop_for.htm