使用let的优点
- var存在变量提升，let没有
如果在声明之前访问这些变量，会引发错误。而从作用域顶部到声明变量语句之前的这个区域，被称为临时死区 - 禁止重声明，用let声明已存在的标识符会抛出错误
- 不会成为window对象的属性
对var声明的变量来说，如果处于全局作用域，它们会自动成为window对象的属性。这意味着用var很可能无意中覆盖一个已经存在的全局变量。如果使用let或const声明的变量，不会成为window对象的属性 - 循环绑定
let声明每次迭代循环都会创建一个新变量，并以之前迭代中同名变量的值将其初始化。
const也一样没有变量提升、存在临时死区，禁止重声明，不会成为window对象的属性。
const与let声明最大的不同之处在于，const声明的常量无法再赋值
let num1 = 10;
num1= 20;
const num2 = 10;
//Uncaught TypeError: Assignment to constant variable.
num2 = 20;
const声明不允许修改绑定，但允许修改值。这也就意味着用const声明对象后，可以修改该对象的属性值
const person = {
name: 'huochai'
};
//可以修改对象属性的值
person.name = 'match';
//Object {name: "match"}
console.log(person);
//抛出语法错误
//Uncaught TypeError: Assignment to constant variable.
person = {
name: 'match'
}
变量提升
var声明会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined
function getValue(condition){
if(condition){
var value = 'blue';
return value;
}else{
//此处可访问变量value，值为undefined
return null;
}
//此处可访问变量value，值为undefined
}
如果没有javascript开发经验，可能会认为只有condition为true时，才会创建变量value
但实际上，在预编译阶段，javascript引擎会将上面的函数修改成下面这样
function getValue(condition){
var value;
if(condition){
value = 'blue';
return value;
}else{
return null;
}
}
用let代替var来声明变量，就可以把变量的作用域限制在当前代码块中
function getValue(condition){
if(condition){
let value = 'blue';
return value;
}else{
//变量value在此处不存在
return null;
}
//变量value在此处不存在
}
临时死区
与var不同，let和const声明的变量不会被提升到作用域顶部，如果在声明之前访问这些变量，会引发错误。而从作用域顶部到声明变量语句之前的这个区域，被称为临时死区(temporal dead zone)，简称为TDZ
if(true){
//undefined
console.log(typeof value);
var value = "blue";
}
if(true){
//Uncaught ReferenceError: value is not defined
console.log(typeof value);
let value = "blue";
}
但是，在let或const声明的作用域之外使用该变量就不会报错
//undefined
console.log(typeof value);
if(true){
let value = "blue";
}
禁止重声明
var count = 30;
//抛出语法错误
//Uncaught SyntaxError: Identifier 'count' has already been declared
let count = 40;
var count = 30;
var count = 40;
console.log(count);//40
不会成为window对象的属性
对var声明的变量来说，如果处于全局作用域，它们会自动成为window对象的属性。这意味着用var很可能无意中覆盖一个已经存在的全局变量
//function RegExp() { [native code] }
console.log(RegExp);
var RegExp = "hello";
console.log(RegExp);//'hello'
console.log(window.RegExp);//'hello'
如果使用let或const声明的变量，不会成为window对象的属性
let RegExp = "hello";
console.log(RegExp);//'hello'
console.log(window.RegExp);//function RegExp() { [native code] }
因此，如果希望在window对象下定义变量，要使用var声明。如果不希望，则使得let或const
循环绑定
var funcs = [];
for(var i = 0; i < 10; i++){
funcs.push(function(){
//输出10次10
console.log(i);
});
}
funcs.forEach(function(func){
func();
})
上面代码中，预期的结果是输出数字0-9，但它却一连串输出了10次10，这是因为循环里的每次迭代同时共享着变量i，循环内部创建的函数全都保留了对相同变量的引用，循环结束时变量i的值为10，所以每次调用console.log(i)时就会输出10.
var funcs = [];
for(let i = 0; i < 10; i++){
funcs.push(function(){
//0
//1
//...
//9
console.log(i);
});
}
funcs.forEach(function(func){
func();
})
每次循环时let声明都会创建一个新变量i，并将其初始化为i的当前值，所以循环内部创建的每个函数都能得到属性它们自己的i的副本
对于for-in循环和for-of循环来说也是一样的
var funcs = [];
obj = {
a:true,
b:true,
c:true
}
for(let key in obj){
funcs.push(function(){
//a
//b
//c
console.log(key);
//如果是for(var key in obj)会输出c c c
})
}
funcs.forEach(function(func){
func();
})
对于const声明来说，由于其无法改变变量的值，所以无法使用普通的for循环
由于for-in循环中每次迭代不会修改已有绑定，而是创建一个新绑定，所以在for-in循环中可以使用const
var funcs = [];
obj = {
a:true,
b:true,
c:true
}
for(const key in obj){
funcs.push(function(){
//a
//b
//c
console.log(key);
})
}
funcs.forEach(function(func){
func();
})
网友评论