JavaScript中var、let和const的核心区别在于作用域、提升和重复声明/赋值：var是函数作用域，存在变量提升且允许重复声明；let和const为块级作用域，存在暂时性死区，不允许重复声明，其中const声明的变量不可重新赋值。
在JavaScript中声明变量，我们主要有三种方式：
var
、
let
和
const
。简单来说，
var
是老旧的声明方式，功能上有些“放任自流”，而
let
和
const
则是ES6之后引入的，提供了更严格、更可控的变量管理机制，它们在作用域、变量提升和重复声明方面表现截然不同。
解决方案
要声明一个JavaScript变量，你只需选择合适的关键字，然后跟上你想要的变量名，最后可以加上等号和初始值。
1. 使用
var
声明： 这是JavaScript最早的变量声明方式。它的特点是函数作用域（Function Scope）和变量提升（Hoisting）。这意味着用
var
声明的变量，在整个函数内部都是可见的，即使你在函数末尾声明，它也会被“提升”到函数顶部。
function exampleVar() { console.log(myVar); // 输出 undefined，而不是报错，因为声明被提升了 var myVar = "Hello var"; console.log(myVar); // 输出 "Hello var" if (true) { var anotherVar = "Inside if with var"; } console.log(anotherVar); // 输出 "Inside if with var"，var没有块级作用域 } exampleVar(); // console.log(myVar); // ReferenceError: myVar is not defined (函数外部不可见)
var
的一个常见问题是它允许在同一作用域内重复声明，这可能导致意外的变量覆盖。
2. 使用
let
声明：
let
是ES6（ECMAScript 2015）引入的，它解决了
var
的许多痛点。
let
声明的变量具有块级作用域（Block Scope），这意味着它们只在声明它们的代码块（如
if
语句、
for
循环或任何花括号
{}
内）中有效。
function exampleLet() { // console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization (暂时性死区 TDZ) let myLet = "Hello let"; console.log(myLet); // 输出 "Hello let" if (true) { let anotherLet = "Inside if with let"; console.log(anotherLet); // 输出 "Inside if with let" } // console.log(anotherLet); // ReferenceError: anotherLet is not defined (块级作用域外不可见) } exampleLet();
let
不允许在同一作用域内重复声明同一个变量，这有助于避免命名冲突和潜在的bug。
3. 使用
const
声明：
const
也是ES6引入的，它和
let
类似，也具有块级作用域，并且不允许在同一作用域内重复声明。
const
最主要的特点是它用于声明一个常量，这意味着一旦变量被赋值，它的引用就不能再被修改（re-assigned）。
function exampleConst() { const PI = 3.14159; console.log(PI); // 输出 3.14159 // PI = 3.14; // TypeError: Assignment to constant variable. (不能重新赋值) const user = { name: "Alice", age: 30 }; console.log(user); // 输出 { name: "Alice", age: 30 } user.age = 31; // 允许修改对象的属性，因为修改的是对象内部，而不是user变量本身的引用 console.log(user); // 输出 { name: "Alice", age: 31 } // user = { name: "Bob" }; // TypeError: Assignment to constant variable. (不能重新指向另一个对象) } exampleConst();
理解
const
的“不变性”很重要：它保证的是变量的绑定不可变，而不是变量所指向的值本身不可变（对于对象和数组而言）。
JavaScript中var、let和const有什么核心区别？
这三者之间的差异，是理解现代JavaScript变量管理的关键。在我看来，它们最核心的区别体现在作用域（Scope）、变量提升（Hoisting）以及能否重复声明/重新赋值这三个维度上。
首先说作用域。
var
采用的是函数作用域，这意味着一个用
var
声明的变量，它的生命周期和可见性会贯穿整个函数，即便你是在一个
if
语句或者
for
循环里声明的，它在这些块的外部（只要还在同一个函数内）依然是可见的。这在很多情况下容易导致变量污染，或者说，变量的“作用范围”比你预想的要大。比如，你在一个循环里声明了一个
var i
，这个
i
在循环结束后依然存在，并且可能与外部的同名变量冲突。
而
let
和
const
则引入了块级作用域。任何被花括号
{}
包裹的代码块，比如
if
语句、
for
循环、甚至是一个独立的空块，都会为
let
和
const
声明的变量创建一个独立的作用域。这意味着变量只在它被声明的那个块内有效。一旦离开了那个块，变量就“消失”了。这种设计极大地减少了变量污染的可能性，让代码的逻辑更加清晰和可控。这是我个人非常喜欢
let
和
const
的一个原因，它让局部变量真正地“局部”起来。
其次是变量提升（Hoisting）。
var
声明的变量存在“声明提升”的特性。这意味着在代码执行前，JavaScript引擎会将所有
var
声明的变量的声明部分“提升”到当前作用域的顶部。所以你可以在声明变量之前就访问它，只不过此时它的值是
undefined
。这种行为有时会让人感到困惑，尤其是在复杂的代码中，可能导致一些难以追踪的bug。
let
和
const
也有提升，但它们表现不同。它们也会被提升到块级作用域的顶部，但它们在被实际声明之前是不可访问的，处于一个被称为“暂时性死区（Temporal Dead Zone, TDZ）”的状态。如果你在TDZ期间尝试访问
let
或
const
变量，JavaScript会抛出一个
ReferenceError
。这种机制强制开发者在变量声明之后再使用它，使得代码的行为更加可预测，也更容易调试。我经常会建议初学者，把
let
和
const
理解为“不提升”或者“严格提升”，这样更容易避免TDZ带来的错误。
最后是能否重复声明/重新赋值。
var
允许你在同一作用域内重复声明同一个变量，并且不会报错，而是直接覆盖之前的值。这在大型项目中尤其危险，因为你可能无意中覆盖了其他地方定义的变量。
let
不允许在同一作用域内重复声明同一个变量。如果你尝试这样做，会得到一个
SyntaxError
。但
let
声明的变量可以被重新赋值。
const
则更为严格。它同样不允许在同一作用域内重复声明，而且一旦被赋值，它的引用就不能再被重新赋值。这意味着你不能让
const
变量指向另一个不同的值。但这里有个小细节，对于对象和数组这类引用类型，
const
保证的是变量的引用地址不变，而不是其内部数据不变。所以，你可以修改
const
声明的对象的属性，或者向
const
声明的数组中添加或删除元素。这一点，很多人初学时会在这里犯迷糊。
总的来说，
let
和
const
提供了更严谨、更安全的变量管理方式，它们是现代JavaScript开发的首选。
什么时候应该使用let，什么时候应该使用const？
这是一个非常实用的问题，也是我个人在编写JavaScript代码时，会第一时间考虑的。我遵循的原则很简单：优先使用
const
，只有当确定变量需要被重新赋值时，才使用
let
。
为什么是
const
优先呢？
首先，使用
const
能够清晰地向阅读代码的人（包括未来的自己）表明，这个变量的值在声明后就不会改变。这大大提升了代码的可读性和可维护性。当你看到一个
const
变量时，你立刻知道它的值是固定的，不需要担心它在后续代码中被意外修改，这减少了认知负担。
其次，
const
有助于防止意外的副作用和bug。在大型复杂的应用中，变量的重新赋值往往是导致错误的一个常见原因。通过默认使用
const
，我们强制自己思考变量的生命周期和它的不变性。如果一个变量在声明后确实不应该改变，那么
const
就能在编译阶段（或运行时早期）捕获到任何尝试修改它的行为，从而避免潜在的bug。这就像给变量加了一层保护膜。
那么，什么时候才轮到
let
登场呢？
很简单，当你知道你的变量在声明之后，它的值需要被改变时，就用
let
。最典型的场景就是循环计数器（比如
for
循环中的
i
）、需要根据条件动态更新的变量，或者某个状态量需要在不同阶段进行修改。
// 示例1: 循环计数器 (需要重新赋值) for (let i = 0; i < 5; i++) { console.log(i); } // 示例2: 动态更新的变量 (需要重新赋值) let message = "Hello"; if (someCondition) { message = "Goodbye"; // message的值被重新赋值 } console.log(message); // 示例3: 某个状态量 let isActive = false; function toggleStatus() { isActive = !isActive; // isActive的值会改变 }
你看，这些场景下
let
就是最合适的选择。如果你尝试用
const
去声明
i
或者
message
，代码会直接报错，因为它们的值确实需要变。
所以，我的建议是：
- 默认使用
声明所有变量。
const
- 只有当你明确知道这个变量在后续逻辑中需要被重新赋值时，才将其改为
let
。 这个习惯能让你的代码更健壮，也更容易理解。它强迫你思考变量的“意图”，是它一个固定不变的引用，还是一个会随着程序运行而改变的状态。
理解JavaScript变量声明中的“提升”（Hoisting）机制
“提升”（Hoisting）是JavaScript中一个非常独特的机制，也是很多初学者容易感到困惑的地方。简单来说，它指的是在JavaScript代码执行之前，变量和函数声明会被“移动”到其所在作用域的顶部。但这个“移动”并不是字面意义上的代码挪动，而是一种概念上的行为，涉及到JavaScript引擎在解析代码时的处理方式。
我们来分别看看
var
、
let
和
const
在提升方面的表现。
var
的提升：声明被提升，初始化留在原地
当使用
var
声明一个变量时，它的声明部分会被提升到当前函数作用域的顶部，而赋值（初始化）部分则留在原地。这意味着你可以在
var
变量声明之前就访问它，但此时它的值是
undefined
。
console.log(myOldVar); // 输出: undefined var myOldVar = "我被声明了"; console.log(myOldVar); // 输出: "我被声明了" // 引擎实际处理过程类似这样： // var myOldVar; // 声明被提升到顶部，并默认初始化为 undefined // console.log(myOldVar); // myOldVar = "我被声明了"; // 赋值操作留在原地 // console.log(myOldVar);
这种行为在某些情况下可能导致逻辑上的混乱，因为变量看起来在被赋值之前就已经存在了。比如，在循环中不小心重复声明
var
变量，或者在条件语句块中声明的
var
变量泄漏到外部作用域，都可能与提升机制有关。
let
和
const
的提升：进入“暂时性死区”（Temporal Dead Zone, TDZ）
let
和
const
声明的变量也存在提升行为，但它们与
var
不同。它们会被提升到其块级作用域的顶部，但在变量声明语句执行之前，它们是不可访问的。从块的开始到变量声明语句之间的区域，就是所谓的“暂时性死区”（TDZ）。在TDZ内访问
let
或
const
变量会抛出
ReferenceError
。
function showTDZ() { // console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization let myLetVar = "我是一个let变量"; console.log(myLetVar); // 输出: "我是一个let变量" if (true) { // console.log(myConstVar); // ReferenceError: Cannot access 'myConstVar' before initialization const myConstVar = "我是一个const变量"; console.log(myConstVar); // 输出: "我是一个const变量" } } showTDZ();
为什么
let
和
const
要引入TDZ？这是为了让代码行为更加可预测和安全。它强制你必须先声明并（对于
const
而言）初始化变量，然后才能使用它。这避免了
var
带来的那种“变量存在但未定义”的模糊状态，减少了潜在的错误。
对我个人而言，理解TDZ是掌握
let
和
const
的一个重要里程碑。它让你明白，虽然这些变量在概念上被提升了，但它们并不是在作用域一开始就可用的。这种机制鼓励更清晰、更线性的代码编写习惯，即先定义再使用。
总的来说，提升机制是JavaScript引擎在执行代码前的一种预处理行为。对于
var
，它可能带来一些“意想不到”的行为；而对于
let
和
const
，它通过TDZ确保了变量使用的严谨性，使得现代JavaScript代码更加健壮和易于维护。
评论（已关闭）
评论已关闭