JavaScript 循环:
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环
语法:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 (代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
<body>
<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
语句 1 初始化循环中所用的变量以在语句 1 中初始化任意(或者多个)值。
语句 2 用于评估初始变量的条件。如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。
语句 3 会增加初始变量的值,增量可以是负数 。
三个语句都是可选的,都可省略。
注意:
如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
语句 3 也可以省略(比如当循环内部有相应的代码时)。
For/In 循环
JavaScript for/in 语句循环遍历对象的属性:
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
for in 循环不仅可以遍历对象的属性,还可以遍历数组。
for...in 循环会自动跳过那些没被赋值的元素,而 for 循环则不会,它会显示出 undefined。
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var array = new Array();
var x;
var txt=""
array[0] = 1;
array[3] = 2;
array[4] = 3;
array[10] = 4;
for( x in array ){
alert(array[x]); // 依次显示出 1 2 3 4
}
alert(array.length); // 结果是11
for( var i=0 ; i<4 ; i++){
alert(array[i]); // 依次显示出 1 undefined undefined 2
}
document.getElementById("demo").innerHTML = txt;
}
</script>
while 循环
while 循环会在指定条件为真时循环执行代码块。
只要指定条件为 true,循环就可以一直执行代码块。
while (条件)
{
需要执行的代码
}
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
如果忘记增加条件中所用变量的值,该循环永远不会结束。
do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
do/while 循环。该循环至少会执行一次,即使条件为 false 它也会执行一次,
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
Break 和 Continue 语句
break 语句用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
for (i=0;i<10;i++)
{
if (i==3)
{
break; // if 语句只有一行代码,所以可以省略花括号
}
x=x + "The number is " + i + "<br>";
}
/*
结果为:
该数字为 0
该数字为 1
该数字为 2
*/
continue 用于跳过循环中的一个迭代。
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}
/*结果为:
该数字为 0
该数字为 1
该数字为 2
该数字为 4
该数字为 5
该数字为 6
该数字为 7
该数字为 8
该数字为 9
*/
标记 JavaScript 语句,请在语句之前加上冒号:
label:
statements
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
/*BMW
Volvo
Saab
*/
有了标签,可以使用break和continue在多层循环的时候控制外层循环。
<script>
outerloop:
for (var i = 0; i < 10; i++)
{
innerloop:
for (var j = 0; j < 10; j++)
{
if (j > 3)
{
break;
}
if (i == 2)
{
break innerloop;
}
if (i == 4)
{
break outerloop;
}
document.write("i=" + i + " j=" + j +"<br/>");
}
}
</script>
/*i=0 j=0
i=0 j=1
i=0 j=2
i=0 j=3
i=1 j=0
i=1 j=1
i=1 j=2
i=1 j=3
i=3 j=0
i=3 j=1
i=3 j=2
i=3 j=3
*/