JavaScript 中 let 和 var 的区别

这篇教程文章解释了 JavaScript 中 var 和 let 关键字的实际工作方式以及它们的主要区别。

与其他编程语言一样，JavaScript 具有用于存储值和数据的变量。在 JavaScript 中，我们同时使用 let 和 var 关键字来声明变量。

有些人认为这两个关键字可以互换使用，但事实并非如此。两者之间的主要区别可能会导致我们的编程出现重大错误。

在 ES6 更新到 JavaScript 之前，只有一种方法可以在 JavaScript 中声明变量和常量。但是自从 ES6 更新以来，我们现在有了 let 和 const 关键字用于声明变量和常量。

将 let 和 const 关键字添加到 JavaScript 的主要原因之一是使用 var 关键字声明的变量不是声明它的块。相反，它的范围仅限于函数，导致一些编程问题，我们将在文章的后半部分讨论。

让我们看一下这段代码以便更好地理解。

function example(){
  for(let i=0;i<10;i++)
    console.log(i);
  
  console.log(i);
}
example();

在这个代码段中，我们在 for 循环中声明了变量 i 并使用 console.log 来获取变量的值。我们没有在 for 循环之后使用 {} 括号，所以 for 循环的块只是下一行。

但是，我们使用了额外的 console.log 来显示 i 的值。但是第二个 console.log 将无法获取变量 i 的值，并会显示以下错误：

ReferenceError: i is not defined

发生此错误是因为变量 i 的范围仅适用于 for 循环块，并且无法在块外访问。因此，通过这种方式，我们不能使用块外的变量，因为使用 let 关键字声明的变量的范围仅限于块。

要查看 let 和 var 之间的区别，请查看以下代码段：

function example(){
  for(var i=0;i<10;i++)
    console.log(i);
  
  console.log(i);
}
example();

在上面的代码中，我们可以观察到我们使用了 var 关键字代替了 let 关键字。

虽然在前面的示例中保留了相同的两个 console.log，但在这种情况下，第二个 console.log 也将有一个输出。那么，让我们看看输出：

0
1
2
3
4
5
6
7
8
9
10

第一个 console.log 打印从 0 到 9 的值，条件 i<10 也是如此。

但是我们可以将 10 视为肯定不是来自第一个 console.log 的输出。因此，这个 10 是第二个 console.log 输出。

这里的问题是，变量 i 应该在其块内使用，但由于块外的 console.log 访问了它，这意味着它已经超出了它的范围。

它证明了 let 和 var 关键字用于声明变量，但 var 关键字声明的变量在其范围方面仅限于块。但是，var 关键字的作用域仅限于函数。

如果我们在函数外部声明一个变量，let 和 var 之间还有另一个主要区别。如果我们在函数外部使用 let 关键字，则会创建一个无法从外部访问的局部变量。

但是如果我们使用 var 关键字，它就会变成一个全局变量。让我们看一下下面的代码段：

var color = 'blue';
let model = '2021';

在此代码段中声明了两个变量，一个使用 let 关键字，另一个使用 var 关键字。因此，使用 var 关键字声明的变量已成为全局变量，并将附加到浏览器中的 window 对象。

在浏览器中，我们有一个窗口对象，它有很多属性和方法，而且非常复杂。前端应用程序开发人员广泛了解窗口对象，因为他们经常使用它。

每次我们在函数外使用 var 关键字时，该变量都会成为全局变量，并与 window object 关联，并且可以从 window object 访问。在这种情况下，它将被访问为 window.color 将显示 color 变量内的值，即 blue。

我们使用第三方库并使用 var 关键字在函数外部声明变量。如果第三方库有一个与我们的变量同名的变量，该变量将覆盖我们的变量。

这是我们避免向窗口对象添加任何内容的另一个原因；我们的意思是在这种情况下避免使用 var 关键字。