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

声明变量关键字:var、let、const的区别

国跃
2023-12-01

var关键字

定义一个变量:var操作符,后跟变量名。

var message;

这里定义了一个名为message的变量,可以用它来保存任何类型的值。
未初始化的情况下,变量保存一个特殊值undefined。

var声明的范围是函数作用域

当在一个函数内用var定义变量时,该变量将在函数退出时销毁:

function foo() {
	var message = 2;
}
foo();
console.log(message);//ReferenceError: message is not defined

即在函数外部访问不到函数内部var定义的变量。

使用var声明的变量会自动提升到函数作用域顶部:

function foo() {
	console.log(a);
	var a = 20;
}
foo();//undefined

等价于:

function foo() {
	var a;
	console.log(a);
	a = 20;
}
foo();//undefined

let关键字

与var关键字不同的是,let声明的范围是块作用域

if (true) {
	let message = 20;
	console.log(message);//20
}
console.log(message);//ReferenceError: message is not defined

1、暂时性死区

和var相比,let声明的变量不会被提升到函数作用域顶部:

console.log(message);//ReferenceError: message is not defined
let message = 20;

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

2、全局声明

和var相比,let在全局作用域中声明的变量不会成为window对象的属性,而var声明的变量会(需在浏览器中运行):

var messageVar = 20;
console.log(window.messageVar);//20

let messageLet = 21;
console.log(window.messageLet);//undefined

3、for循环中的let声明

对比for循环中的var与let:

for (var i = 0; i < 5; i++) {
	setTimeout(() => console.log(i), 0);
}
//5、5、5、5、5
for (let j = 0; j= < 5; j++) {
	setTimeout(() => console.log(j), 0);
}
//0、1、2、3、4

var中,在退出循环时,迭代变量保存的是退出循环的值:5,在执行超时逻辑时,所有的i都是同一个变量,所以输出同一个值;

let中,JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量,所以每个setTimeout引用的是不同的变量实例,即输出我们期望的值。

const关键字

const与let基本相同(为块作用域),区别为const声明变量的同时必须初始化而且不能够修改const声明的变量的值,否则会导致运行错误。

const声明的限制只适用于它指向变量的引用,即如果const声明的是一个对象,那么修改这个对象内部的属性是允许的:

const message = {};
message.key = '123'//OK

不能用const来声明迭代变量(因为迭代变量会改变),如果只用const声明一个不改变的for循环变量是可以的。

使用建议

1、尽量不使用var

限制自己使用let和const有助于提升代码质量,因为变量有了明确的作用域、声明位置,以及不变的值。

2、优先使用const,再考虑let

使用const可以让浏览器运行时保持变量不变,也可以让静态代码分析工具提前发现不合法的赋值操作。

 类似资料: