JavaScript forStatement

JavaScript 语句参考手册JavaScript Statement Reference

Examples

Loop through a block of code 5 times:

var text = "";
var i;
for (i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
}

textThe output result is:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

Try it yourself »

More examples are included at the bottom of this article.

Definition and Usage

The for statement keeps executing as long as the condition is true.

As long as the condition is true, the loop will continue to execute until the condition is false.

The for loop is a tool you will often use when you want to create a loop.

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 loop through the specified block of code when the specified condition is true

Tip:Usebreakstatement to break out of the loop, usecontinuestatement to skip the current iteration and execute the next iteration.

Browser Support

Statement
for Yes Yes Yes Yes Yes

Syntax

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

Parameter Values

Parameter Description
statement1 Optional. Executed before the loop, used to initialize variables. Separate multiple initialized variables with commas (,).

Note:This parameter can be omitted. However, do not ignore the semicolon ";".
statement2 Optional. Defines the condition for executing the loop. Usually this statement is used for conditional judgment. If the condition is true, the loop continues to execute; if false, the loop terminates.

Note:This parameter can be omitted. However, do not ignore the semicolon ";". Also, if you omit this parameter, you must provide a condition to break out of the loop inside the loop. Otherwise, the statement will loop infinitely and cause the browser to crash.
statement3 Optional. Executes this statement after each loop. Usually this statement is used to increment or decrement the counter variable.

Note:This parameter can be omitted (for example, increment or decrement values are handled inside the loop)

Technical Details

JavaScript Version: 1.0

实例

More Examples

Examples

Print car names by looping through the array indices:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}

Try it yourself »

Explanation of the above example:

  • First, we set a variable before the loop starts (var i = 0;)
  • Then, we defined the condition for executing the loop. The loop will keep executing as long as the variable's value is less than the array's length (length is 4)
  • Each time the loop executes, the variable increments by 1 (i++)
  • If the variable is no longer less than 4 (the array's length), the condition is false, and the loop exits.

Examples

Initialize multiple values in the first parameter:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
    text += cars[i] + "<br>";
}

Try it yourself »

Examples

Omit the first parameter (set the value before the loop):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
    text += cars[i] + "<br>";
}

Try it yourself »

Examples

Use the continue statement - loop through a block of code, but skip the iteration where i equals "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        continue;
    }
    text += "The number is " + i + "<br>";
}

Try it yourself »

Examples

Use the break statement - loop through a block of code, but exit the loop when the variable i equals "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        break;
    }
    text += "The number is " + i + "<br>";
}

Try it yourself »

Example:

Omit the second parameter. In this example, we also used thebreakstatement to exit the loop when i equals "3" (if the second parameter is omitted, you must set a condition to break out of the loop inside the loop body. Otherwise, the loop cannot be terminated and will cause the browser to crash):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
    if (i == 3) {
        break;
    }
    text += cars[i] + "<br>";
}

Try it yourself »

Examples

Loop through the array indices in descending order:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
    text += cars[i] + "<br>";
}

Try it yourself »

Examples

Omit the last parameter and increment the value inside the loop body:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
for (; i < len;) {
    text += cars[i] + "<br>";
    i++;
}

Try it yourself »

Examples

Loop through the nodes of the NodeList object and modify the background color of all <p> elements in the list:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

Try it yourself »

Examples

Nested loop example:

var text = "";
var i, j;

for (i = 0; i < 3; i++) {
    text += "<br>" + "i = " + i + ", j = ";

    for (j = 10; j < 15; j++) {
        document.getElementById("demo").innerHTML = text += j + " ";
    }
}

Try it yourself »

Related Pages

JavaScript Tutorial:JavaScript For Loop

JavaScript Reference:JavaScript for ... in Statement

JavaScript Reference:JavaScript break Statement

JavaScript Reference:JavaScript continue Statement

JavaScript Reference:JavaScript while Statement

JavaScript 语句参考手册JavaScript Statement Reference Other Extensions