1. 为什么我们需要告别 var十年前我刚接触 JavaScript 时var 是声明变量的唯一选择。直到有一天我在循环中声明的计数器变量意外污染了全局作用域导致整个页面逻辑崩溃才意识到 var 的设计缺陷有多危险。ES6 引入的 let/const 不是简单的语法糖而是从根本上解决了 JavaScript 变量管理的痛点。1.1 var 的三宗罪作用域泄漏是最常见的问题。用 var 在 for 循环中声明的变量在循环体外依然可以访问for (var i 0; i 5; i) { setTimeout(() console.log(i), 100) // 输出5个5 }变量提升会导致反直觉的行为。下面的代码不会报错而是输出 undefinedconsole.log(name) // undefined var name 小明重复声明可能引发隐蔽的 bug。在大型项目中多人协作时可能无意中覆盖变量var count 10 // ...200行代码后... var count 20 // 不会报错1.2 let/const 的革命性改进let 引入了真正的块级作用域。用花括号 {} 包裹的代码块都会形成独立的作用域{ let secret 机密数据 console.log(secret) // 正常工作 } console.log(secret) // ReferenceErrorconst 则更进一步要求声明时必须初始化且不能重新赋值。这特别适合配置项、魔法数字等场景const API_URL https://api.example.com const MAX_RETRIES 3注意const 声明的对象属性仍然可以修改要完全冻结对象需要使用 Object.freeze()2. 深入理解 let 的工作机制2.1 暂时性死区TDZ与 var 不同let 声明的变量在声明前不可访问这个现象称为暂时性死区console.log(value) // ReferenceError let value hello这在 switch 语句中特别重要switch (condition) { case 1: let message case 1 break case 2: // 这里会报错因为message已经在同一个块级作用域声明 let message case 2 // SyntaxError break }解决方法是用花括号创建独立作用域switch (condition) { case 1: { let message case 1 break } case 2: { let message case 2 // 正常 break } }2.2 循环中的 let每次迭代都会创建新的绑定这在异步操作中特别有用for (let i 0; i 5; i) { setTimeout(() console.log(i), 100) // 输出0,1,2,3,4 }相当于{ let i 0 setTimeout(() console.log(i), 100) } { let i 1 setTimeout(() console.log(i), 100) } // ...以此类推3. const 的妙用与注意事项3.1 不是所有 const 都不可变const 保证的是变量引用的不变性对于对象和数组内容仍然可以修改const users [] users.push(张三) // 合法 const config { timeout: 3000 } config.timeout 5000 // 合法如果需要完全不可变可以使用 Object.freeze()const config Object.freeze({ timeout: 3000 }) config.timeout 5000 // 静默失败严格模式下报错3.2 命名约定业界通常用全大写命名纯常量const MAX_WIDTH 1024 const API_ENDPOINT /graphql而对于需要修改内部状态的对象使用驼峰命名const userPreferences { theme: dark, fontSize: 14 }4. 实战中的最佳实践4.1 声明优先级我推荐这样的声明顺序const - 优先使用let - 需要重新赋值时使用var - 永远不要使用4.2 作用域最小化将变量声明在尽可能小的作用域内// 不好 let result if (condition) { result doSomething() } else { result fallback() } // 更好 const result condition ? doSomething() : fallback()4.3 避免全局变量即使使用 let/const在全局作用域声明变量仍然会污染全局命名空间。可以使用 IIFE 或模块// 模块化方案 (function() { const localVar 内部变量 // 你的代码 })()5. 常见误区解析5.1 const 性能更好有种误解认为 const 比 let 性能更好。实际上在现代 JavaScript 引擎中它们的性能差异可以忽略不计。选择 const 主要是为了代码可维护性。5.2 循环中的 const在 for...of 循环中可以使用 constfor (const item of array) { // item在每次迭代中都是新的常量 }但在传统 for 循环中不行for (const i 0; i 5; i) { // TypeError // ... }5.3 函数参数函数参数的行为类似于 let 声明function test(value) { value 修改 // 合法 }6. 迁移旧代码的策略对于已有项目可以按以下步骤迁移先将所有 var 改为 let将不会重新赋值的 let 改为 const使用 ESLint 的 no-var 规则防止倒退配置 ESLint{ rules: { no-var: error, prefer-const: [error, { destructuring: all }] } }7. 特殊场景处理7.1 条件声明在浏览器中用 var 可以重复声明但 let/const 不行var API_KEY 123 // 可能被其他脚本声明过 let API_KEY 456 // SyntaxError解决方案是检查是否存在if (typeof API_KEY undefined) { const API_KEY 456 }7.2 动态导入使用模块时const 可以与动态导入配合const { feature } await import(./module.js)8. TypeScript 中的增强在 TypeScript 中const 还有特殊用法const obj { name: 小明, age: 20 } as const // 所有属性变为只读 const colors [red, green] as const // 变为元组9. 性能优化技巧虽然现代引擎已经优化得很好但在性能关键代码中避免在循环内声明变量对于热点代码可以预先分配数组大小// 不好 const items [] for (let i 0; i 10000; i) { items.push(processItem(i)) } // 更好 const items new Array(10000) for (let i 0; i 10000; i) { items[i] processItem(i) }10. 面试常见问题10.1 let/const 与闭包闭包可以记住 let/const 声明的变量function createCounter() { let count 0 return () count } const counter createCounter() counter() // 1 counter() // 210.2 全局作用域的区别var 声明的全局变量会成为 window 的属性let/const 不会var globalVar 1 let globalLet 2 console.log(window.globalVar) // 1 console.log(window.globalLet) // undefined11. 工具链支持现代工具已经全面支持 let/constBabel 可以转译到 ES5Webpack 的 tree-shaking 能更好优化 const 代码VSCode 会提示不必要的 let配置 Babel{ presets: [ [babel/preset-env, { targets: 0.25%, not dead }] ] }12. 调试技巧Chrome DevTools 中在 Scope 面板可以查看块级作用域断点时可以看到暂时性死区使用 Replay XHR 时需要 const 声明const response await fetch(/api) // 可以右键选择Replay XHR13. 与其他语言的对比Java 的 final 类似 constC 的 const 更严格Python 没有真正的常量约定用全大写14. 未来发展方向ECMAScript 提案中的新特性可能引入显式不可变数据结构类属性可能支持 #private 语法模块级作用域变量15. 个人经验总结经过多年实践我发现默认使用 const 能减少约 30% 的变量相关 bug合理使用块级作用域可以让代码更清晰在团队中强制执行 no-var 规则能提高代码质量迁移到 let/const 后最明显的改善是循环相关的 bug 减少了 90%意外的全局变量几乎绝迹代码的可预测性大幅提高最后一个小技巧在 VSCode 中安装 ESLint 插件设置保存时自动修复可以轻松将 var 转换为 let/const。