非常教程

JavaScript 参考手册教程

JavaScript for 语句

JavaScript for 语句

JavaScript for 语句

JavaScript for 语句

JavaScript 语句参考手册

实例

循环代码块5次:

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

text 输出结果为:

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

尝试一下 »

本文底部包含了更多实例。


定义和用法

for 语句只要判断条件为 true 就会一直执行。

只要条件为 true,循环就有持续执行,直到条件为 false。

for 循环是您在希望创建循环时常会用到的工具。

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

提示: 使用 break 语句来跳出循环,使用continue 语句来跳过点前的迭代,并执行下一个迭代。


浏览器支持

语句
for Yes Yes Yes Yes Yes


语法

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

参数值

参数 描述
statement1 可选。在循环之前执行,用于变量的初始化,初始化多个变量使用逗号隔开(,)。

注意: 该参数可以省略。但是,不要忽略 分号 ";"。
statement2 可选。定义执行循环的条件。 通常该语句用于条件判断,如果条件为 true, 循环会继续执行,如果为 false,循环终止。

注意: 该参数可以省略。但是,不要忽略 分号 ";"。同样,如果你忽略了该参数,你必须在循环中提供跳出循环的条件。否则语句无限循环,会造成浏览器崩溃。
statement3 可选。在每次循环后执行该语句。通常该语句用于自增或自减计数变量。

注意: 该参数可以忽略(例如: 自增或自减值在循环内操作)

技术细节

JavaScript 版本: 1.0


JavaScript for 语句

更多实例

实例

通过循环数组的索引打印出车名:

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 语句 - 循环代码块,但跳过 i 等于 "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" 时退出循环  (如果第二个参数忽略,你必须在循环体内设置跳出循环条件。否则循环无法终止,会导致浏览器崩溃):

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 教程: JavaScript For 循环

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

JavaScript 参考手册: JavaScript break 语句

JavaScript 参考手册: JavaScript continue 语句

JavaScript 参考手册: JavaScript while 语句


JavaScript for 语句

JavaScript 语句参考手册
JavaScript for 语句
JavaScript 参考手册

JavaScript 参考手册提供了完整的 JavaScript 对象、浏览器对象、HTML DOM 对象手册。手册包含了每个对象、属性、方法的实例。

JavaScript 参考手册目录

1.Navigator 对象
2.HTML DOM Document 对象
3.JavaScript Array 属性构造器
4.JavaScript length 属性
5.JavaScript constructor 属性
6.JavaScript unshift() 方法
7.JavaScript valueOf() 方法
8.JavaScript sort() 方法
9.JavaScript splice() 方法
10.JavaScript toString() 方法
11.JavaScript Array indexOf() 方法
12.JavaScript join() 方法
13.JavaScript Array lastIndexOf() 方法
14.JavaScript pop() 方法
15.JavaScript push() 方法
16.JavaScript reverse() 方法
17.JavaScript shift() 方法
18.JavaScript slice() 方法
19.JavaScript Array 对象
20.JavaScript concat() 方法
21.JavaScript Boolean prototype 构造器
22.JavaScript Boolean constructor 属性
23.JavaScript getMilliseconds() 方法
24.JavaScript getHours() 方法
25.JavaScript getFullYear() 方法
26.JavaScript getDay() 方法
27.JavaScript getDate() 方法
28.JavaScript Date prototype 属性
29.JavaScript constructor 属性
30.JavaScript Boolean 对象
31.JavaScript valueOf() 方法
32.JavaScript toString() 方法
33.JavaScript UTC() 方法
34.JavaScript getUTCFullYear() 方法
35.JavaScript toLocaleString() 方法
36.JavaScript toString() 方法
37.JavaScript toTimeString() 方法
38.JavaScript toUTCString() 方法
39.JavaScript valueOf() 方法
40.JavaScript toISOString() 方法
41.JavaScript toJSON() 方法
42.JavaScript toLocaleDateString() 方法
43.JavaScript toLocaleTimeString() 方法
44.JavaScript setUTCHours() 方法
45.JavaScript setUTCMilliseconds() 方法
46.JavaScript setUTCMinutes() 方法
47.JavaScript setUTCMonth() 方法
48.JavaScript setUTCSeconds() 方法
49.JavaScript toDateString() 方法
50.JavaScript getSeconds() 方法
51.JavaScript getMonth() 方法
52.JavaScript getMinutes() 方法
53.JavaScript setMinutes() 方法
54.JavaScript setMonth() 方法
55.JavaScript setSeconds() 方法
56.JavaScript Date 对象
57.JavaScript setTime() 方法
58.JavaScript setUTCDate() 方法
59.JavaScript setUTCFullYear() 方法
60.JavaScript getUTCSeconds() 方法
61.JavaScript parse() 方法
62.JavaScript setDate() 方法
63.JavaScript setFullYear() 方法
64.JavaScript setHours() 方法
65.JavaScript setMilliseconds() 方法
66.JavaScript getUTCDay() 方法
67.JavaScript getUTCDate() 方法
68.JavaScript getTimezoneOffset() 方法
69.JavaScript getTime() 方法
70.JavaScript E 属性
71.JavaScript getUTCHours() 方法
72.JavaScript getUTCMilliseconds() 方法
73.JavaScript getUTCMinutes() 方法
74.JavaScript getUTCMonth() 方法
75.JavaScript random() 方法
76.JavaScript round() 方法
77.JavaScript sin() 方法
78.JavaScript sqrt() 方法
79.JavaScript tan() 方法
80.JavaScript atan2() 方法
81.JavaScript ceil() 方法
82.JavaScript cos() 方法
83.JavaScript exp() 方法
84.JavaScript floor() 方法
85.JavaScript log() 方法
86.JavaScript max() 方法
87.JavaScript min() 方法
88.JavaScript pow() 方法
89.JavaScript SQRT1_2 属性
90.JavaScript SQRT2 属性
91.JavaScript abs() 方法
92.JavaScript acos() 方法
93.JavaScript asin() 方法
94.JavaScript atan() 方法
95.JavaScript Math 对象
96.JavaScript LN2 属性
97.JavaScript LN10 属性
98.JavaScript LOG2E 属性
99.JavaScript LOG10E 属性
100.JavaScript PI 属性