var 和 let 的区别

1、变量范围

当我们在函数外部定义变量时，这些var变量属于全局范围。例如：

var counter;

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

当我们使用关键字在函数内声明变量时var，变量的范围是局部的。例如：

function increase() {    var counter = 10;}// cannot access the counter variable here

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

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

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

输出：​​​​​​​

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

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

以下示例使用let关键字而不是var关键字：

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

在这种情况下，代码在循环中显示了从 0 到 4 的四个数字和一个引用错误：

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

错误：

Uncaught ReferenceError: i is not defined

由于此示例使用let关键字，因此该变量i是阻塞范围。这意味着该变量i仅存在并且可以在for循环块内访问。

在 JavaScript 中，一个块由一对花括号分隔，{}就像在if...elseandfor语句中一样：

if(condition) {   // inside a block}
for(...) {  // inside a block}

2、创建全局属性

全局var变量作为属性添加到全局对象中。全局对象位于Web 浏览器和Node.js 上：windowglobal

var counter = 0;console.log(window.counter); //  0

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

let counter = 0;console.log(window.counter); // undefined

3、重新声明

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

var counter = 10;var counter;console.log(counter); // 10

但是，如果我们用let关键字重新声明一个变量，我们会得到一个错误：

let counter = 10;let counter; // error

4、时间死区

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

var 变量

在创建阶段，JavaScript 引擎将存储空间分配给 var 变量，并立即将它们初始化为 undefined。

在执行阶段，JavaScript 引擎将分配指定的值分配给 var 变量（如果有的话）。否则， var 变量保持未定义。

有关详细信息，请参阅执行上下文。

let变量

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

let 变量与 var 变量具有相同的执行阶段。

时间死区从块开始，直到处理了 let 变量声明。换句话说，它是在定义之前无法访问 let 变量的位置。