JavaScript for 语句

定义和用法

for 语句创建循环,只要条件为真就执行该循环。

只要条件为真,循环就会继续运行。只有当条件变为假时它才会停止。

JavaScript 支持不同类型的循环:

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

提示:请使用 break 语句跳出循环,使用 continue 语句跳过循环中的某个值。

实例

循环代码块五次:

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

亲自试一试

页面下方有更多 TIY 实例。

语法

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

参数值

参数 描述
statement1

可选。在循环(代码块)开始之前执行。通常此语句用于初始化计数器变量。如需初始化多个值,请用逗号分隔每个值。

注释:该参数可以省略。但是,不要省略分号 ";"

statement2

可选。定义运行循环(代码块)的条件。通常此语句用于评估计数器变量的条件。如果返回 true,循环将重新开始,如果返回 false,循环将结束。

注释:该参数可以省略。但是,不要省略分号 ";"。此外,如果省略此参数,则必须在循环内提供 break。否则循环将永远不会结束,这将使您的浏览器崩溃。

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),循环就会继续
  • 每次循环执行时,变量加一 (i++)
  • 一旦变量不再小于 4(数组的长度),条件为假,循环结束

实例

在第一个参数中初始化多个值:

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 += "The number is " + 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>";
}

亲自试一试

实例

省略第二个参数。在这个例子中,我们也使用 break 语句在 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 + " ";
  }
}

亲自试一试

浏览器支持

语句 Chrome IE Firefox Safari Opera
for 支持 支持 支持 支持 支持

相关页面

JavaScript 教程:JavaScript For 循环

JavaScript 参考手册:JavaScript for ... in 语句

JavaScript 参考手册:JavaScript break 语句

JavaScript 参考手册:JavaScript continue 语句

JavaScript 参考手册:JavaScript while 语句