详解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 相关文章推荐
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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中ob_start()函数的用法
2013/06/24 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python 修改列表中的元素方法
2018/06/26 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
小小的船教学反思
2014/02/21 职场文书
大学开学计划书
2014/04/30 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
后勤个人工作总结
2015/02/28 职场文书
家长会开场白和结束语
2015/05/29 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书