详解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 居中漂浮广告
Mar 21 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
Vuex入门到上手教程
Jun 20 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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 函数使用方法与函数定义方法
2010/05/09 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
python将字典内容存入mysql实例代码
2018/01/18 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
内业资料员岗位职责
2014/01/04 职场文书
社区创先争优承诺书
2014/08/30 职场文书
企业法人任命书
2015/09/21 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
Django drf请求模块源码解析
2021/06/08 Python
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS