ES 6 系列 - 变量声明

let 和 const

let 声明

　　（一）基本用法

　　　　let 声明的变量只在块级作用域内有效，出了该块则报错，最常见且适合的地方在 for 循环中：

?

1 2 3 4 5 6 7

var a = []; for (var i = 0; i < 10; i++) {   a[i] = function () {     console.log(i);   }; } a[6]();   // 10

　　上面的 i 通过 var 方式声明，（循环次数内）全局有效且只有一个，故每次循环结束后， i 的值会被更新，从而导致在完成所有循环后， a 数组中所有的成员中的 i 均指向最后一次更新的值， 即 10，而使用 let 声明：

?

1 2 3 4 5 6 7

var a = []; for (let i = 0; i < 10; i++) {   a[i] = function () {     console.log(i);   }; } a[6](); // 6

 在每次循环时，该次循环体（代码块）中的 i 只对当前代码块有效，简单而言即：每次循环的 i 相当于一个新的变量，故最终结果是 6 。

　　（二）var 的变量提升

　　　　先看一个例子：

?

1 2	console.log(foo); // 输出undefined var foo = 2;

　　　　按照正常的逻辑，执行 console 时，变量 foo 在内存中并不存在，但是此时会输出 undefined(未赋值) 错误，这就是 var 声明的变量提升：脚本运行时，变量已经存在，但是没有值，最终输出 undefined。使用 let 声明可以避免变量提升。

 　　（三）暂时性死区

　　　　只要块级作用域内存在 let 指令，它所声明的变量就 “绑定” 在这个区域，不在受外部影响。

?

1 2 3 4 5 6 7 8 9 10 11

if (true) {   // TDZ开始   tmp = 'abc'; // ReferenceError   console.log(tmp); // ReferenceError     let tmp; // TDZ结束   console.log(tmp); // undefined     tmp = 123;   console.log(tmp); // 123 }

　　　　如上例所示，在 let 命令之前， tmp 变量都不可用， 这块区域都属于 tmp 的 “死区”，语法上称这种现象为 “暂时性死区”。

　　注意：1.使用 let 命令时，typeof 不在是一个百分百安全操作；

　　　　　2.一个比较隐蔽的死区：

?

1 2 3 4 5

function bar(x = y, y = 2) {   return [x, y]; }   bar(); // 报错

　　调用 bar() 报错的原因在于 x = y 时，y 并没有声明，属于 “死区”，故报错。解决办法是将函数中参数位置对调即可。

　　同理：

?

1 2 3 4 5 6

// 不报错 var x = x;   // 报错 let x = x; // ReferenceError: x is not defined

　　总之：暂时性锁区的本质是，只要一进入当前作用域，所要使用的变量就已经存在，但是处于不可获取的状态，只有等到声明语句出现，才可以获取和使用。

　　（四）块级作用域

　　es 5 只有全局和函数作用域两种，接下来看两个 es5 的例子：

　　1.内层变量覆盖外层变量

?

1 2 3 4 5 6 7 8 9 10

var tmp = new Date();   function f() {   console.log(tmp);   if (false) {     var tmp = 'hello world';   } }   f(); // undefined

 

　　在 fun f() 中，因为存在 var 指令，故可以说在 f() 中就会存在变量提升的现象（而且优先级貌似蛮高的）， 所以这就会导致 console undefined 错误，而不是 console 时间；

　　2.用来计数的循环变量泄露成全局变量：

?

1 2 3 4 5 6 7

var s = 'hello';   for (var i = 0; i < s.length; i++) {   console.log(s[i]); }   console.log(i); // 5

　　上例可以看出，在循环结束后，作为控制循环的 i 变量并没有消失，这样就很容易泄露，可能会被恶意利用。

 

　　而 let 的使用为 es 6 新増了块级作用域。

 

const 声明

　　效果跟 java 中的 static final 差不多；

　　需要注意：　　　

　　　　1.const 的变量声明时必须赋值，否则报错；

　　　　2.const 的变量一旦声明，其值只读，不可改变；

　　　　3.const 的作用域与 let 相同： 只在声明所在的块级作用域内有效；

　　　　4.const 的变量不存在变量提升现象，同样存在暂时性死区；

　　　　5.const 的变量，不可重复声明；

　　　　6.关于引用类型的对象，一个例子：

?

1 2 3 4

const a = []; a.push('Hello'); // 可执行 a.length = 0;    // 可执行 a = ['Dave'];    // 报错

 　　　　　　常量 a 中存储了一个数组对象的地址，然后这个数组对象中的内容是可变的，但是，最后一行很明显是把一个新的数组对象的地址赋值给 a，这就导致了报错。