悠悠楠杉
网站页面
JavaScript中const和let如何替代var，js let var const区别
08/13
一、var的时代困境：为什么需要替代方案？
在ES5时代，var是JavaScript唯一的变量声明方式，但存在三个致命缺陷：
作用域渗透：var只有函数作用域，在if/for等块中声明的变量会泄露到外部
javascript for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i)) // 输出3次3 }变量提升（Hoisting）：声明会被提升到作用域顶部，导致"先使用后声明"的反直觉现象
javascript console.log(name) // undefined而非报错 var name = 'Alice'重复声明：同一作用域内可重复声明，极易引发错误
javascript var count = 10 var count = 20 // 不会报错
二、const/let的革新特性
2.1 块级作用域（Block Scope）
javascript
{
let privateVar = '内部变量'
const PI = 3.14
}
console.log(privateVar) // ReferenceError
- 花括号
{}形成独立作用域 - 循环变量不再泄露
javascript for (let j = 0; j < 3; j++) { setTimeout(() => console.log(j)) // 0,1,2 }
2.2 暂时性死区（TDZ）
javascript
console.log(age) // ReferenceError
let age = 30
- 声明前的区域称为"暂时性死区"
- 避免变量提升带来的不确定性
2.3 声明约束
let不允许重复声明
javascript let userId = 1001 let userId = 1002 // SyntaxErrorconst需立即初始化且不可重新赋值
javascript const MAX_SIZE // SyntaxError const API_KEY = 'a1b2c3' API_KEY = 'newKey' // TypeError
三、实战选择策略：何时用const/let？
3.1 const优先原则
- 所有不应改变的引用都使用const
javascript const DEFAULT_CONFIG = { timeout: 3000 } const COLORS = ['red', 'green', 'blue'] - 包括对象/数组（注意是const指向的引用不变，内容可修改）
3.2 let适用场景
- 循环计数器
javascript for (let i = 0; i < items.length; i++) {...} - 需要重新赋值的变量
javascript let loading = false function toggleLoad() { loading = !loading }
3.3 var的遗留场景
- 需要函数作用域的特殊情况
- 立即执行函数(IIFE)模式
javascript (function() { var private = '隐藏变量' })()
四、升级改造实践
4.1 迁移步骤
- 将当前作用域所有
var改为let - 确认哪些变量永远不会被重新赋值，改为
const - 使用ESLint规则（如
no-var）强制检查
4.2 常见误区
- 过度使用let：90%的变量其实应该用const
- const冻结误解：要真正冻结对象应使用
Object.freeze()
javascript const obj = Object.freeze({ prop: 'value' })
五、为什么这很重要？
- 代码可读性：const明确表达设计意图
- 减少bug：块作用域避免变量污染
- 优化内存：引擎更容易进行优化
- 现代标准：ES6+代码库的必备特性
"好的变量声明就像精确的GPS导航，能带领代码走向正确的目的地" —— 《JavaScript语言精粹》
未来随着ES模块的普及，var终将退出历史舞台。从现在开始培养const/let的肌肉记忆，你的代码质量会有质的飞跃。
