美文网首页让前端飞
深入理解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 ---- let const

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