详解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实现控制div颜色
Jul 07 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
JS中常用的消息框总结
Feb 24 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
浅谈vue权限管理实现及流程
Apr 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 多关键字 高亮显示实现代码
2012/04/23 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
javascript读取xml
2006/11/04 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python中的Numpy入门教程
2014/04/26 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
八年级语文教学反思
2014/02/11 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
党校学习个人总结
2015/02/15 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
在人间读书笔记
2015/06/30 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
Redis高并发缓存架构性能优化
2022/05/15 Redis