ES6中的let与const

作者: 大春春 | 来源:发表于2017-03-18 17:51 被阅读0次

    今天学习了ES6新增语法中的let与const命令的基本用法和一些特性,这篇博客用以对这两个命令的用法的一些总结。

    在写let与const之前,首先要明白JS中的块级作用域。

    一、JS中的块级作用域

    • ES6之前JS不支持块级作用域
      在ES6之前,JS是没有块级作用域这个概念的,只有全局作用域和函数内的局部作用域,比如在下面的代码中,for循环内定义的变量 i 实际上处于全局作用域中,所以在循环的外部是可以调用变量 i 的,这个 i 就有可能造成变量的污染
    for(var i = 0; i < 5; i++){
    }
    console.log(i) // 5
    
    • 出现
      ES6的扩展为JS带来了新的变量声明方法,其中的let从实际上为JS新增了块级作用域的功能,使用该命令声明的变量只能在let命令所在的代码块中使用。

    二、let命令

    • 与var命令的对比,以及let的一些特性
      1.let声明的变量只能在let命令所在代码区块中生效
    // var
    for(var i = 0; i < 5; i++){
    }
    console.log(i) // 5
    // let
    for(let i = 0; i < 5; i++){      // 这个i只能在这个for循环内使用
    }
    console.log(i) // 报错:i is not defined
    

    2.let不存在变量提升

    console.log(a)   // undefined
    console.log(b)   // 报错:b未定义
    var a = 1
    let b = 1
    

    3.因为let不存在变量提升,所以会有暂时性死区
    什么是暂时性死区?
    暂时性死区就是在这个区块中的变量未声明之前,对该区块中的变量的一切调用都会报错

    a = 1
    let a = 2  
    // 以上代码会报错
    a = 1
    {let a = 2}
    // 以上代码不会报错,因为声明变量的区块不一  
    

    4.let声明的变量不能重复进行声明

    let a = 1
    var a = 1 // 报错 a已经被声明
    const a = 1 // 报错 a已经被声明
    
    • let的使用实例
      因为let命令的出现,所以JS有了块级作用域,原本因为作用域问题导致的闭包问题也可以使用let吗,清零进行解决,比如以下经典闭包代码会一次性输出5个5,但需求是输出01234
    for(var i = 0; i < 5; i++){
        setTimeout(function(){
            console.log(i)
        }, 1000)
    }
    

    1.ES6之前的解决办法,使用一个变量对 i 的值进行暂存

    for(var i = 0; i < 5; i++){
        (function(e){
            setTimeout(function(){
                console.log(e)
            }, 1000)        
        })(i)
    }
    

    2.出现let后的解决办法

    for(let i = 0; i < 5; i++){
        setTimeout(function(){
            console.log(i)
        }, 1000)
    }
    
    • 关于for循环作用域的问题
      在for循环中实际上是有两个作用域的,条件设置的圆括号()内是一个父作用域,而代码块大括号{}中是一个子作用域,比如下面代码可以进行区分
    for(let i = 0; i < 5; i++){
        let i = 8
        console.log(i)
    }
    // 输出结果是5个8
    

    三、const命令

    与let命令的用法类似,const命令也是用来声明一个变量,同时也只能在声明的块级作用域中进行使用,但不同的是const声明变量后,这个变量就变成了一个不能进行更改的常量。

    • const命令的特性
      1.声明的时候就必须马上初始化,否则报错
      如下代码:
    const a;   // 报错  未初始化
    const a = 1 // 不报错
    

    2.声明的值不能改变,不能重新进行赋值

    const a = 1
    a = 2         // 报错   a已经被声明过
    

    3.与let一样不存在变量提升

    console.log(a)  // 报错 a未声明
    const a = 1     
    

    4.与let一样不可重复进行声明

    const a = 1
    var a = 1 // 报错 a已经被声明
    let a = 1 // 报错 a已经被声明
    
    • 注意点
      1.const声明的变量的值不能改变实质上是变量指向的内存地址不能改变,因此会有以下两种情况
      • 值为简单类型:
        值保存在变量指向的内存地址上。
      • 值为复杂类型:
        例如对象:值也保存在变量指向的内存地址上,但是不同的是,这个内存地址实际上是一个指针,指向这个对象,那么在实际上是可以对这个对象内的属性进行赋值的,如下代码:
        const a = {b:1}
        console.log(a.b)  // 1
        a.b = 2
        console.log(a.b)  // 2
    

    2.针对上面的问题,如果想让对象的属性和值绝对不变,可以使用Object.freeze方法

        const a =Object.freeze({b:1})
        console.log(a.b)  // 1
        a.b = 2
        console.log(a.b)  // 1
    

    相关文章

      网友评论

        本文标题:ES6中的let与const

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