当前位置: 首页 > 工具软件 > let > 使用案例 >

JavaScript中的let是什么

暴辰龙
2023-12-01

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

1.暂时性死区

let与var的另一个重要的区别,就是let声明的变量不会在作用域中被提升

// name 会被提升
console.log(name);	// undefuned
var name = 'Matt';

// age 不会被提升
console.lgo(age);	//  ReferenceError: age 没有定义
let age = 26;

在let声明之前的执行瞬间被称为:暂时性死区
在此阶段引用任何后面才声明的变量才声明的变量都会抛出ReferenceError

2.全局声明

与var关键字不同,使用let在全局作用域中声明的变量不会成为window对象的属性(var 声明的变量则会)

var name = 'Matt';
console.log(window.name); // 'Matt'

let age = 26;
console.log(window.age); // undefined

不过,let声明仍然是在全局作用域中发生的,相应变量会在页面的生命周期内延续。因此,为了避免SyntaxError,必须确保页面不会重复声明同一个变量

3.条件声明

在使用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的作用域仅限于块。

4.for循环中的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循环。

 类似资料: