JavaScript 中 const 和 let 的区别

引言

JavaScript 中声明变量有几种方法。在 JavaScript 中声明变量主要使用 var、let 和 const 关键字。

假设我们编写了一个函数，需要一个在函数内部永远不会更新的常量变量。在这种情况下，用 var 或 let 声明的变量可以被修改；然而，用 const 声明的变量永远不会被修改，并且能与我们的函数正常工作。

变量声明和初始化

需要一个变量来存储任何数据；因此，我们将首先定义一个 var 变量，然后将值初始化到该变量中。

让我们通过一个例子来了解一下

输出

Javatpoint

如上所示，我们在第一行定义了变量“a”，然后在第二行初始化了字符串值“Javatpoint”。

上面的例子使用了两步过程，我们先声明变量，然后初始化它。但是，我们可以像在这个例子中那样同时完成声明和初始化。

在前面的例子中，我们使用了 var 变量作为示例，但我们也可以声明和初始化 let 和 const 变量。

函数作用域和块作用域

范围

“作用域”一词指的是我们代码中变量可用和不可用的部分。变量的作用域指示了它可以或不可以被访问的代码部分。在 JavaScript 中，这是区分 let 和 const 的主要元素之一。

为了更好地理解，让我们看一个例子 -

输出

"Javatpoint"
ReferenceError: a is not defined

示例中的 Func() 方法用于定义一个名为“a”的变量并将其值输出到控制台。

当我们调用函数 Func() 时，变量 'a' 会显示在控制台上。当我们尝试在函数外部打印它时，我们会收到一个 ReferenceError，因为它具有函数作用域，因此在函数外部不可用。

函数作用域

具有函数作用域的变量是指只能在为其声明的函数内使用的变量；它不能在函数外部访问，如果尝试从函数外部访问，将返回 Reference Error。

这是一个说明

输出

18
ReferenceError: age is not defined

在此示例中，我们定义了 myage() 函数并在其中声明了一个名为 age 的变量。函数执行会在控制台上输出 age 变量，但当我们从函数外部调用该变量时，会抛出 Reference Error。

块作用域

块是任何包含一对大括号的对象。块被指定为一对大括号。

具有块作用域的变量只能在其定义的块内使用；它不能在块外部访问，并且如果尝试从块外部访问，将返回 Reference Error。

这是一个说明

输出

XYZ
ReferenceError: name is not defined

在上面示例的 'if' 块内，我们定义了一个名为 name 的变量，并有一个条件为 true 的 'if' 语句。当我们尝试在 'if' 块外部显示该变量时，现在会收到一个 Reference Error，但 name 变量正确地输出到控制台。

JavaScript 中的 Let 变量是什么？

JavaScript 的最新版本 (ES6) 引入了两种定义 JavaScript 变量的新方法。其中一种方法是利用 let 关键字。

这是 let 变量声明的示例

在我们之前的例子中，我们使用 let 关键字声明了一个 let 变量并初始化了字符串值“XYZ”。

请记住，重声明是 var 变量的一个问题，但 let 变量通过引入一项独特功能解决了这个问题，该功能可防止变量重声明。

let 变量中重声明的示例

输出

SyntaxError: Identifier 'name' has already been declared

在上例中，我们首先声明了一个名为“name”的变量，然后定义了另一个同名变量。但是，当我们尝试在控制台上显示该变量时，我们看到了一个错误消息“let name 的重声明”。

let 变量的作用域

块作用域意味着 let 变量只能在其定义的块内访问。任何试图在此作用域外访问此变量的尝试都将导致 Reference Error。

以此为例，让我们理解它

输出

XYZ
ReferenceError: name is not defined

上面的示例展示了 let 和 const 在 JavaScript 中的区别。在前面的示例中，我们有一个 'if' 条件块，其中包含一个名为“age”的变量。由于我们的 'if' 条件在此情况下得到满足，我们进入了 'if' 块。在 'if' 块的块作用域中还有另一个变量，名为“name”。现在我们在 'if' 块中将“name”变量输出到控制台。但是，该变量在 'if' 块外部不可用，并且由于作用域会引发“ReferenceError”。

let 变量的重声明

var 变量的主要问题是它们不允许重声明变量，但允许更新变量。Let 变量帮助我们避免了变量重声明引起的问题。

为了进一步理解 let 变量中的重声明，让我们看一个例子

输出

SyntaxError: Identifier 'name' has already been declared

这里，我们有一个名为“name”的变量。然后我们定义了另一个同名的变量并试图在控制台上输出它的值。这会导致发生语法错误。

