美文网首页让前端飞
深入理解ES6 ---- let const

深入理解ES6 ---- let const

作者: 漓漾li | 来源:发表于2019-01-25 18:34 被阅读0次

es5中使用在for-in for-of循环中注册异步事件,异步事件中的i总是最后一个值。使用es6的let const可以解决

// es5 for循环中 var声明 i
let funcs = []
let obj = {
    a: 1,
    b: 1,
    c: 1
}
for (var key in obj) {
    funcs.push(() => {
        console.log(key)
    })
}
funcs.forEach(func => {
    func()
})
// c c c

// // es6 for循环中 let声明 i
let funcs1 = []
for (let key in obj) {
    funcs1.push(() => {
        console.log(key)
    })
}

funcs1.forEach(func => {
    func()
})
// a b c

每次循环时,let会声明都会创建一个新变量key,并将其初始化为key的当前值,所以循环内部创建的每个函数都能得到属于他们自己的i的副本。
值得一提的是,let声明再循环内部的行为是标准中专门定义的,他不一定与let的不提升特性有关系,事实上,早起的let实现并不包含这一行为,是后来加入的。

而下边这个例子也证实了这一流程

let funcs1 = []
for (const key in obj) {
    funcs1.push(() => {
        console.log(key)
    })
}

funcs1.forEach(func => {
    func()
})
// a b c

const定义的key是不能重新赋值的,但在循环中一直变化,并没有报错。是因为每次迭代都是新创建一个变量而不是修改已有变量

const在下面循环中会报错,因为迭代一次后,i++修改了const声明的i

let funcs = []
let arr = [1, 2, 3]
for (const i = 0; i < arr.length; i++) {
    funcs.push(function () {i
        console.log(i)
    })
}
funcs.forEach(() => {
    func()
})
// 1 2 3

相关文章

  • 深入理解es6(附代码-上)

    深入理解es6 ES6 第一章:let和const let 没有变量提升 不可以重复声明 不会给window增加属...

  • es6

    [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...

  • 2018-12-20-周末学习

    ES6的深入认识(1) let&const 首先列出我对于let和cons起初粗浅的认识 let ≈ var,co...

  • 深入理解ES6 ---- let const

    es5中使用在for-in for-of循环中注册异步事件,异步事件中的i总是最后一个值。使用es6的let co...

  • (JS)

    ES6 let、const和var的区别 let和const声明变量不存在变量提升 let和const不能重复声明...

  • es6,es7,es8语法总结

    ES6 1. var let const let,const具有块级作用域,不具有变量提升 const 用...

  • ES 6 7 8 随笔 QAQ

    ES6 1. var let const let,const具有块级作用域,不具有变量提升 const 用...

  • ES6(let 与 const)

    ES6中引入了let 和 const来声明变量,我们来看下let 和 const 的使用 一、let let定义的...

  • react 入门基础(一)之ES6

    ####ES6 let const var 三者的区别 ### 1. let const 不能重复声明变...

  • es6总结一

    es6基础 let和const命令 let和const用于声明变量let跟var的区别 1、let定义过的变量不能...

网友评论

    本文标题:深入理解ES6 ---- let const

    本文链接:https://www.haomeiwen.com/subject/lwlvjqtx.html