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