详解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 相关文章推荐
js中取得变量绝对值的方法
Jan 03 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
JS提交form表单实例分析
Dec 10 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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如何利用P3P实现跨域
2013/08/24 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Spy++的使用方法及下载教程
2021/01/29 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
工作疏忽检讨书
2014/01/25 职场文书
七年级政治教学反思
2014/02/03 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
六一儿童节主持词
2014/03/21 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015大学迎新标语
2015/07/16 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL