在 JavaScript 中，变量和常量的声明方式直接影响代码的可读性、可维护性和健壮性。从早期的 var 到 ES6 引入的 let 和 const，JavaScript 的变量系统经历了重要演进。本文将围绕 如何声明变量/常量、三者的核心差异 以及 常见报错场景，用清晰、简洁的方式进行总结🎯。
一、JavaScript 中如何声明变量？📦
JavaScript 提供三种声明方式：
var：ES5 及之前的标准（现已不推荐）let：ES6 引入，用于声明可变的块级作用域变量const：ES6 引入，用于声明不可重新赋值的块级作用域常量
二、var：问题多多的“老前辈”⚠️
🔧 基本用法
var a = 1;
❌ 主要问题
1. 变量提升（Hoisting） 🚀
var 声明会被“提升”到其作用域顶部（通常是函数或全局），但赋值不会提升。
console.log(x); // 输出：undefined（不是报错！）
var x = 10;
等价于：
var x; // 声明被提升
console.log(x); // undefined
x = 10; // 赋值在原位置执行
💡 这违背直觉！开发者以为变量“还没声明”，但其实它已存在，只是值为
undefined。
2. 函数作用域，非块级作用域 🧱
if (true) {
var y = 2;
}
console.log(y); // ✅ 输出：2（变量“泄漏”出 if 块！）
3. 允许重复声明 🔄
var z = 1;
var z = 2; // 不报错！z 变成 2
🤯 这在大型项目中极易引发意外覆盖，难以调试。
三、let：现代变量声明的首选 ✅
🔧 基本用法
let name = "Alice";
✅ 核心优势
1. 块级作用域（Block Scope） 🔒
if (true) {
let age = 25;
}
console.log(age); // ❌ ReferenceError: age is not defined
变量只在 {} 内有效，避免污染外层作用域。
2. 存在“暂时性死区”（Temporal Dead Zone, TDZ） ⏳
在声明前访问 let 变量会直接报错：
console.log(height); // ❌ ReferenceError: Cannot access 'height' before initialization
let height = 180;
📌 这比
var的undefined更安全，能及早暴露错误！
3. 禁止重复声明 🚫
let score = 90;
let score = 95; // ❌ SyntaxError: Identifier 'score' has already been declared
四、const：声明常量的黄金标准 🔒
🔧 基本用法
const PI = 3.14159;
✅ 核心规则
1. 必须初始化 🚨
const MAX; // ❌ SyntaxError: Missing initializer in const declaration
2. 不能重新赋值 🚫
const USER = "Bob";
USER = "Tom"; // ❌ TypeError: Assignment to constant variable.
3. 但对象/数组内容可变 ⚠️
const person = { name: "Bob" };
person.name = "Tom"; // ✅ 合法！修改属性
person = {}; // ❌ TypeError！不能重新赋值整个变量
💡
const保证的是绑定不可变，不是值不可变。
4. 同样具有块级作用域 + TDZ（暂时性死区）
行为与 let 完全一致，只是多了“不可重新赋值”的约束。
五、常见报错集合 🚨（附原因与解决方案）
| 报错信息 | 触发场景 | 原因 | 如何避免 |
|---|---|---|---|
ReferenceError: Cannot access 'height' before initialization | 在 let/const 声明前使用变量 | 暂时性死区（TDZ） | 确保先声明再使用 ✅ |
ReferenceError: age is not defined | 在作用域外访问 let/const 变量 | 块级作用域限制 | 检查变量作用域范围 🔍 |
TypeError: Assignment to constant variable. | 尝试给 const 变量重新赋值 | const 绑定不可变 | 改用 let，或只修改对象属性而非整体赋值 🛠️ |
六、最佳实践建议 🛠️✨
- 默认使用
const
→ 如果变量不需要重新赋值，就用const。这是最安全的选择！ - 需要重赋值时才用
let
→ 如循环计数器、状态开关等。 - 彻底避免
var
→ 除非维护非常老的代码，否则不要使用var。 - 善用块级作用域组织逻辑
→ 用{}明确变量生命周期，减少命名冲突。 - 理解 TDZ 是朋友，不是敌人
→ 它帮你提前发现“先使用后声明”的逻辑错误！
七、一句话总结 🎯
🌟 “能用
const就用const，要变才用let，var请忘掉！”
通过合理使用 let 和 const，你的 JavaScript 代码将更清晰、更安全、更符合现代开发规范 ✅。
📚 适用场景：前端学习、面试复习、团队编码规范参考
🚀 记住：变量声明虽小，却是写出高质量 JS 的第一步！
