浅谈ECMAScript6新特性之let、const

let

在ES6之前，JavaScript只有全局作用域和函数作用域，没有块级作用域，因此在一些复杂的嵌套逻辑中，变量声明和使用的容易混淆，let的出现就解决了这个问题。

1. 块级作用域

let关键字可以声明块状作用域的变量，这个变量只在当前块级作用域有效。比如：

function foo() {
    var bar = "bar A";
    if (true) {
        var bar = "bar B";
        console.log(bar); // 输出“bar B”
    }
    console.log(bar); // 输出“bar B”
}

输出“bar B”两次是因为bar被覆盖了，虽然if语句中的bar变量也是在函数内部声明的，但是仍然被覆盖了。如果使用let来代替var，则代码如下：

function foo() {
    let bar = "bar A";
    if (true) {
        let bar = "bar B";
        console.log(bar); // 输出“bar B”
    }
    console.log(bar); // 输出“bar A”
}

此时输出了两个不同的值，let声明的变量只在两个块级作用域中有效，代码更加的清晰易懂。

1. 暂时性死区

let声明的变量会受到“暂时性死区”的限制，只有在变量声明后才能使用。比如：

function foo() {
    console.log(bar); // 输出“undefined”，而不是报错
    var bar = "bar";
    console.log(bar); // 输出“bar”
}

function baz() {
    console.log(bar); // 报错
    let bar = "bar";
    console.log(bar);
}

在上述代码中，使用var的时候，在变量声明之前就能使用，但是使用let的时候，变量声明的前面使用会报错。

1. 循环中的let

在循环中使用let关键字可以避免由于变量声明提升而导致的对同一个变量的重复声明问题，比如：

for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i); // 输出“10”，而不是“0-9”
    }, 1000);
}

for (let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i); // 输出“0-9”，符合预期
    }, 1000);
}

第一个循环输出的是10，原因是因为setTimeout是异步的，闭包中的i变量是共享的，导致输出的都是最后修改的值。而第二个循环使用let，则会每次迭代声明一个新的变量，避免了此问题。

const

const关键字用来声明常量，用法和let类似，只不过声明的变量的值是不可修改的。

const PI = 3.14;
PI = 3; // 报错：“Assignment to constant variable”

const ARR = [1,2,3];
ARR.push(4); // 可以操作数组，但不能覆盖ARR整个变量

console.log(ARR); // 输出[1,2,3,4]

值得注意的是，使用const声明的变量不可变性，只是指向的地址不能变，如果指向一个对象的地址，仍然可以改变对象属性的值，如：

const PERSON = {name: "Tom", age: 18};
PERSON.age = 19; // 可以改变对象属性的值，不会报错
console.log(PERSON); // 输出{name: "Tom", age: 19}

结束语

let、const是ES6提出的在作用域和变量控制上的重要语法，用法和var有所不同，能够解决var本身存在的一些问题。在实际开发中，应当充分发挥它们的作用和优势，使代码更加清晰易懂，从而提高开发效率。