JavaScript 循环控制
JavaScript 提供了完全的控制,来处理循环和 switch 语句。可能在某一情况下,在没有到循环完全结束时,你需要提早跳出循环。也可能存在这种情况,可能你想要跳过某一次循环,开始执行下一个循环。
JavaScript 提供 continue 和 break 语句来处理上面提及的情况。这些语句用于立即跳出循环或开始循环的下一次迭代。
break 语句
break 语句,在 switch 语句中简要介绍了,用于打破封闭的大括号,提前退出循环。
流程图
break 语句的流程图如下所示:
示例
下面的示例说明了在循环中如何使用 break 语句。请注意一旦 x 值达到 5 便直接跳到大括号结束处正下方的 document.write(…) 语句。
<html>
<body>
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
if (x == 5){
// breaks out of loop completely
break;
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output Entering the loop 2 3 4 5 Exiting the loop! Set the variable to different value and then try...
如果想查看 break 在 switch 语句中,可以查看:
continue 语句
Continue 语句告诉翻译器跳过当前其余的代码块,立即开始循环的下一次迭代。当遇到 continue 语句时,程序流程立即移动到循环检测条件,如果循环条件仍然是真,则重新开始下一次迭代,否则退出循环。
示例
此示例演示了如何在 while 循环中使用 continue 语句。请注意当变量 x 的值达到 5 后便跳过打印,跳过其余代码块,重新回到循环条件判别处。
<html>
<body>
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
x = x + 1;
if (x == 5){
// skill rest of the loop body
continue;
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output Entering the loop 2 3 4 6 7 8 9 10 Exiting the loop!
使用标签来控制循环
从 JavaScript 1.2 开始,一个标签可以被用来中断和继续循环控制流。标签只是一个标识符, 后面跟着一个冒号(:),然后应用于一个语句或代码块中。下面我们将看到两个不同的示例,来了解如何结合 break 与 continue 来使用标签 。
注意 'break' 或 'continue' 语句和其标签名称之间不允许有换行符。此外,在标签名称和关联循环之间不应该有其它语句。
请尝试以下两个实例来更好的理解标签。
示例1
下面的示例演示了结合 break 语句如何使用标签。
<html>
<body>
<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 5; i++)
{
document.write("Outerloop: " + i + "<br />");
innerloop:
for (var j = 0; j < 5; j++)
{
if (j > 3 ) break ; // Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) break outerloop; // Quit the outer loop
document.write("Innerloop: " + j + " <br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
</body>
</html>
Output Entering the loop! Outerloop: 0 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 1 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 2 Outerloop: 3 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 4 Exiting the loop!
实例2
<html>
<body>
<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 3; i++)
{
document.write("Outerloop: " + i + "<br />");
for (var j = 0; j < 5; j++)
{
if (j == 3){
continue outerloop;
}
document.write("Innerloop: " + j + "<br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
</body>
</html>
Output Entering the loop! Outerloop: 0 Innerloop: 0 Innerloop: 1 Innerloop: 2 Outerloop: 1 Innerloop: 0 Innerloop: 1 Innerloop: 2 Outerloop: 2 Innerloop: 0 Innerloop: 1 Innerloop: 2 Exiting the loop!
1 Comment
JavaScript的自我修养