ES6的let和const

本文作者：IMWeb ousiri 原文出处：IMWeb社区 未经同意，禁止转载

let

let和var很相似，用于声明一个变量。但是let声明的变量只存在块状作用域内。

代码语言：javascript复制

function order(x, y) {
    if (x > y) { // (A)
        let tmp = x;
        x = y;
        y = tmp;
    }
    console.log(tmp===x); // ReferenceError: tmp is not defined
    return [x, y];
}

使用大括号代替立即执行函数{ let a = 123; } console.log(a); // ReferenceError: a is not defined

const

const则是用来声明某个变量等于它初始化的值，并且不能再改变。同样，const也是只存在块状作用域内的

代码语言：javascript复制

const foo;  // SyntaxError: Missing initializer in const declaration

const bar = 123;
bar = 456; // TypeError: `bar` is read-only

注意和Object.freeze的区别。PS：经庄希琦提醒，这里可以借用指针的概念，obj指向了obj的指针，此指针不可变，但是对象内部的值还是可以改变的。

代码语言：javascript复制

const obj = {a: 123};
obj.a = 234;
console.log(obj.a); // 234

const obj2 = Object.freeze({a:123});
obj.a = 234; // 这里应该要报错的，但是chrome现在没有报错
console.log(obj.a); // 123

Temporal Dead Zone (TDZ)

由let和const声明的变量都会有自己的TDZ。当进入这个变量的作用域的时候，这个变量是不能被访问的，直到这个变量被初始化。我们来看下面一段代码

代码语言：javascript复制

let tmp = true;
if (true) { // enter new scope, TDZ starts
    // Uninitialized binding for `tmp` is created
    console.log(tmp); // ReferenceError

    let tmp; // TDZ ends, `tmp` is initialized with `undefined`
    console.log(tmp); // undefined

    tmp = 123;
    console.log(tmp); // 123
}
console.log(tmp); // true

TDZ的原因可以简单地理解为，let和const不存在变量提升

并且要注意，这段代码经过babel编译，结果会是：undefined, undefined, 123, true，不会报错，因为babel是使用var去最大限度模拟let

何时使用let和const

尽可能使用const
当变量需要改变的时候，把const改为let

参考资料

Exploring ES6

编程算法 babel.js

0 人点赞