原创文章&经验总结&从校招到A厂一路阳光一路沧桑
详情请戳www.codercc.com
主要知识点有：var变量提升、let声明、const声明、let和const的比较、块级绑定的应用场景
1. var声明以及变量提升
变量提升：使用var声明变量，变量的创建并不在声明变量的地方，而是会在当前作用域的顶部。
如果声明在函数内，则变量的创建则会在函数作用域的顶部；如果声明不在函数内，则会提升到全局作用域的顶部。
示例
function getValue(condition){
if(condition){
var value = "yes";
return value;
}else{
//value 在此处可访问，值为 undefined
return null;
}
//value 在此处可访问，值为 undefined
}
等价于（var变量提升到当前函数作用域的顶部）：
function getValue(condition){
var value;
if(condition){
value = "yes";
return value;
}else{
//value 在此处可访问，值为 undefined
return null;
}
//value 在此处可访问，值为 undefined
}
由变量提升会带来循环变量过度共享的问题
2. let声明
与var声明变量语法一致，但是let声明变量不会变量提升，变量的作用域只会限制在当前代码块中。由于let变量并不会提升到代码块的顶部，因此，要想让整个代码块能给访问到let变量，需要将let声明指定到代码块的顶部。
示例
function getValue(condition){
if(condition){
let value = "yes";
return value;
}else{
//value 在此处不可访问
return null;
}
//value 在此处不可访问
}
let变量禁止重复声明：如果一个标识符已经在代码块内部中被定义，那么使用let以同样的标识符声明变量则会报错
示例：
var count = 43；
let count; //重复声明，报错
3. const声明
const声明基本变量
const声明：使用const声明一个常量，一旦设置之后就不能再被修改，否则会报错。也就是说，使用const声明变量后要立即初始化。
const type;
type='TEST'; //Uncaught SyntaxError: Missing initializer in const declaration
正确的为：
const type='TEST'
-----------------------------
const type='TEST'
type = 'DEBUG' //ObjectMethod.html:244 Uncaught TypeError: Assignment to constant variable.
const声明对象
const只会阻止变量绑定以及变量的修改，但是不会阻止对象成员变量的修改。
const person = {name:'nancy'};
person.name= 'nike';
console.log(person.name); //nike
person = {}; //Uncaught TypeError: Assignment to constant variable.
4. let与const的比较
相同点
不存在变量提升：let与const声明变量都不会存在变量提升，都只在块级作用域内，如果试图在代码块外访问let或者const变量都会报错；
禁止重复声明：如果在同一作用域内，禁止let或者const使用以被定义的标识符声明变量；
都具有暂时性死区（temporal dead zone，TDZ ）：使用let或者const声明变量，如果在声明处之前访问变量会报错。在变量当前作用域的块内，变量声明处之前被称之为TDZ。
-
不会覆盖全局对象上的属性：let变量或者const变量会在全局作用域上创建新的变量，但是不会绑定到全局对象上（浏览器则是window对象），而var变量在全局作用域上会绑定到全局对象，也就是说，var全局变量可能会无意覆盖掉全局对象上的一些属性。
var RegExp = 'hello'; console.log(window.RegExp); //hello console.log(window.RegExp===RegExp); //RegExp覆盖掉window对象中的RegExp属性 ------------- let RegExp = 'hello'; console.log(window.RegExp); console.log(window.RegExp===RegExp); //false function getValue(condition){ if(condition){ //value的TDZ let value = "yes"; return value; }else{ return value; } }
不同点
- const不能再赋值，let声明的变量可以重复赋值;
5. 块级绑定的使用场景
-
循环内的let声明
在循环中使用var变量，由于var变量存在变量提升，每次迭代共享同一个var变量。
for(var i = 0;i<5;i++){
setTimeout(()=>{
console.log(i); //输出5
},1000);
}
console.log(i); //输出5
> 解决方法：将var变量改为let变量
//将var改成let之后
for(let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i) // 0,1,2,3,4
}, 0)
}
console.log(i)//Uncaught ReferenceError: i is not defined i无法污染外部函数
let变量不会变量提升，let变量作用域不会逃离出for循环外，因此不会污染外部函数。而在for循环中也不会每次迭代都共享同一变量，而是会分别使用let变量副本。
-
循环内const声明
在普通的for循环中使用const变量，由于const变量不可修改，因此会报错。而在for-in或者for-of循环中可以使用const变量。
let arr = [1,2,3,4]; for(const item of arr){ console.log(item); //输出1,2,3,4 }
6. 总结
- let和const变量都不会进行提升，并且只会在声明它们的代码块内部存在。由于变量能够在必要位置被准确声明，其表现更加接近其他语言；
- 块级绑定存在暂时性死区（TDZ ） ，试图在声明位置之前访问它就会导致错误；
- let 与 const 的表现在很多情况下都相似于 var ，然而在循环中就不是这样。在 for-in
与 for-of 循环中， let 与 const 都能在每一次迭代时创建一个新的绑定，这意味着在循环体内创建的函数可以使用当前迭代所绑定的循环变量值（而不是像使用 var 那样，共享同一变量值）。同时在基础的for循环中，使用const变量会出错。
最佳实践：在默认情况下使用 const ，而只在你知道变量值需要被更改的情况下才使用 let 。