为了理解 let 变量是如何更新的，请考虑以下示例

输出

ABC

在这种情况下，我们定义了一个名为“name”的变量并给它赋值“XYZ”。在下一行，我们为我们的“name”变量赋予了另一个值：“ABC”。当我们最终尝试打印“name”变量的值时，控制台上打印的“name”变量的更新值（即“ABC”）而不是“XYZ”。

let 变量的提升

将 let 变量提升到作用域的顶部。但它仍然未被赋值。因此，如果我们在声明前尝试访问 let 变量，将导致语法错误，因为没有值可以输出。

让我们看下面的例子

输出

ReferenceError

在这种情况下，变量名在被提升到作用域顶部时没有被初始化，因此，当我们尝试在声明前访问它时，我们会收到一个 ReferenceError。

JS 中的 Const 变量是什么？

随着 ES6 的发布，JavaScript 中有两种新的定义变量的方法。第一个是利用 const 关键字来声明常量变量。const 变量的示例

Let 变量提供了一个独特的功能，使其可以保持不变。var 变量在声明常量变量时存在问题。此问题已通过 const 变量解决。

为了说明，请看这个例子

输出

TypeError: invalid assignment to const 'name'

在上例中，我们声明了变量“name”并赋予了它要存储的初始字符串值“XYZ”。但是，我们无法编辑 const 变量的值，当我们尝试更新 name 变量时，会产生 TypeError。

const 声明是块级作用域

Const 变量具有与 let 变量相同的块作用域；但是，它们不能在指定区域外访问。为了更好地理解，请看这个例子

输出

ReferenceError: name is not defined

在上例中，有一个 'if' 块和一个名为 'name' 的变量。我们可以通过进入 'if' 块来在控制台上显示 'name' 的值。但是，当我们尝试在 'if' 块外部显示 'name' 的值时，const 变量的作用域会导致错误。

Const 变量不能被修改或重声明

Const 变量不能被修改或重声明。因此，我们可以使用 const 变量创建无错误的代码。

例如，让我们看看 const 的更新。

输出

TypeError: invalid assignment to const 'XYZ'.

在示例的第一行定义了一个名为 name 的变量，然后在我们的 name 变量中初始化了一个后续值。

当我们尝试将 name 变量打印到控制台时，它会显示 TypeError，表明我们无法更新 const 变量。

为了理解 const 中的重声明，让我们看一个例子。

输出

TypeError: invalid assignment to const 'name.'

示例中的第一行是变量名，然后在下一行再次声明相同的变量。

当我们尝试将 name 变量输出到终端时，SyntaxError 消息表明我们无法重声明 const 变量。

const 的提升

此外，作用域被扩展到包含 const 变量。但是，它没有初始化任何值。因此，在声明之前使用 const 变量是非法的，并且如果尝试这样做，将引发语法错误。这是因为 const 变量没有值可以打印。

让我们通过一个例子来更好地理解它

输出

ReferenceError

在这种情况下，const 变量在被提升到作用域顶部后仍未初始化；因此，当我们尝试在声明前访问变量名时，我们会收到一个 ReferenceError。

JavaScript 中 Let 和 Const 的主要区别

在 JavaScript 中，Let 和 Const 的作用域和可变性是它们之间的主要区别。Let 在适应性和一致性之间提供了折衷。它最初出现在 ES6 中，是块级作用域。它只能被修改，不能被重声明。Const 是变量声明中最严格的选择，最适合那些应该在整个代码中保持不变的值。Const 也是 ES6 的一项创新，与 'let' 一样是块级作用域，但不能被修改或重声明。

下面的表格说明了 let 和 const 在 JavaScript 中的区别

结论

在JavaScript 中，'const' 和 'let' 是用于变量声明的关键字，但它们在某些属性上有所不同。变量的作用域指示了它可以在我们代码的哪些部分访问，哪些部分不能访问。

更近期的变量声明方法包括 let 和 const，它们会被提升但不会被初始化。'const' 用于那些不会被覆盖的变量。进入作用域后，它保持不变。与此相反，'let' 创建一个可以被重新赋值的变量。它会生成可变的绑定，因此，这些绑定可以根据变量的值进行更新。'const' 创建不变性，并通知分配给这些变量的值不会被重新分配，这是一个好习惯。另一方面，'let' 允许重新赋值变量值。然而，决定使用哪一个取决于您的代码的特性。当变量不会被重新赋值时，应用 const；当某些值需要被更改时，应用 let。理解这些差异将有助于编写更健壮、更易于维护的 JavaScript 代码。