JavaScript 中 var、let 和 const 关键字的区别

2025年4月4日 | 阅读 4 分钟

引言

JavaScript 中,变量声明是指创建变量并为其命名,以便可以使用它来存储值。变量是一个命名的容器,用于保存值,并且可以在程序中用于存储和操作数据。

在 JavaScript 中,我们可以通过三种方式声明变量:var、let 和 const,但它们在作用域、变量提升和重赋值规则上有所不同。

JavaScript 中的 var、let 和 const 是什么?

var: 在 JavaScript 中,var 关键字声明一个具有函数作用域或全局作用域的变量,并允许在同一作用域内重新声明和更新。

let: 在 JavaScript 中,let 关键字声明一个具有块级作用域的变量,允许更新但不能在同一块内重新声明。

const: 在 JavaScript 中,const 关键字声明块级作用域的变量,这些变量在初始赋值后不能被重新赋值。

如何在 JavaScript 中使用 var、let 和 const 声明变量

使用 var 声明变量

在 JavaScript 中,var 是声明 JavaScript 变量的原始关键字。var 关键字是函数作用域和全局作用域,这取决于它声明的位置。

示例

立即执行

输出

Tpoint

使用 let 声明变量

使用 let 声明的变量可以具有全局、局部或块级作用域。let 关键字提供块级作用域,这意味着该变量只能在声明它的块内访问。

示例

立即执行

输出

Difference between var, let, and const in JavaScript

使用 const 声明变量

在 JavaScript 中,const 用于声明一个不应在初始赋值后重新赋值的变量。此关键字也像 let 关键字一样是块级作用域。

示例

立即执行

输出

Rohit

使用 var、let 和 const 重新声明变量

使用 var 重新声明变量

当变量名使用 var 重复声明两次时,它允许在同一作用域内重新声明。最后的 console.log(a) 将打印 10,因为它覆盖了之前的值。

示例

立即执行

输出

10

使用 let 重新声明变量

当您使用 let 声明变量名时,它允许重新赋值但不允许重新声明。

示例

立即执行

输出

Akash

使用 const 重新声明变量

我们不能更改 const 变量的值。一旦我们为其分配了一个值,在整个程序执行过程中都不能更改它。

示例

在此示例中,重新赋值变量会导致 Type Error,如果我们尝试重新声明它,由于其块级作用域,它将给出语法错误。

var、let 和 const 的变量提升行为

在 JavaScript 中,变量提升是一种将变量声明移动到其包含作用域顶部的行为。但是,变量提升的方式对于 var、let 和 const 是不同的。

使用 var 进行变量提升

当使用 var 关键字时,变量声明会被提升到其作用域的顶部,但初始化会保留在原处。如果您在声明和初始化 var 变量之前尝试访问它,它将返回 undefined。

示例

立即执行

输出

undefined
10

使用 let 进行变量提升

在 JavaScript 中,使用 let 声明的变量不会被提升到作用域的顶部。因此,如果我们尝试在声明变量之前访问它,它肯定会给我们一个 Reference Error。

示例

在此示例中,您可以看到在声明之前打印变量会产生错误。

使用 const 进行变量提升

使用 const 声明的变量不会被提升到作用域的顶部。我们可以说,使用 const 声明的变量不会被提升,并且必须在声明时为其分配某个值。

示例

JavaScript 中 var、let 和 const 的区别

varletconst
var 变量的作用域是函数作用域和全局作用域。let 变量的作用域是块级作用域。const 变量的作用域也是块级作用域。
var 可以在同一作用域内更新,也可以重新声明。let 可以在同一作用域内更新,但不能重新声明。const 在任何作用域内都不能更新,也不能重新声明。
它可以声明而无需

 

初始化。

它可以声明而无需初始化。它不能在没有初始化的情况下声明。
在没有初始化的情况下可以访问它,因为它的默认值是“undefined”。在没有初始化的情况下无法访问它;否则,它将给出

 

referenceError。

在没有初始化的情况下无法访问它,因为它不能在没有初始化的情况下声明。
这些变量会被提升。这些变量会被提升,但会保留在暂时性死区 (TDZ) 中,直到初始化。这些变量会被提升,但会保留在暂时性死区 (TDZ) 中,直到初始化。

下一主题JavaScript if-else