详解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遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
js实现模糊匹配功能
Feb 15 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
微信小程序手动添加收货地址省市区联动
May 18 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
模仿OSO的论坛(二)
2006/10/09 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php调用shell的方法
2014/11/05 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 合并文件的具体实例
2013/08/08 Python
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python config文件的读写操作示例
2019/09/27 Python
python用Configobj模块读取配置文件
2020/09/26 Python
python利用faker库批量生成测试数据
2020/10/15 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
护理实习自我鉴定
2013/12/14 职场文书
心得体会范文
2014/01/04 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
七年级生物教学反思
2016/02/20 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
golang中的struct操作
2021/11/11 Golang