let声明跟var的作用差不多,但是有着非常重要的区别。最明显的区别是:
"let声明的范围是块作用域,而var声明的范围是函数作用域"
if (true) { // if(里面结果为真)
var name = 'Matt';
console.log(name); // Matt
}
console.log(name); // Matt
if (true) {
let age = 26;
console.log(age); // 26
}
console.log(age); // ReferenceError:age没有定义
在这里,age变量之所以不能在if块外部被引用,是因为它的作用域仅限于该块内部。
let也不允许同一个作用域中出现冗余声明。这样会导致报错:
let name;
let name; // SyntaxError; 标识符name已经声明过了
对声明冗余报错不会因混用let和var而受影响。这两个关键关键字声明的并不是不同类型的声明,它们只是指出变量在相关作用域如何存在。
var name;
let name; // SyntaxError
let age;
var age; // SyntaxError
let与var的另一个重要的区别,就是let声明的变量不会在作用域中被提升
// name 会被提升
console.log(name); // undefuned
var name = 'Matt';
// age 不会被提升
console.lgo(age); // ReferenceError: age 没有定义
let age = 26;
在let声明之前的执行瞬间被称为:暂时性死区
在此阶段引用任何后面才声明的变量才声明的变量都会抛出ReferenceError。
与var关键字不同,使用let在全局作用域中声明的变量不会成为window对象的属性(var 声明的变量则会)
var name = 'Matt';
console.log(window.name); // 'Matt'
let age = 26;
console.log(window.age); // undefined
不过,let声明仍然是在全局作用域中发生的,相应变量会在页面的生命周期内延续。因此,为了避免SyntaxError,必须确保页面不会重复声明同一个变量。
在使用var声明变量时,由于声明会被提升,JavaScript引擎会自动将多余的声明在作用域顶部合并为一个声明。因为let的作用域时块,所以不可能检查前面是否已经使用let声明过同名变量,同时也就不可能再没有声明变量的情况下声明它。
<script>
var name = 'Nicholas';
let age = 26;
</script>
<script>
var name = 'Matt';
// 这里没问题,因为可以作为一个提升变量来处理
// 不需要检查之前是否声明过同名变量
let age = 36;'
// 如果age之前声明过,这里会报错
</script>
注:使用try/catch 语句或typeof操作符也不能解决,因为条件块中let的作用域仅限于块。
在let出现之前,for循环定义的迭代变量会渗透到循环体外部:
for (var i = 0; i < 5; ++i) {
// 循环逻辑
}
console.log(i); // 5
改使用let后,这个问题就消失了,因为迭代变量的作用域仅限于for循环块内部:
for (let i = 0; i < 5; ++i) {
// 循环逻辑
}
console.log(i); // ReferenceError: i没有定义
在使用var的时候,最常见的问题就是迭代变量的奇特声明和修改:
for (var i = 0; i < 5; ++i) {
setTimeout(() => console.log(i), 0)
}
// 你可能以为会输出 0、1、2、3、4
// 实际上会输出 5、5、5、5、5
之所以会这样,是因为在退出循环时,迭代变量保存的是导致循环退出的值:5。在之后执行超时逻辑时,所有的i都是同一个变量,因而输出的都是同一个最终值。
而在使用let声明迭代变量时,JavaScript引擎后台会为每个迭代循环声明一个新的迭代变量。每个setTimeout引用的都是不同的变量案列,所以console.log输出的是我们期望的值,也就是循环执行过程中每个迭代变量的值。
for (let i = 0; i < 5; ++i) {
setTimeout(() => console.log(i), 0)
}
// 会输出 0、1、2、3、4
这种迭代声明一个独立变量案例的行为适合于所有风格的for循环,包括for-in和for-of循环。