详解JavaScript中循环控制语句的用法


Posted in Javascript onJune 03, 2015

 JavaScript提供完全控制来处理循环和switch语句。可能有一种情况,当你需要退出一个循环,但未达到其底部。也可能有一种情况,当要跳过的码块的一部分,并直接开始下一个迭代。

为了处理这些情况下,JavaScript提供了break和continue语句。这些语句是用来马上退出任何循环或启动循环的下一次迭代。
break 语句:

break语句,这是简单地用switch语句介绍,用于提前退出循环,打破封闭的花括号。
例子:

这个例子说明了如何使用break语句同while循环。请注意循环打破了初期由x到5,document.write(..) 语句的正下方,以右大括号:

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

这将产生以下结果:

Entering the loop
2
3
4
5
Exiting the loop!

我们已经看到break语句在switch语句中使用。
continue 语句:

continue语句告诉解释器立即启动循环的下一次迭代,并跳过其余的代码块。

当遇到continue语句,程序流程将立即转移到循环检查表达式,如果条件保持真,那么就开始下一个迭代,否则控制退出循环。
例子:

这个例子说明使用continue语句同while循环。请注意continue语句用于跳过打印时指数变量x到达5:

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
 x = x + 1;
 if (x == 5){ 
   continue; // skill rest of the loop body
 }
 document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

这将产生以下结果:

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!

 
使用标签来控制流程:

从JavaScript1.2开始,标签可以与break及continue使用,继续更精确地控制流程。

标签是简单的标识符随后被施加到一个语句或代码块冒号。看到两个不同的例子来了解标签使用突破,并继续。

注:换行符是不是继续还是分手声明,其标签名称之间允许的。此外,不应该有一个标签名称和相关联的回路之间的任何其它声明。
实例1:

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

这将产生以下结果:

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:

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

这将产生以下结果:

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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 #Javascript
JavaScript中for循环的使用详解
Jun 03 #Javascript
详解JavaScript的while循环的使用
Jun 03 #Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 #Javascript
JavaScript中switch语句的用法详解
Jun 03 #Javascript
jquery中添加属性和删除属性
Jun 03 #Javascript
JavaScript中的条件判断语句使用详解
Jun 03 #Javascript
You might like
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHP异常处理Exception类
2015/12/11 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python 切片和range()用法说明
2013/03/24 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python实现中文转换url编码的方法
2016/06/14 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
python输入中文的实例方法
2020/09/14 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
项目申报专员岗位职责
2014/07/09 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android