Javascript - 退出循环

首页 / JavaScript / Loop Control

JavaScript提供了完全控制来处理循环和switch语句,当您想跳过一部分代码块并开始循环的下一次迭代时,可能还会出现这种情况。

为了处理所有此类情况,JavaScript提供了 breakcontinue 语句,这些语句分别用于立即退出任何循环或开始任何循环的下一个迭代。

Break 语句

break 语句用于提前退出循环。

以下示例说明了带while循环的 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) {
               break;   //breaks out of loop completely
            }
            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>

运行上面代码输出

Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...

我们已经在 switch 语句中看到了 break 语句的用法。

continue 语句

continue 语句告诉解释器立即开始循环的下一个迭代,并跳过剩余的代码块。当遇到 continue 语句时,程序流立即移至循环检查表达式,如果条件仍然为true,则它将开始下一次迭代,否则控件退出循环。

此示例说明了带有while循环的 continue 语句的用法。注意当变量 x 中保存的索引达到5时,如何使用 continue 语句跳过打印-

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var x = 1;
            document.write("Entering the loop<br /> ");
         
            while (x < 10) {
               x = x + 1;
               
               if (x == 5) {
                  continue;   //skip rest of the loop body
               }
               document.write( x + "<br />");
            }         
            document.write("Exiting the loop!<br /> ");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

运行上面代码输出

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

Labels 标签语句

从JavaScript 1.2开始,标签可以与 breakcontinue 一起使用,以更精确地控制流程。 标签只是标识符,后跟一个冒号(:),该冒号用于语句或代码块。我们将看到两个不同的示例,以了解如何使用带有breakcontinue的标签。

以下示例显示如何使用break语句实现Label

<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>

运行上面代码输出

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!
以下示例显示如何使用 continue 语句实现 Label
<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>

运行上面代码输出

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!

这一章《Javascript - 退出循环》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

相关文章

全栈工程师修炼指南 -〔熊燚(四火) - 46讲〕

To B市场品牌实战课 -〔曹林 - 22讲〕

零基础实战机器学习 -〔黄佳 - 24讲〕

编程高手必学的内存知识 -〔海纳 - 32讲〕

jQuery在按钮单击时删除以前应用的css样式

如何有条件地在 Angular Reactive Form 中设置 [disabled] 属性...

获取但只获取状态?

以Angular 删除 beforeunload 事件

如何在javascript中同步使用setTimeout?

如何将主 js 文件中的数组用于不同的 js 文件?

视频推荐〔JavaScript - 30-统计出现次数最多的字符(下)〕

更多视频 »
好记忆不如烂笔头。留下你的足迹吧 :)