要理解 const、var、let 的区别，我们可以从 **作用域、变量提升、可重复声明、可修改性** 这几个核心维度展开，这些也是新手最容易混淆的点。 一、核心概念铺垫 首先明确两个基础概念，能帮你更好理解区别： **函数作用域**：变量只在声明它的函数内部可访问（var 是函数作用域）。 **块级作用域**：变量只在声明它的 {} 内部可访问（let/const 是块级作用域，{} 包括 if…
要理解 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: "张三" }; obj.name = "李四"; // 正常执行，输出 { name: '李四' } console.log(obj); const arr = [1, 2]; arr.push(3); // 正常执行，输出 [1,2,3] console.log(arr);
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 有（提升为 undefined） | 有（暂时性死区） | 有（暂时性死区） |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 声明后赋值 | 允许（默认 undefined） | 允许（默认未初始化） | 不允许（必须立即赋值） |
| 修改值 | 允许 | 允许 | 引用不可改（对象 / 数组内部可改） |
const：声明不需要修改的变量（如常量、固定引用的对象 / 数组），能减少代码意外修改的风险。let：声明需要修改的变量（如循环变量、状态变量）。var：var 的函数作用域和变量提升容易导致 bug（比如循环变量泄露、重复声明覆盖），ES6 后已被 let/const 替代。let 和 const 是 ES6 新增的变量声明方式，核心是解决 var 的作用域和提升问题，它们的使用场景可以用一句话概括：优先用 const，需要修改时用 let。下面结合具体场景和代码示例，帮你彻底分清什么时候用哪个。
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: '韩雨龙', class: '24专本软件', hobby: ['唱歌', '跳舞'] }; // 允许修改内部属性（符合 const 规则） userInfo.name = '小雨'; userInfo.hobby.push('爬山'); // 列表数据（只会增删元素，不会重新赋值数组） const list = ['苹果', '香蕉']; list.push('橙子'); // 正常执行
就像你之前写的创建 h2 元素，创建后只会修改它的文本 / 样式，不会重新赋值成另一个元素，所以用 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; 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
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online