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
语句来跳过点前的迭代,并执行下一个迭代。
浏览器支持
通常该语句用于条件判断,如果条件为 true, 循环会继续执行,如果为 false,循环终止。
注意:
该参数可以省略。但是,不要忽略
分号 ";"。同样,如果你忽略了该参数,你必须在循环中提供跳出循环的条件。否则语句无限循环,会造成浏览器崩溃。
statement3
可选。在每次循环后执行该语句。通常该语句用于自增或自减计数变量。
注意:
该参数可以忽略(例如:
自增或自减值在循环内操作)
JavaScript 版本:
通过循环数组的索引打印出车名:
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 ==
{
continue;
}
text += "The number is " + i + "<br>";
}
尝试一下 »
使用 break 语句 - 循环代码块,但在变量 i 等于 "3" 时退出循环:
var text = ""
var i;
for (i = 0; i < 5; i++) {
if (i ==
{
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 语句参考手册