ES6--let和const命令

ES6新增了let和const声明变量方式，它们声明的变量仅在块级作用域（其所在代码块）内有效。

ES6新增了let和const声明变量方式，它们声明的变量仅在块级作用域（其所在代码块）内有效。

那么什么是块级作用域？

块级作用域这个概念是es6新增的，在此之前，js的作用域只有全局作用域和函数作用域。

在平常写代码中，由大括号{}包裹的，都可以理解为块级作用域，也就是说块级作用域是指{}内有效的作用域。比如if条件语句if(){...}、for循环语句for(){...}等等。当然，var声明是没有块级作用域概念的。

下面我们通过解答一道常见的面试题来给大家分点详细介绍let和const。

面试题：说一下let、const和var的区别？

一、表格对比

二、详细说明

1. let和const是ES6提出的，var是ES5提出的

2. let和const只在声明所在的块级作用域内有效，而var则不是

<script>
    {
        let a = 1
        const b = 2
        var c = 3
    }
    {
        console.log(c) // 3
        console.log(a) // 报错: a is not defined
        console.log(b) // 报错: b is not defined
    }
</script>

3. let和const在同一作用域下不允许重复声明同一个变量，var则允许重复声明

<script>
    {
        let a = 1
        const b = '小红'
        var c = 10

        let a = 2 // 报错: Identifier 'a' has already been declared
        const b = '小明' // 报错: Identifier 'b' has already been declared
        var c = 12
        console.log(c) // 12
    }
</script>

 4. let、var声明的变量可以修改，const声明的变量是不可以修改的

<script>
    {
        let a = '小红'
        var b = 6
        a = '小明'
        b = 18
        console.log(a, b) // 小明 18

        const c = '小王'
        c = '小张' // 报错: Assignment to constant variable.
        const d = { name: '小李' }
        d.name = '小赵'
        d.age = 20
        console.log(d, d.name, d.age) // {name: "小赵", age: 20} "小赵" 20
        d = { name: '小韦' } // 报错: Assignment to constant variable.
        const e = []
        e.push('小林')
        console.log(e, e[0]) // ["小林"] "小林"
        e[0] = '小敏'
        console.log(e, e[0]) // ["小敏"] "小敏"
        e = ['小孙'] // 报错: Assignment to constant variable.
    }
</script>

const声明的是常量，是只读且不可修改的。

重点说明下，当const声明的是引用类型（如Object、Array等）时，我们说的不能修改是不能修改栈内存地址，但是我们可以修改堆内存的值。比如案例生命的常量d（对象），我们不能直接对它进行修改，否则报错。但是可以修改它的属性值。

基本类型和引用类型的介绍可以详见文章：

JS中的基本类型和引用类型

5. let 和var声明时可以不设置初始值，但const必须设置，且初始值不能设为null 

<script>
    {
        let a
        var b
        a = 1
        b = '小红'
        console.log(a, b) // 1 "小红"

        const c = 2
        console.log(c) // 2
        const d // 报错: Missing initializer in const declaration
        const e = null // 报错: Missing initializer in const declaration
    }
</script>

6. let和const声明的变量不存在变量提升现象（遵循“先声明后使用”原则），var声明的变量存在变量提升现象

变量提升即变量可以在声明之前使用，值为undefined。

<script>
    {
        // 正常写法，不会报错
        let a = 1;
        console.log(a); // 1

        // 不存在变量提升，则报错
        console.log(b); // 报错: Cannot access 'b' before initialization
        let b = 2;

        /**
         * 发生变量提升，声明提升到作用域顶端,实际执行顺序如下
         * var c;
         * console.log(c);
         * c = 3;
         * **/
        console.log(c); // undefined
        var c = 3;
    }
</script>

 7. let和const存在暂时性死区，var则不存在

<script>
    var a = 1
    if (true) {
        console.log(a) // 1
        var a = 2
    }

    var b = 3
    if (true) {
        console.log(b) // 报错: Cannot access 'b' before initialization
        let b = 4
    }

    var c = 5
    if (true) {
        console.log(c) // 报错: Cannot access 'c' before initialization
        const c = 6
    }
</script>

只要块级作用域有 let 或者 const 命令，他们所申明的变量就绑定该区域，不受外部影响。所以，我们在打印b和c的时候，就会报错说不能在初始化之前访问。

8. let和const声明的变量不会挂载到window上，var声明的变量则会挂载到window上（在函数作用域中声明除外）

<script>
    var a = 1
    let b = 2
    const c = 3
    console.log(window.a, window.b, window.c) // 1 undefined undefined

    if (true) {
        var d = 4
        let e = 5
        const f = 6
        console.log(window.d, window.e, window.f) // 4 undefined undefined=
    }

    function funcA() {
        var g = 7
        let h = 8
        const i = 9
        console.log(window.g, window.h, window.i) // undefined undefined undefined
    }
    funcA()
</script>

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。