详解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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Python短信轰炸的代码
2020/03/25 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
几个SQL的面试题
2014/03/08 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
新员工辞职信范文
2015/05/12 职场文书
什么是SOLID
2022/03/24 Javascript
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL