文章目录
一、let 命令
1、基本用法
ES6 新增了 let 命令，用来声明变量。它的用法类似于 var ，但是所声明的变量，只在 let 命令所在的代码块内有效。
{
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b); // Uncaught ReferenceError: b is not defined
for 循环的计数器，就很合适使用 let 命令。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i); // Uncaught ReferenceError: i is not defined
上面代码中，计数器 i 只在 for 循环体内有效，在循环体外引用就会报错。
下面的代码如果使用 var，最后输出的是 10。
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[5](); // 10
上面代码中，变量 i 是 var 命令声明的，在全局范围内都有效，所以全局只有一个变量 i。每一次循环，变量 i 的值都会发生改变，而循环内被赋给数组 a 的函数内部的 console.log(i)，里面的 i 指向的就是全局的 i。也就是说，所有数组 a 的成员里面的 i，指向的都是同一个 i，导致运行时输出的是最后一轮的 i 的值，也就是 10。
如果使用 let，声明的变量仅在块级作用域内有效。
ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。有关块级作用域的更多内容，请查看：ES6的块级作用域
var arr = [];
for (let i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[5](); // 5
上面代码中，变量 i 是 let 声明的，当前的 i 只在本轮循环有效，所以每一次循环的 i 其实都是一个新的变量，所以最后输出的是6。那么如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量 i 时，就在上一轮循环的基础上进行计算。
另外，for 循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'webchang';
console.log(i);
}
// webchang
// webchang
// webchang
2、let 不存在变量提升
var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined 。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
为了纠正这种现象，let 命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
console.log(a); // undefined
var a = 1;
console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization
let b = 2;
console.log(c); // Uncaught ReferenceError: c is not defined
上面代码中，变量 a 用 var 命令声明，会发生变量提升，即脚本开始运行时，变量 a 已经存在了，但是没有值，所以会输出 undefined。变量 b 用 let 命令声明，不会发生变量提升。这表示在声明它之前，变量 b 是不存在的，这时如果用到它，就会抛出一个错误。
3、暂时性死区
只要块级作用域内存在 let 命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
var temp = 1;
if (true) {
temp = 'webchang'; // Uncaught ReferenceError: Cannot access 'temp' before initialization
let temp = 2;
}
上面代码中，存在全局变量 temp ，但是块级作用域内 let 又声明了一个局部变量 temp ，导致后者绑定这个块级作用域，所以在 let 声明变量前，对 temp 赋值会报错。
ES6 明确规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
// 在 let 命令声明变量 tmp 之前，都属于变量 tmp 的“死区”。
if (true) {
// 暂时性死区开始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // 暂时性死区结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
“暂时性死区”也意味着 typeof 不再是一个百分之百安全的操作。
typeof x; // ReferenceError
let x;
上面代码中，变量 x 使用 let 命令声明，所以在声明之前，都属于 x 的“死区”，只要用到该变量就会报错。因此，typeof 运行时就会抛出一个 ReferenceError。而如果一个变量根本没有被声明，使用 typeof 返回 "undefined"
4、不允许重复声明
let 不允许在相同作用域内，重复声明同一个变量。var 可以
// 报错
function func() {
let a = 10;
var a = 1;
}
// 报错
function func() {
let a = 10;
let a = 1;
}
因此，不能在函数内部重新声明参数。
function func(arg) {
let arg;
}
func() // 报错
function func(arg) {
{
let arg;
}
}
func() // 不报错
二、const 命令
1、基本用法
const 声明一个只读的常量。一旦声明，常量的值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
const 一旦声明变量，就必须立即初始化，不能留到以后赋值。对于 const 来说，只声明不赋值，就会报错。
const foo; // SyntaxError: Missing initializer in const declaration
（1）const 的作用域与 let 命令相同：只在声明所在的块级作用域内有效。
if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
（2）const命令声明的常量不提升，同样存在暂时性死区，只能在声明的位置后面使用。
if (true) {
console.log(MAX); // ReferenceError: Cannot access 'MAX' before initialization
const MAX = 5;
}
（3）const 声明的常量，也与 let 一样不可重复声明。
var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;
2、const 的本质
const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const 只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError
上面代码中，常量 foo 储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把 foo 指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
3、ES6 声明变量的六种方法
ES5 只有两种声明变量的方法：var 命令和 function 命令。ES6 除了添加 let 和 const 命令，还有另外两种声明变量的方法：import 命令和 class 命令。所以，ES6 一共有 6 种声明变量的方法。
三、顶层对象的属性
顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象。ES5 之中，顶层对象的属性与全局变量是等价的。
// 如果没有使用 var，而是直接对一个变量赋值，那么它将作为 window 对象的是一个属性存在
// 并且这个属性是可以被删除的
a = 2;
console.log(window.a);
console.log(delete a); // true
console.log(a); // Uncaught ReferenceError: a is not defined
// 如果使用了 var 对一个变量进行声明并赋值，它虽然也可以作为 window 对象的是一个属性存在，但是不能被删除
var b = 3;
console.log(window.b); // 3
console.log(delete b); // false
console.log(window.b); // 3
function f1() {}
console.log(window.f1); // ƒ f1() {}
let c = 4;
console.log(window.c); // undefined
上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。
顶层对象的属性与全局变量挂钩，这样的设计带来了几个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，我们很容易不知不觉地就创建了全局变量；最后，顶层对象的属性是到处可以读写的，不利于模块化编程。
ES6 为了改变这一点，一方面规定，为了保持兼容性，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。
let c = 4;
console.log(window.c); // undefined
const d = 5;
console.log(window.d); // undefined
四、参考资料
前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入