JavaScriptNode.js大前端
JavaScript 变量声明：var、let、const 核心区别与实战指南
JavaScript 变量声明关键字 var、let、const 在作用域、变量提升及可修改性上存在显著差异。var 为函数作用域且存在变量提升，let 和 const 为块级作用域并引入暂时性死区。最佳实践建议优先使用 const 声明常量或引用不可变对象，仅在需要重新赋值时使用 let，避免使用 var 以减少潜在 Bug。
JavaScript 变量声明关键字 var、let、const 在作用域、变量提升及可修改性上存在显著差异。var 为函数作用域且存在变量提升，let 和 const 为块级作用域并引入暂时性死区。最佳实践建议优先使用 const 声明常量或引用不可变对象，仅在需要重新赋值时使用 let，避免使用 var 以减少潜在 Bug。
要理解 const、var、let 的区别，我们可以从 作用域、变量提升、可重复声明、可修改性 这几个核心维度展开，这些也是新手最容易混淆的点。
首先明确两个基础概念，能帮你更好理解区别：
var 是函数作用域）。{} 内部可访问（let/const 是块级作用域，{} 包括 if/for/while/普通代码块）。var 是 ES5 中声明变量的方式，特性如下：
undefined。示例代码：
// 1. 函数作用域（无块级作用域）
if (true) {
var a = 10;
}
console.log(a); // 输出 10（a 跳出了 if 的 {}，因为 var 无块级作用域）
// 2. 变量提升
console.log(b); // 输出 undefined（声明提升了，赋值没提升）
var b = 20;
// 3. 可重复声明
var c = 30;
var c = 40;
console.log(c); // 输出 40（后声明的覆盖前一个）
// 4. 可修改
var d = 50;
d = 60;
console.log(d); // 输出 60
let 是 ES6 为解决 var 的缺陷新增的声明方式，特性如下：
{} 限制）。undefined，在声明前访问会报错。var/const 重复）。示例代码：
// 1. 块级作用域
if (true) {
let a = 10;
}
console.log(a); // 报错：a is not defined（a 被 if 的 {} 限制，外部访问不到）
// 2. 暂时性死区
console.log(b); // 报错：Cannot access 'b' before initialization
let b = 20;
// 3. 不可重复声明
let c = 30;
// let c = 40; // 报错：Identifier 'c' has already been declared
// var c = 40; // 同样报错
// 4. 可修改
let d = 50;
d = 60;
console.log(d); // 输出 60
const 用于声明常量，特性和 let 基本一致，核心区别是不可修改：
let 完全一样）。let 完全一样）。let 完全一样。示例代码：
// 1. 块级作用域
if (true) {
const a = 10;
}
console.log(a); // 报错：a is not defined
// 2. 暂时性死区
console.log(b); // 报错：Cannot access 'b' before initialization
const b = 20;
// 3. 不可重复声明
const c = 30;
// const c = 40; // 报错
// 4. 声明时必须赋值
// const d; // 报错：Missing initializer in const declaration
// 5. 不可修改引用（重点）
const e = 50;
// e = 60; // 报错：Assignment to constant variable.
// 注意：对象/数组的内部可修改（只是引用不能变）
const obj = { name: "User" };
obj.name = "Admin"; // 正常执行，输出 { name: 'Admin' }
console.log(obj);
const arr = [1, 2];
arr.push(3); // 正常执行，输出 [1,2,3]
console.log(arr);
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 有（提升为 undefined） | 有（暂时性死区） | 有（暂时性死区） |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 声明后赋值 | 允许（默认 undefined） | 允许（默认未初始化） | 不允许（必须立即赋值） |
| 修改值 | 允许 | 允许 | 引用不可改（对象/数组内部可改） |
const 声明的是引用不可变的变量（声明时必须赋值，且不能重新赋值），适合以下所有'不需要修改值/引用'的场景：
比如数学常量、配置项、固定字符串等，用 const 能明确表示'这个值不会变'，减少代码意外修改的风险。
// 数学常量
const PI = 3.1415926;
const RADIUS = 5;
const AREA = PI * RADIUS * RADIUS;
// 配置项（固定的接口地址、密钥等）
const BASE_URL = 'https://api.example.com';
const TOKEN = 'abc123456';
// 固定字符串
const TITLE = '个人信息';
注意：const 只是限制'引用不可变'，对象/数组的内部属性/元素可以修改，这种场景非常适合用 const（因为你只是操作内部，不会重新赋值整个对象/数组）。
// 用户信息对象（只会改内部属性，不会重新赋值）
const userInfo = { name: 'User', class: 'Software Engineering', hobby: ['唱歌', '跳舞'] };
userInfo.name = 'Admin';
userInfo.hobby.push('爬山');
// 列表数据（只会增删元素，不会重新赋值数组）
const list = ['苹果', '香蕉'];
list.push('橙子');
创建后只会修改它的文本/样式，不会重新赋值成另一个元素，所以用 const 最合适。
// 创建 h2 元素（不会重新赋值，用 const）
const h2 = document.createElement('h2');
h2.textContent = '个人信息';
document.body.appendChild(h2);
// 创建按钮元素（同理）
const btn = document.createElement('button');
btn.textContent = '点击';
document.body.appendChild(btn);
let 声明的是可重新赋值的变量，只有当你需要'修改变量的值/引用'时，才用 let，常见场景如下：
for/while 循环中的计数器（比如 i），每次循环都会修改值，必须用 let（不能用 const，因为 i++ 是重新赋值）。
// for 循环计数器（i 会从 0 变到 4，需要修改）
const info = ['班级', '学号', '姓名', '性别', '爱好'];
for (let i = 0; i < info.length; i++) {
const p = document.createElement('p');
p.textContent = info[i];
document.body.appendChild(p);
}
// while 循环变量
let count = 0;
while (count < 3) {
console.log('计数：', count);
count++; // 重新赋值，必须用 let
}
比如开关状态、计数器、表单输入值等，这些值会随着操作（点击、输入）变化，需要用 let。
// 开关状态（点击按钮切换 true/false）
let isShow = false;
const btn = document.createElement('button');
btn.textContent = '显示/隐藏';
btn.onclick = function() {
isShow = !isShow; // 重新赋值，用 let
console.log('状态：', isShow);
};
document.body.appendChild(btn);
// 计数器（点击一次加 1）
let num = 0;
const countBtn = document.createElement('button');
countBtn.textContent = '计数';
countBtn.onclick = function() {
num++; // 重新赋值，用 let
countBtn.textContent = `计数：${num}`;
};
document.body.appendChild(countBtn);
比如分步计算的值、条件判断后需要修改的变量，这些场景需要多次赋值。
// 分步计算总价
let total = 0;
total += 10; // 加商品 1 价格
total += 20; // 加商品 2 价格
total *= 0.8; // 打 8 折（多次重新赋值，用 let）
console.log('总价：', total);
// 条件赋值（根据条件修改变量）
let message;
const isLogin = false;
if (isLogin) {
message = '欢迎登录';
} else {
message = '请先登录'; // 重新赋值，用 let
}
const 声明需要修改的变量const i = 0;
i++; // 报错：Assignment to constant variable.（const 不能重新赋值）
let 声明不修改的变量// 标题文本不会改，应该用 const 而不是 let
let TITLE = '个人信息';
const：所有不需要重新赋值的场景（常量、对象/数组、DOM 元素、固定字符串等），用 const 能让代码更安全、语义更清晰。let：只有当变量需要重新赋值时（循环变量、状态变量、临时变量等），才用 let。let 就不用，用 const 约束'不变'，用 let 表示'可变'，彻底抛弃 var。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online