Javascript - 退出循环语句

首页 / JavaScript入门教程 / Javascript - 退出循环语句

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 - 退出循环语句》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

好记忆不如烂笔头。留下你的足迹吧 :)

猜你喜欢

代码精进之路 -〔范学雷〕

玩转webpack -〔程柳锋〕

说透中台 -〔王健〕

架构实战案例解析 -〔王庆友〕

文件夹共享容器中的 Nextjs 页面

Vue3在js文件中使用全局变量

为什么“添加”类型不满足约束“数字”?

使用 IntlDateTimeFormat 返回 AM/PM

没有输入时如何隐藏货币符号?

使用 javascript/Jquery 在 MouseOver 后删除元素的 colored颜色

视频教程

JavaScript - 26-循环作业 更多视频教程 »