详解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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
JavaScript实现单点登录的示例
Sep 23 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采用curl实现伪造IP来源的方法
2014/11/21 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php的socket编程详解
2016/11/20 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python读取与处理netcdf数据方式
2020/02/14 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
争先创优公开承诺书
2014/08/30 职场文书
逃课检讨书范文
2015/05/06 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers