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的自我修养