1

JavaScript 循环控制

Posted by 撒得一地 on 2016年5月6日 in JavaScript教程

JavaScript 提供了完全的控制,来处理循环和 switch 语句。可能在某一情况下,在没有到循环完全结束时,你需要提早跳出循环。也可能存在这种情况,可能你想要跳过某一次循环,开始执行下一个循环。

JavaScript 提供 continue 和 break 语句来处理上面提及的情况。这些语句用于立即跳出循环或开始循环的下一次迭代。

break 语句

break 语句,在 switch 语句中简要介绍了,用于打破封闭的大括号,提前退出循环。

流程图

break 语句的流程图如下所示:

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

Comments are closed. Would you like to contact the author directly?
网站地图|XML地图

Copyright © 2015-2024 技术拉近你我! All rights reserved.
闽ICP备15015576号-1 版权所有©psz.