ES6系列之 let 和 const

为什么需要块级作用域ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。通过var声明变量存在变量提升：if (condition) { var value = 1}console.log(value)初学者可能会认为当变量condition为true时，才会创建value。当condition为false时，不会创建value，结果应该是报错。然而因为JavaScript存在变量提升的概念，代码等同于：var valueif (condition) { value = 1}console.log(value) // undefined所有当condition为false，输入结果为undefined。ES5 只有全局作用域和函数作用域，其中变量提升也分成两种情况：一种全局声明的变量，提升会在全局最上面，上面就属于全局变量声明；一种是函数中声明的变量，提升在函数的最上方：function fn() { var value if (condition) { value = 1 } console.log(value) // undefined}console.log(value) // Uncaught ReferenceError: value is not defined所有当condition为false，函数内输入结果为undefined，函数输入就会报错Uncaught ReferenceError: value is not defined。函数的变量提升是根据最近的外层函数提升，没有函数就为全局下提升。为规范变量使用控制，ECMAScript 6 引入了块级作用域。块级作用域就是 {} 之间的区域let 和 const我们来整理一下 let 和 const 的特点：不存在变量提升if(condition) { let value = 1}console.log(value) // Uncaught ReferenceError: value is not defined不管 conditon 为 true 或者 false ，都无法输出value，结果为 Uncaught ReferenceError: value is not defined重复声明报错let value = 1let value = 2重复声明同一个变量，会直接报错 Uncaught SyntaxError: Identifier ‘value’ has already been declared不绑定在全局作用域上var value = 1console.log(window.value) // 1在来看一下let声明：let value = 1console.log(window.value) // undefinedlet 和 const 的区别:const声明一个只读的常量。一旦声明，常量的值就不能改变。const value = 1value = 2 // Uncaught TypeError: Assignment to constant variable.上面代码表明改变常量的值会报错。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。const foo;// SyntaxError: Missing initializer in const declaration上面代码表示，对于const来说，只声明不赋值，就会报错。对于对象的变量，变量指向是数据指向的内存地址。const只能保证数据指向内存地址不能改变，并不能保证该地址下数据不变。const data = { value: 1}// 更改数据data.value = 2console.log(data.value) // 2// 更改地址data = {} // Uncaught TypeError: Assignment to constant variable.上述代码中，常量 data 存储的是一个地址，这里地址指向一个对象。不可变的只是这个地址，即不能将 data 指向另一个地址，但是对象本身是可以变的，所以依然为其更改或添加新属性。暂时性死区在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。let 和 const 声明的变量不会被提升到作用域顶部，如果在声明之前访问这些变量，会导致报错：console.log(typeof value); // Uncaught ReferenceError: value is not definedlet value = 1;这是因为 JavaScript 引擎在扫描代码发现变量声明时，要么将它们提升到作用域顶部(遇到 var 声明)，要么将声明放在 TDZ 中(遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后，变量才会从 TDZ 中移出，然后方可访问。看似很好理解，不保证你不犯错：var value = ‘global’;// 例子1(function() { console.log(value); let value = ’local’;}());// 例子2{ console.log(value); const value = ’local’;};两个例子中，结果并不会打印 “global”，而是报错 Uncaught ReferenceError: value is not defined，就是因为 TDZ 的缘故。常见面试题for(var i = 0; i < 3; i++) { setTimeout(() => { console.log(i) })}// 3// 3// 3上述代码中，我们期望输出0，1，2三个值，但是输出结果是 3，3，3 ，不符合我们的预期。解决方案如下：使用闭包解法for(var i = 0; i < 3; i++) { (function(i) { setTimeout(() => { console.log(i) }) })(i)}// 0// 1// 2ES6 的 let 解法for(let i = 0; i < 3; i++) { setTimeout(() => { console.log(i) })}// 0// 1// 2上述代码中，变量 i 是 let 声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是0，1，2。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值。这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算.另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。for (let i = 0; i < 3; i++) { let i = ‘abc’; console.log(i);}// abc// abc// abc上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。如果尝试将 let 改成 const 定义：for (const i = 0; i < 3; i++) { console.log(i);}// 0// Uncaught TypeError: Assignment to constant variable.上述代码中，会先输出一次 0,然后代码就会报错。这是由于for循环的执行顺序造成的，i 定义为 0，然后执行 i < 3比较，符合条件执行循环主体，输出一次 0, 然后执行 i++，由于 i 使用const定义的只读变量，代码执行报错。说完了普通的for循环，我们还有for…in循环呢~那下面的结果是什么呢？const object = {a: 1, b: 1, c: 1};for (const key in object) { console.log(key)}// a// b// c上述代码中，虽然使用 const 定义 key 值，但是代码中并没有尝试修改 key 值，代码正常执行，这也是普通for循环和for…in循环的区别。Babel编译在 Babel 中是如何编译 let 和 const 的呢？我们来看看编译后的代码：let value = 1;编译为:var value = 1;我们可以看到 Babel 直接将 let 编译成了 var，如果是这样的话，那么我们来写个例子：if (false) { let value = 1;}console.log(value); // Uncaught ReferenceError: value is not defined如果还是直接编译成 var，打印的结果肯定是 undefined，然而 Babel 很聪明，它编译成了：if (false) { var _value = 1;}console.log(value);我们再写个直观的例子：let value = 1;{ let value = 2;}value = 3;var value = 1;{ var _value = 2;}value = 3;本质是一样的，就是改变量名，使内外层的变量名称不一样。那像 const 的修改值时报错，以及重复声明报错怎么实现的呢？其实就是在编译的时候直接给你报错……那循环中的 let 声明呢？var funcs = [];for (let i = 0; i < 10; i++) { funcs[i] = function () { console.log(i); };}funcs0; // 0Babel 巧妙的编译成了：var funcs = [];var _loop = function _loop(i) { funcs[i] = function () { console.log(i); };};for (var i = 0; i < 10; i++) { _loop(i);}funcs0; // 0项目实践在我们实际项目开发过程中，应该默认使用 let 定义可变的变量，使用 const 定义不可变的变量，而不是都使用 var 来定义变量。同时，变量定义位置也有一定区别，使用var 定义变量都会在全局顶部或者函数顶部定义，防止变量提升造成的问题，对于使用 let 和 const 定义遵循就近原则，即变量定义在使用的最近的块级作用域中。ES6系列文章ES6系列文章地址：https://github.com/changming-…