详解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 相关文章推荐
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
微信小程序登录换取token的教程
May 31 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php简单的上传类分享
2016/05/15 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
javascript读取xml
2006/11/04 Javascript
又一个小巧的图片预加载类
2007/05/05 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
softmax及python实现过程解析
2019/09/30 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python处理RSTP视频流过程解析
2020/01/11 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
消防应急演练方案
2014/02/12 职场文书
简单的项目建议书模板
2014/03/12 职场文书
项目采购员岗位职责
2014/04/15 职场文书
吨的认识教学反思
2014/04/27 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
二年级学生期末评语
2014/12/26 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
解除合同协议书范本
2016/03/21 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP