详解JavaScript中循环控制语句的用法

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!
赞 (0)

相关推荐

  • javascript 循环语句 while、do-while、for-in、for用法区别

    前两个唯一的差别就是循环和判断的顺序不同,do-while比while多循环一次,我就不举例了. for循环相信大家也熟的不能再熟了,我们就看for-in这一句. 这个其实是针对数组的,js中数组的初始化也挺奇特的比如我们在script结点里写:(另外注意下数组的初始化,用的是中括号) "); var a=[3,4,5,7]; for(var test in a){ document.write(test+": "+a[test]+""); } -->

  • JavaScript中使用Callback控制流程介绍

    javascript中随处可见的callback对于流程控制来说是一场灾难,缺点显而易见: 1.没有显式的return,容易产生多余流程,以及由此引发的bug. 2.造成代码无限嵌套,难以阅读. 下面就来说说怎么解决避免上述的问题. 第一个问题是一个习惯问题,在使用callback的时候往往会让人忘了使用return,这种情况在使用coffee-script的时候尤甚(虽然它在编译成javascript时会自行收集最后的数据作为返回值,但是这个返回值并不一定代表你的初衷).看看下面的例子. 复制

  • javascript下for循环用法小结

    我们最常用的一种是 for(循环变量初值;循环条件;递增值){语句;}  例 for(var x=0;x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面说下其它的用法  (1)省略表达式1,这个时候应在for语句前给循环变量赋初值,注意其后的;不能省略  例: var x=0; for(;x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] (2) 省略表达式2,也就是循环条件循环无终止进行,也就是表达式2始终为真.  例: for(var x=0;;x++) { d

  • 跟我学习javascript的for循环和for...in循环

    大家都知道在JavaScript中提供了两种方式迭代对象: for 循环: for..in循环: 一.for循环 不足: 在于每次循环的时候数组的长度都要去获取: 终止条件要明确: 在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象.通常的循环形式如下: // 次佳的循环 for (var i = 0; i < myarray.length; i++) { // 使用myarray[i]做点什么 } 这种形式的循环的不足在于每次循环的

  • javascript while语句和do while语句的区别分析

    while语句: 复制代码 代码如下: var i = 1;  while(i<10)  {      document.write(i);      i++;  } do while语句:  复制代码 代码如下: var i = 1;  do  {      document.write(i);      i++; }while(i<10); 从上边例子中我们来分析它们的两点不同: 1.因为while语句总是先检测循环表达式,所以它的循环体可能一次都不执行:而do/while语句是在循环底部

  • 整理Javascript流程控制语句学习笔记

    1.做判断(if语句) if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件){ 条件成立时执行代码 } 例子:假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司. <script type="text/javascript"> var mycarrer = "HTML"; if (mycarrer == "HTML"){ document.write("你面试成功,欢迎加入公

  • javascript Onunload与Onbeforeunload使用小结

    Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取:而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用.Onunload是无法阻止页面的更新和关闭的.而Onbeforeunload 可以做到.曾经做一个考试系统,涉及到防止用户半途退出考试(有意或者无意),代码如下: 复制代码 代码如下: <body onbeforeunload=" checkLeave()"&

  • Javascript技巧之不要用for in语句对数组进行遍历

    一,为什么不要用for in语句 jqModal这个jquery插件估计很多人都使用过,在jqModal源码内部,有一个函数为hs,其中有个嵌套循环如下, 复制代码 代码如下: for(var i in {jqmShow:1,jqmHide:1}) for(var s in this[i]) if(H[this[i][s]]) H[this[i][s]].w[i](this); return F; } 第一个for in遍历的目标是个匿名对象,没有问题. 第二个for in遍历,根据上下文确认t

  • 详解JavaScript中循环控制语句的用法

    JavaScript提供完全控制来处理循环和switch语句.可能有一种情况,当你需要退出一个循环,但未达到其底部.也可能有一种情况,当要跳过的码块的一部分,并直接开始下一个迭代. 为了处理这些情况下,JavaScript提供了break和continue语句.这些语句是用来马上退出任何循环或启动循环的下一次迭代. break 语句: break语句,这是简单地用switch语句介绍,用于提前退出循环,打破封闭的花括号. 例子: 这个例子说明了如何使用break语句同while循环.请注意循环打

  • 详解JavaScript中typeof与instanceof用法

    今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefined") 以前用得少,就顺便查了一下关于typeof的那些事 typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: number,boolean,string,function(函数),object(NULL,数组,对象),undefined. 如: alert(ty

  • 详解 javascript中offsetleft属性的用法

    此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离. 语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

  • 详解JavaScript中this关键字的用法

    详解JavaScript中this关键字的用法

    this是函数内部的一个特殊对象,this引用的是函数据以执行的环境对象(关于环境对象我们会在文章最后作补充说明),在调用函数前this的值并不确定,不同的调用方式会导致this值的改变. window.num = 22; var o = {num: 11}; function sayNum(){ alert(this.num) } sayNum();//22 o.sayNum = sayNum; o.sayNum();//11 记住:函数名仅仅是一个包含指针的变量而已.因此即使是在不同的环境中

  • 详解JavaScript中哪一种循环最快呢

    了解哪一种 for 循环或迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误. JavaScript 是 Web 开发领域的"常青树".无论是 JavaScript 框架(如 Node.js.React.Angular.Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础.我们来谈谈现代 JavaScript 吧.循环一直是大多数编程语言的重要组成部分,而现代 JavaScript 为我们提供了许多迭代或循环值的方法. 但问题在于,我们是否真的知道哪种循环或

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 详解JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用

  • 详解JavaScript中new操作符的解析和实现

    前言 new 运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new 运算符的执行过程和如何自己实现一个类似 new 运算符的函数. new 运算符的运行过程 new 运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new 的).new 操作符的执行大概有以下几个步骤: 创建一个新的空对象 把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 proto

  • 详解JavaScript中的执行上下文及调用堆栈

    详解JavaScript中的执行上下文及调用堆栈

    一.执行上下文是什么 代码运行是在一定的环境之中运行的,这个运行环境我们就成为执行环境,也就是执行上下文,按照执行环境不同,我们可以分为三类: 全局执行环境:代码首次执行时候的默认环境 函数执行环境:每当执行流程进入到一个函数体内部的时候 Eval执行环境:当eval函数内部的文本执行的时候 二.执行上下文栈是什么 既然是'栈',那就得符合'栈'的特性,即数据结构是先进后出.下面我们看一段代码: function cat(a){ if(a<0){ return false; } console.

随机推荐