JavaScript 中 var 和 let 的区别

摘要: 在本教程中，您将了解 var 和 let 关键字之间的区别。

#1: 变量作用域

当您在函数外部定义 var 变量时，它们属于全局作用域。例如

var counter;Code language: JavaScript (javascript)

在这个例子中，counter 是一个全局变量。这意味着任何函数都可以访问 counter 变量。

当您使用 var 关键字在函数内部声明变量时，变量的作用域是局部的。例如

function increase() {
    var counter = 10;
}
// cannot access the counter variable hereCode language: JavaScript (javascript)

在这个例子中，counter 变量是 increase() 函数的局部变量。它不能在函数外部访问。

以下示例在循环内显示从 0 到 4 的四个数字，以及循环外的数字 5。

for (var i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);Code language: JavaScript (javascript)

输出

Inside the loop: 0 
Inside the loop: 1 
Inside the loop: 2 
Inside the loop: 3 
Inside the loop: 4 
Outside the loop: 5Code language: Shell Session (shell)

在这个例子中，i 变量是一个全局变量。因此，它可以在 for 循环内部和之后访问。

以下示例使用 let 关键字代替 var 关键字

for (let i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);Code language: JavaScript (javascript)

在这种情况下，代码显示了循环内部的 0 到 4 的四个数字，以及一个引用错误

Inside the loop: 0
Inside the loop: 1
Inside the loop: 2
Inside the loop: 3
Inside the loop: 4

错误

Uncaught ReferenceError: i is not definedCode language: JavaScript (javascript)

由于本示例使用 let 关键字，所以变量 i 是块级作用域。这意味着变量 i 仅在 for 循环块内存在且可以访问。

在 JavaScript 中，块由一对花括号 {} 分隔，就像在 if...else 和 for 语句中一样。

if(condition) {
   // inside a block
}

for(...) {
  // inside a block
}Code language: JavaScript (javascript)

#2: 创建全局属性

全局 var 变量被添加到全局对象作为属性。全局对象在 Web 浏览器上是 window，在 Node.js 上是 global。

var counter = 0;
console.log(window.counter); //  0Code language: JavaScript (javascript)

但是，let 变量不会添加到全局对象中。

let counter = 0;
console.log(window.counter); // undefinedCode language: JavaScript (javascript)

#3: 重新声明

var 关键字允许您重新声明变量而不会出现任何问题。

var counter = 10;
var counter;
console.log(counter); // 10Code language: JavaScript (javascript)

但是，如果您使用 let 关键字重新声明变量，您将收到错误

let counter = 10;
let counter; // errorCode language: JavaScript (javascript)

#4: 暂时性死区

let 变量有暂时性死区，而 var 变量没有。要理解暂时性死区，让我们检查 var 和 let 变量的生命周期，它们有两个步骤：创建和执行。

var 变量

在创建阶段，JavaScript 引擎为 var 变量分配存储空间，并立即将其初始化为 undefined。
在执行阶段，JavaScript 引擎会为 var 变量分配赋值指定的（如果有）值。否则，var 变量将保持为 undefined。

有关更多信息，请参阅执行上下文。

let 变量

在创建阶段，JavaScript 引擎为 let 变量分配存储空间，但不初始化变量。引用未初始化的变量将导致 ReferenceError。
let 变量具有与 var 变量相同的执行阶段。

暂时性死区从块开始，直到处理 let 变量声明为止。换句话说，这是您在定义 let 变量之前无法访问它们的区域。

在本教程中，您已经了解了 var 和 let 关键字之间的区别。

本教程是否有帮助？