详解Javascript基础之循环

目录
  • 循环
    • for
    • for-in
    • for-of
    • while
    • do-while
      • 跳出循环
  • 总结

循环

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会把整个循环全部关闭。

总结

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

赞 (0)

相关推荐

  • JS基础之逻辑结构与循环操作示例

    本文实例讲述了JS逻辑结构与循环操作.分享给大家供大家参考,具体如下: JS的逻辑结构与循环和java基本相同.不同会进行解释: instance: <html> <head> <title>js逻辑结构与循环</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 判断:if判断单重判断,双重判断,多重判断,swit

  • JavaScript While 循环 教程

    JavaScript中的循环用来将同一段代码执行指定的次数(或者当指定的条件为true时). JavaScript Switch 声明 如果希望选择执行若干代码块中的一个,你可以使用switch声明: 语法: 复制代码 代码如下: switch(n)     {     case 1:       执行代码块 1       break     case 2:       执行代码块 2       break     default:       如果n即不是1也不是2,则执行此代码     

  • JavaScript中while循环的基础使用教程

    前言 在 JavaScript 语言中,当我们使用 while 循环时,只要指定条件为 true,循环就可以一直执行. 并且只要条件一直满足,就可以实现一个无限循环,例如: while(true){ console.log("1"); } 执行这个循环,就会无止境的输出1. while 语法及其使用 语法如下所示: while (condition) { // 要执行的代码块 } condition 是循环的条件,只有当循环条件成立时,才会执行花括号 {} 中的代码,如果条件不成立则不

  • vue.js声明式渲染和条件与循环基础知识

    vue.js声明式渲染和条件与循环的具体内容,分享给大家 绑定 DOM 元素文本值 html代码: <div id="app"> {{ message }} </div> JavaScript代码: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 运行结果:Hello Vue! 总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素

  • Javascript基础教程之for循环

    如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的. 复制代码 代码如下: document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.write(cars[3] + "<br>"); do

  • 详解Javascript基础之循环

    目录 循环 for for-in for-of while do-while 跳出循环 总结 循环 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

  • 详解JavaScript的while循环的使用

    在写一个程序时,可能有一种情况,当你需要一遍又一遍的执行一些操作.在这样的情况下,则需要写循环语句,以减少代码的数量. JavaScript支持所有必要的循环,以帮助您在所有编程的步骤.  while 循环 在JavaScript中最基本的循环是while循环,这将在本教程中学习讨论. 语法 while (expression){ Statement(s) to be executed if expression is true } while循环的目的是为了反复执行语句或代码块(只要表达式为t

  • 详解JavaScript基础知识（JSON、Function对象、原型、引用类型）

    详解JavaScript基础知识（JSON、Function对象、原型、引用类型）

    1.JSON 概念:JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的数据交换格式 特点:易于程序员编写和查看:易于计算机解析和生成 数据结构:Object对象格式   { key: value , key: value } Array数组格式   [ value , value ] Eg:  var json = ' { "   " : ''  '' } '    (内部双引号,外部单引号) * JSON - 支持独立的"

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

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

  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

  • 详解JavaScript 高阶函数

    高阶函数简介 高阶函数 的英文名叫 Higher-Order Function ,是 函数式编程 中的一种.他的表现形式往往是通过把函数作为参数传入另一个函数,或者将函数作为另一个函数的返回值返回.在实际开发业务中, 高阶函数往往可以抽象我们的代码 ,将我们的命令式编程转换为复用性更高级的函数式编程,从而 提升我们的代码质量 . 下面拿3个面试中常问的高阶函数举例子,希望看完以后能够提升大家对JS的理解,提高我们的代码质量. chat is cheap,show you my code~ Arr

  • 详解JavaScript中的链式调用

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

  • 一文详解JavaScript闭包典型应用

    一文详解JavaScript闭包典型应用

    目录 1.应用 1.1 模拟私有变量 1.2 柯里化 1.3 偏函数 1.4 防抖 1.5 节流 2.性能问题 2.1 内存泄漏 2.2 常见的内存泄漏 3.闭包与循环体 3.1 这段代码输出啥 3.2 改造方法 4.总结 1.应用 以下这几个方面是我们开发中最为常用到的,同时也是面试中回答比较稳的几个方面. 1.1 模拟私有变量 我们都知道JS是基于对象的语言,JS强调的是对象,而非类的概念,在ES6中,可以通过class关键字模拟类,生成对象实例. 通过class模拟出来的类,仍然无法实现传

  • 详解C语言 三大循环 四大跳转 和判断语句

    三大循环for while 和 do{ }while; 四大跳转 : 无条件跳转语句 go to; 跳出循环语句 break; 继续跳出循环语句 continue; 返回值语句 return 判断语句 if,if else,if else if else if...else ifelse 组合 if(0 == x) if(0 == y) error(): else{ //program code } else到底与那个if配对 C语言有这样的规定: else 始终与同一括号内最近的未匹配的if语

  • 详解Javascript中new()到底做了些什么？

    详解Javascript中new()到底做了些什么？

    前言 和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 要创建 Person 的新实例,必须使用 new 操作符. 以这种方式调用构造函数实际上会经历以下 4个步骤: (1) 创建一个新对象: (2) 将构造函数的作用域赋给新对象(因此 this 就指向了

随机推荐