详解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 相关文章推荐
window.open不被拦截的实现代码
Aug 22 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
Node.js Domain 模块实例详解
Mar 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
一个数据采集类
2007/02/14 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
node实现分片下载的示例代码
2018/10/17 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python制作exe文件简单流程
2019/01/24 Python
基于Python中的yield表达式介绍
2019/11/19 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
培训讲师邀请函
2014/01/10 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Python+tkinter实现高清图片保存
2022/03/13 Python
Nginx跨域问题解析与解决
2022/08/05 Servers