JavaScript for 语句参考

JavaScript for 语句

for语句会创建一个循环。只要条件为真，循环将继续运行。它只会在条件变为假时停止。

JavaScript支持不同类型的循环：

for - 循环遍历代码块多次
for/in - 遍历对象的属性
while - 在指定条件为真时循环遍历代码块
do/while - 循环遍历一段代码，然后在指定条件为真时重复循环

提示：使用break语句中断循环，使用continue语句跳过循环中的值。

循环遍历一段代码五次：

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "数字是： " + i + "<br>";
}

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
语句
for	支持	支持	支持	支持	支持

语法

for (statement 1; statement 2; statement 3) { 循环执行的代码块 }

参数值

参数	描述
statement1	可选的。在循环（代码块）开始之前执行。通常，此语句用于初始化计数器变量。要启动多个值，请使用逗号分隔每个值。注意：此参数可以省略。但是，不要省略分号“;”
statement2	可选的。定义运行循环的条件（代码块）。通常，此语句用于评估计数器变量的条件。如果它返回true，循环将重新开始，如果返回false，循环将结束。注意：此参数可以省略。但是，不要省略分号“;”。此外，如果省略此参数，则必须在循环内提供中断。否则循环将永远不会结束，这将使您的浏览器崩溃
statement3	可选的。每次执行循环（代码块）后执行。通常，此语句用于递增或递减计数器变量。注意：可以省略此参数（例如，增加/减少循环内的值）

技术细节

项目	描述
JavaScript版本：	ECMAScript 1

更多例子

循环遍历数组的索引以从cars数组中收集汽车名称：

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

尝试一下

上面的例子说明：

首先，我们在循环开始之前设置一个变量（var i = 0;）然后，我们定义循环运行的条件。只要变量小于数组的长度（为4），循环就会继续每次循环执行时，变量加1（i++），一旦变量不再小于4（数组的长度），条件为false，循环结束

在第一个参数中启动多个值：

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

尝试一下

省略第一个参数（循环开始前的设置值）：

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

尝试一下

使用continue语句 - 循环遍历代码块，但跳过值“3”：

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "数字是： " + i + "<br>";
}

尝试一下

使用break语句 - 循环遍历代码块，但在变量i等于“3”时退出循环：

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

尝试一下

省略第二个参数。在这个例子中，当i等于“3”时，我们也使用break语句来退出循环（如果省略第二个参数，你必须在循环中提供一个中断。否则循环将永远不会结束，你的浏览器将会崩溃）：

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

尝试一下

循环遍历数组的索引，按降序（负增量）：

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

尝试一下

省略最后一个参数，并增加循环内的值：

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

尝试一下

循环遍历NodeList对象的节点并更改列表中所有<p>元素的背景颜色：

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

尝试一下

嵌套循环的示例（循环内的循环）：

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 + " ";
  }
}

尝试一下

JavaScript for 语句参考