详解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 相关文章推荐
解析jquery获取父窗口的元素
Jun 26 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
讲解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实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python版名片管理系统
2018/11/30 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Pycharm github配置实现过程图解
2020/10/13 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
幼儿教师培训感言
2014/03/08 职场文书
会计人员岗位职责
2014/03/19 职场文书
公休请假条
2014/04/11 职场文书
商超业务员岗位职责
2015/02/13 职场文书