ES6教程：let和const命令的用法

冷不防 2023-07-08 12:27 9阅读 0赞

> **ES6中新增了let和const命令，分别用于声明变量和常量。**

### 1. 使用let命令取代var命令 ###

在ES6之前的版本中，使用`var`声明变量，在ES6中新增了`let`来声明变量。`let`完全可以取代`var`，因为二者的语义相同，而且`let`没有“副作用”。

我们先来看一下`let`命令有哪些特点：

1.  不存在变量提升：变量只有在声明之后才能使用；
2.  不允许重复声明：在相同的作用域下，一个变量名只能使用一次，不能重复声明；
3.  具有块级作用域：在代码块中声明的变量，只对当前代码块和其内部嵌套代码块有效，如果嵌套代码块中声明了同名变量时，则对该嵌套代码块无效；
4.  存在暂时性死区：当全局变量与代码块中变量同名时，代码块中的变量就有了块级作用域，其变量声明前不能使用。

JavaScript是弱类型的编程语言，在ES6之前使用`var`关键字声明变量，会发生变量提升的现象。简单来说，就是在声明变量之前就对该变量进行调用，程序不会报错，而且打印出来的值为`undefined`。如果是有Java或C++编程经验的小伙伴，肯定对这种现象是无法忍受的。我们用一段代码来演示一下这种现象：

function test(){
        console.log(i);
        var i = 1;
    }
    test();

运行结果：

undefined

上面代码中，变量`i`是使用`var`命令声明的，我们在变量声明之前在控制台打印`i`，虽然此时变量`i`还没有声明，但是该变量已经存在了，只不过是没有值，所以会输出`undefined`。

如果是同样的代码，把`var`替换成`let`来声明，其他代码不变，程序运行后的结果为：

![ES6教程：let和const命令的用法][ES6_let_const]

当变量使用`let`声明时，不会发生变量提升，这就说明在变量声明之前，变量`i`是不存在的，要打印一个不存在的变量，就会抛出上面的错误。

在ES5 中有两个作用域，分别是全局作用域和函数作用域，到了ES6就新增了一个块级作用域。如果没有块级作用域的话，在处理业务场景时会带来很多不便，比如内层变量覆盖外层变量，再或者是使用`for`循环时，循环中迭代的变量泄露为全局变量等等。

ES6中的`let`命令为JavaScript新增了块级作用域，我们看下面的代码：

function test() {
        let i = 1;
        if(true){
            let i = 2;
        }
        console.log(i);
    }
    test();

运行结果为：

在`test()`函数代码块中，对变量`i`做了两次声明，按照`var`命令声明变量的逻辑，结果应该是`2`,但是使用`let`命令声明的变量，在该变量的代码块中，不受内层代码块的影响。无论有多少层级的代码块，其每一层都有一个单独的作用域。在内层作用域中可以定义外层作用域的同名变量，但变量的值不受外层作用域变量的影响。

如果理解了`let`命令的块级作用域的话，那么再来理解暂时性死区，就轻松多了。我们对上面那段代码稍加改造，演示暂时性死区：

function test() {
        let i = 1;
        if(true){
            console.log(i);
            let i = 2;
        }
        console.log(i);
    }
    test();

运行结果为：

![ES6教程：let和const命令的用法][ES6_let_const 1]

由于各层级代码块都有自己单独的作用域，内层作用域不受外层的影响，所以当我们在`if()`语句中再次声明变量`i`时，该作用域下的变量是独立存在的，在未声明之前就调用该变量，就会出现我们前面说过的“变量提升”的概念，`let`命令是不存在变量提升的，所以就会抛出上面这种错误。

### 2. 使用const命令声明常量 ###

`const`命令的用法和`let`类似，使用`const`命令声明的是一个只读常量，一旦声明，常量的值就不能改变。`const`声明的变量值不能改变，这就意味着，变量一旦声明后，就必须马上给其赋初始化值。

但是在`let`和`const`之间，我建议优先使用`const`，`const`相比`let`而言，有几个优点：

一是`const`从语义上就表示常量，那就可以提醒协同开发的其他人员，这个变量的值不能被修改，防止误操作修改变量的值导致程序出错；

二是`const`比较符合函数式的编程思想，运算不改变值，只是新建值；

三是JavaScript编译器会对`const`进行优化，如果`const`使用频率比较高的话，有利于提高程序的运行效率，这取决于`let`和`const`在底层编译器内部的处理差异。

如果从长远的角度看，JavaScript有可能会实现多线程编程，考虑到线程安全，`let`命令声明的变量只能在单线程中使用，不能用于多线程的数据共享。

[ES6_let_const]: https://s1.51cto.com/images/blog/202002/21/621afd0d30a26ca694df1c930f7e4c22.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[ES6_let_const 1]: https://s1.51cto.com/images/blog/202002/21/037457e27cac4ebd0fb2c38782e8ceda.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=