详解Javascript基础之循环

 更新时间:2021年12月27日 09:07:35   作者:敦煌璧画  
这篇文章主要为大家介绍了Javascript基础之循环,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

循环

for

循环是任何一门语言都会有个命令,用于反复执行某段代码。

例如,循环代码块5次:

for (let i = 0; i < 5; i++) {
  let text = `当前数字为${i}`
  console.log(text)
}

// 输出结果:
当前数字为0
当前数字为1
当前数字为2
当前数字为3
当前数字为4

此例中,let i = 0是声明循环的计次变量,i < 5是循环终止条件,i++是计次变量更新步长,{}内的所有代码为循环体内代码块。

具体流程是:计次变量进行终止条件判断运算,如果结果为true,则循环体执行,结束后进行步长更新运算,从而得到新的结果再次参与判断;如果结果为false,则立刻终止循环;

所以想要控制循环次数,可以通常改变判断条件实现,如果循环条件永远为true,则就是一个死循环。

for-in

for-in循环是一种特殊循环,可用于循环对象或数组(通常循环数组,使用for-of)

let o = {
  name: 'dapiaoliang',
  age: 18,
  sex: 'woman'
}

// 将对象内的所有键值对循环输出, 此时可以使用for-in
for (let key in o) {
  let text = `当前属性名:${key}, 值:${o[key]}`
}

// 结果(这种循环输出顺序可能会不一样,但数量不变)
当前属性名:name, 值:dapiaoliang
当前属性名:age, 值:18
当前属性名:sex, 值:woman

由此可见,for-in 用于循环对象内所有的键值对,具体输出顺序可能会发生变化,但是每个键值对都会被循环一次。

for-of

for-of时一种专门用于循环数组或类似数组结构(Iterator接口)的循环命令

let arr = ["dapiaoliang", 18, 'woman']

for (let value of arr) {
  let text = `当前值是:${value}`
  console.log(text)
}

// 结果
当前值是:dapiaoliang
当前值是:18
当前值是:woman

类似for-in,可直接循环数组的每一项数据

while

while是for的一个变种。(不常用)

while (条件) {
	循环体
}

当条件为true,循环体就会执行,这种循环没有计次变量,不需要更新步长。所以条件通常需要是一个可变参数,如果不是可变参数,就需要在循环体内,有明确的终止条件

do-while

do-while是一种特殊的while循环(不常用)

do {
  循环体
}while(条件)

当前数字为0
当前数字为1
当前数字为2
当前数字为4

看起来是将while的条件和循环体交换了位置,所以这种循环体,在第一次时,是不需要进行判断条件就会执行,执行结束后,再进行判断,判断结果决定下一次是否会循环

所以,do-while的条件是决定下一次是否循环,而第一次永远都会执行,所以可以理解为至少执行一次的while循环

跳出循环

如果在循环体内由于某些原因,需要在代码块内跳出循环,可以使用对应的关键字。

break用于永久终止此循环,continue用于终止当前这次循环(立刻进入下一次)

例如,跳过i = 3时情况

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue
  }
  let text = `当前数字为${i}`
  console.log(text)
}

上述例子,在i=3时,循环体内判断为真,执行continue,那么此次后续两行代码不会执行,会立刻进入下一次循环。

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break
  }
  let text = `当前数字为${i}`
  console.log(text)
}

当前数字为0
当前数字为1
当前数字为2

此时判断内是break,那么当i=3时,执行了break,那么后续所有次数的循环都不会执行。break会把整个循环全部关闭。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • 详解JavaScript设计模式开发中的桥接模式使用

    详解JavaScript设计模式开发中的桥接模式使用

    桥接模式的适用场合非常广泛,除了在事件回调函数与接口之间进行桥接外,桥接模式也可以用于连接公开的API代码和私用的实现代码,下面我们就来详解JavaScript设计模式开发中的桥接模式使用
    2016-05-05
  • JavaScript对象创建及继承原理实例解剖

    JavaScript对象创建及继承原理实例解剖

    本文将用实例讲解一下JavaScript对象创建及继承原理:JavaScript中的继承是使用原型链的机制,对象创建使用Function构造器,感兴趣的朋友可以详细了解下本文,或许可以帮助到你
    2013-02-02
  • Javascript入门学习第二篇 js类型

    Javascript入门学习第二篇 js类型

    上篇文章讲了js中的一些概念(词法结构) 和 数据类型(部分)。 这章我们 继续.然后了解下js中操作数据 和 函数的 作用域。
    2008-07-07
  • js实现鼠标拖拽缩放div实例代码

    js实现鼠标拖拽缩放div实例代码

    这篇文章主要介绍了js实现鼠标拖拽缩放div,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • js中直接声明一个对象的方法

    js中直接声明一个对象的方法

    这篇文章主要介绍了js中直接声明一个对象的方法,需要的朋友可以参考下
    2014-08-08
  • JavaScript中的document.referrer在各种浏览器测试结果

    JavaScript中的document.referrer在各种浏览器测试结果

    这篇文章主要介绍了JavaScript中的document.referrer在各种浏览器测试结果,包括在多种情况下每个浏览器能否用document.referrer取到值,非常珍贵的测试结果,需要的朋友可以参考下
    2014-07-07
  • javascript之typeof、instanceof操作符使用探讨

    javascript之typeof、instanceof操作符使用探讨

    typeof和instanceof这两个操作符时不时就会用到,堪称必用,这两个操作符或许是javascript中最大的设计缺陷,因为几乎不可能从他们那里得到想要的结果
    2013-05-05
  • Three.js源码阅读笔记(Object3D类)

    Three.js源码阅读笔记(Object3D类)

    Object3D似乎是Three.js框架中最重要的类,相当一部分其他的类都是继承自Object3D类,比如场景类、几何形体类、相机类、光照类等等:他们都是3D空间中的对象,所以称为Object3D类,需要了解的朋友可以参考下
    2012-12-12
  • 用JavaScript实现对话框的教程

    用JavaScript实现对话框的教程

    这篇文章主要介绍了用JavaScript实现对话框的教程,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JavaScript中几个重要的属性(this、constructor、prototype)介绍

    JavaScript中几个重要的属性(this、constructor、prototype)介绍

    this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window,prototype本质上还是一个JavaScript对象,constructor始终指向创建当前对象的构造函数
    2013-05-05

最新评论