JS04：var、let 和 const 有什么区别

ES6 附带的功能之一是添加了 let 和 const ，可用于变量声明。问题是，它们与 var 有什么不同？如果你仍然不清楚，那么读完本文你就知道了。

本篇文章，我们将讨论 var 、let 和 const 的作用域、用途和变量提升。当你阅读时，请注意我将指出它们之间的差异。

Var

在 ES6 出现之前，必须使用 var 声明。但是前端开发出现的一些问题与使用 var 声明的变量有关。这就是为什么必须要有新的方法来声明变量。首先，让我们讨论这些问题之前更多地了解 var。

var 的作用域

作用域本质上是指变量 / 函数可供访问的范围。var 可以在全局范围声明或在函数 / 局部范围内声明。

当在最外层函数的外部声明 var 变量时，作用域是全局的。这意味着在最外层函数的外部用 var 声明的任何变量都可以在 windows 中使用。

当在函数中声明 var 时，作用域是局部的。这意味着它只能在函数内访问。

为了进一步的了解，请查看下面的示例。

var greeter = "hey hi";
    
function newFunction() {
    var hello = "hello";
}

这里，greeter 的作用域是全局的，因为它是在函数外声明的。而 hello 是在函数内部声明的。所以我们不能在函数外调用变量 hello，因此，如果我们使用了就会发生下面的情况：

var tester = "hey hi";
    
function newFunction() {
    var hello = "hello";
}
console.log(hello); // error: 'hello' is not defined

我们得到一个错误，这是因为在函数外部没有 hello 。

var 变量可以重新声明和修改

这意味着我们可以在相同的作用域内执行以下操作，并且不会报错。

var greeter = "hey hi";
var greeter = "say Hello instead";

又比如：

var greeter = "hey hi";
greeter = "say Hello instead";

var 的变量提升

变量提升是 JavaScript 的一种机制，变量和函数声明会在代码执行前被移动到其作用域的顶部。这意味着我们可以做以下操作：

console.log (greeter);
var greeter = "say hello"

它被解释为：

var greeter;
console.log(greeter); // greeter is undefined
greeter = "say hello"

所以 var 声明的变量会被提升到其作用域的顶部，并且值会初始化为 undefined 。

var 的问题

这有一些 var 的弱点。我会用以下的例子说明：

var greeter = "hey hi";
var times = 4;

if (times > 3) {
    var greeter = "say Hello instead"; 
}
    
console.log(greeter) // "say Hello instead"

当 times > 3 返回 true，将 greeter 重新定义为 "say Hello instead"。当你是故意想重新定义 greeter 时没问题，但如果你不知道变量 greeter 已经被定义过，那么就有问题了。

如果你已经在其他地方使用了 greeter，你可能会对得到的输出感到惊讶。这可能会导致你的代码中出现很多错误。这就是为什么 let 和 const 是必要的。

Let

let 现在是变量声明的首选。这并不奇怪，因为它是 var 声明的提升。它还解决了我们刚刚介绍的 var 问题。让我们一起看一下为什么会这样。

let 是块作用域

块是由 {} 界定的代码块。一个块存在于大括号中，大括号的任何内容都在一个块作用域中。

所以一个变量在块内使用 let 声明，那么这个变量只能在块内使用。我们看看下面的例子：

let greeting = "say Hi";
let times = 4;

if (times > 3) {
    let hello = "say Hello instead";
    console.log(hello);// "say Hello instead"
}
console.log(hello) // hello is not defined

我们看到在块（定义它的花括号）外使用 hello 返回一个错误。这是因为 let 变量是块作用域。

let 可以被修改但不能被重新声明

和 var 一样，使用 let 声明的变量在作用域内可以被修改，和 var 不一样，使用 let 声明的变量在作用域内不能被重新声明，如下是可以的：

let greeting = "say Hi";
greeting = "say Hello instead";

下面的将会返回一个错误：

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

然而，如果是相同的变量被定义在不同的作用是没问题的：

let greeting = "say Hi";
if (true) {
    let greeting = "say Hello instead";
    console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

为什么这样没问题？这是因为两个实例被视为不同的变量，因为它们具有不同的范围。

这个事实使 let 成为比 var 更好的选择。当使用 let ，如果你以前使用过变量名也不必担心，因为变量仅存在其范围内。

此外，由于一个变量不能在一个范围内多次声明，那么前面讨论的 var 出现的问题就不会出现。

let 的变量提升

像 var 一样，let 声明也会被提升到作用域顶部。和 var 初始化为 undefined 不一样，let 关键字不会初始化。所以如果你在声明前尝试使用 let 变量，你会得到一个 Reference Error (引用错误)。

Const

使用 const 声明的变量其实是一个常量。const 声明和 let 声明有一些相似之处。

const 声明是块作用域.

和 let 声明一样，const 声明只能在它们声明的块内访问。

const 不能被修改或重新声明

这意味着使用 const 声明的变量值在其范围内保持不变。它不能被修改或重新声明。所以如果我们用 const 声明一个变量，我们不能这样做：

const greeting = "say Hi";
greeting = "say Hello instead";// error: Assignment to constant variable.

也不能这样：

const greeting = "say Hi";
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

因此，每个 const 声明都必须在声明时进行初始化。

当涉及到用 const 声明的对象时，这种行为在某种程度上有所不同。虽然无法更新 const 对象，但可以更新此对象的属性。因此，如果我们这样声明一个 const 对象：

const greeting = {
    message: "say Hi",
    times: 4
}

我们不能这样做：

greeting = {
    words: "Hello",
    number: "five"
} // error:  Assignment to constant variable.

我们可以这样做：

greeting.message = "say Hello instead";

这会修改 greeting.message 的值而不会返回错误。

const 的变量提升

和 let 一样，const 声明会被提升到顶部，但不会被初始化。

总结差异

• var 声明是全局作用域或局部作用域；而 let 和 const 是块作用域。
• var 变量在作用域内可以修改和重新声明；let 变量可以被修改但是不能被重新声明；const 变量既不能修改也不能被重新声明。
• 它们都可以被提升到作用域的顶部。但是 var 变量会被初始化为 undefined，let 和 const 变量不会被初始化。
• var 和 let 在声明时可以不初始化，const 在声明时必须初始化。

原文：Var, Let, and Const – What's the Difference? (freecodecamp.org)