var、let 与 const：JavaScript 变量声明的演进与最佳实践

在 JavaScript 的发展过程中，变量声明机制经历了从 var 到 let 和 const 的重要演进。这三种关键字虽然都用于声明变量，但在作用域、提升行为、重复声明规则以及使用场景上存在显著差异。理解它们的区别对于编写健壮、可维护的现代 JavaScript 代码至关重要。

一、var：传统声明方式及其缺陷

基本语法

ini 复制代码

var a = 1;
var b;
b = 2;

变量提升（Hoisting） var 最显著的特性是变量提升。在 JavaScript 的编译阶段，所有使用 var 声明的变量都会被"提升"到其作用域的顶部。这意味着你可以在声明之前访问该变量，但其值为 undefined。

ini 复制代码

console.log(x); // 输出: undefined
var x = 10;

上述代码在执行时，等价于：

ini 复制代码

var x;
console.log(x); // undefined
x = 10;

函数作用域 var 声明的变量具有函数作用域，而不是块级作用域。这意味着在 if、for 等语句块中声明的 var 变量，在块外依然可以访问。

ini 复制代码

if (true) {
    var y = 5;
}
console.log(y); // 输出: 5

允许重复声明 var 允许在同一作用域内重复声明同一个变量，不会报错（但不推荐）。

ini 复制代码

var a = 1;
var a = 2; // 合法，覆盖之前的值

缺陷总结变量提升导致意外行为：提前访问未初始化的变量容易引发 undefined 相关的 bug。缺乏块级作用域：在循环或条件语句中声明的变量"泄露"到外部，影响代码的可预测性。可重复声明：容易造成命名冲突和代码混乱。

二、let：块级作用域的引入

ES6（ECMAScript 2015）引入了 let，解决了 var 的诸多问题。

基本语法

ini 复制代码

let a = 1;
let b;
b = 2;

块级作用域 let 声明的变量具有块级作用域，即只在 {} 内部有效。

ini 复制代码

if (true) {
    let z = 10;
}
console.log(z); // ReferenceError: z is not defined

在 for 循环中使用 let 时，每次迭代都会创建一个新的绑定，避免了闭包陷阱：

javascript 复制代码

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // 输出 0, 1, 2
}

暂时性死区（Temporal Dead Zone, TDZ） let 变量虽然也会被提升，但不能在声明之前访问，否则会抛出 ReferenceError。

ini 复制代码

console.log(temp); // ReferenceError: Cannot access 'temp' before initialization
let temp = "hello";

从作用域开始到变量声明之间，称为"暂时性死区"，在此区域内访问变量会报错。

不允许重复声明在同一作用域内，不能用 let 重复声明已存在的变量。

ini 复制代码

let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared

let 的优势避免变量泄露：块级作用域使变量生命周期更清晰。减少命名冲突：不能重复声明增强了代码安全性。更可预测的行为：暂时性死区防止了提前使用未初始化的变量。

三、const：常量声明

const 用于声明一个常量，其值在声明后不能被重新赋值。

基本语法

ini 复制代码

const PI = 3.14159;

必须初始化 const 声明的变量必须在声明时赋值，否则会报错。

arduino 复制代码

const a; // SyntaxError: Missing initializer in const declaration

块级作用域与暂时性死区 const 与 let 一样，具有块级作用域和暂时性死区。

ini 复制代码

{
    const x = 1;
}
console.log(x); // ReferenceError: x is not defined

console.log(y); // ReferenceError: Cannot access 'y' before initialization
const y = 2;

不可重新赋值一旦声明，const 变量不能被重新赋值。

ini 复制代码

const a = 1;
a = 2; // TypeError: Assignment to constant variable.

对象和数组的"可变性" 需要注意的是，const 保证的是引用不可变，而不是值不可变。对于对象或数组，其内部属性或元素仍然可以修改。

ini 复制代码

const obj = { name: "Alice" };
obj.name = "Bob"; // 合法
obj.age = 25;     // 合法

const arr = [1, 2, 3];
arr.push(4);      // 合法
arr[0] = 0;       // 合法

// 但不能重新赋值
arr = [4, 5, 6];  // TypeError

如果需要完全冻结对象，应使用 Object.freeze()。

四、常见错误分析

ReferenceError: height is not defined 原因：尝试访问一个未声明的变量。解决：确保变量已正确声明，或检查作用域是否正确。
TypeError: Assignment to constant variable 原因：试图给 const 声明的变量重新赋值。解决：确认是否需要重新赋值，若需要，改用 let。
ReferenceError: Cannot access 'PI' before initialization 原因：在 const 或 let 声明之前访问变量，触发了暂时性死区。解决：确保在声明之后再使用变量。

五、总结与最佳实践

特性 var let const 作用域函数作用域块级作用域块级作用域提升是（值为 undefined）是（但有 TDZ）是（但有 TDZ）重复声明允许不允许不允许必须初始化否否是可重新赋值是是否 ✅ 最佳实践建议：优先使用 const：如果变量不会被重新赋值，使用 const。这有助于防止意外修改，提升代码可读性。其次使用 let：当变量需要重新赋值时使用 let。避免使用 var：除非在旧环境或特定场景下，现代开发应尽量避免 var。理解作用域与提升：掌握块级作用域和暂时性死区，避免因变量提升导致的 bug。注意 const 的引用不变性：对于对象和数组，const 仅冻结引用，内部仍可修改。 🚫 不推荐的写法：

css 复制代码

var a = 1;
var a = 2; // 重复声明

for (var i = 0; i < 10; i++) {
    // i 在循环外仍可访问
}
console.log(i); // 10 ------ 变量泄露

✅ 推荐的写法：

ini 复制代码

const PI = 3.14;
let count = 0;

for (let i = 0; i < 10; i++) {
    count += i;
}
// i 在此处不可访问

六、结语

从 var 到 let 和 const 的演进，体现了 JavaScript 语言在作用域控制、变量安全性和代码可维护性方面的不断进步。掌握这三者的区别，不仅能帮助我们写出更高质量的代码，也能更好地理解 JavaScript 的执行机制。在现代 JavaScript 开发中，const 优先，let 次之，避免 var 已成为广泛接受的编码规范。