JavaScript 变量声明最佳实践

使用const 作为变量赋值，这是一个非常好的习惯！在现代前端开发（尤其是 Vue/React 项目）中，“默认使用const，只有必须修改时才用let”是公认的最佳实践。

不仅没有问题，反而是在遵循行业标准。

不过，作为一个开发者，我们需要深入理解const到底锁住了什么，否则在处理**对象（Object）和数组（Array）**时可能会产生误解。

以下是关于const你必须知道的几个核心点：

1. 最大的误区：const并不代表“值不能变”

很多初学者认为const定义的东西就是“常量”，永远不能改。这是不准确的。

• 对于基础类型（String, Number, Boolean）：是的，你不能修改它的值。
• 对于引用类型（Object, Array）：const锁住的只是内存地址（引用），而不是里面的内容。

代码演示：

// ✅ 基础类型：彻底锁死constscore=100;score=101;// ❌ 报错：Assignment to constant variable.// ⚠️ 引用类型：锁地址，不锁内容constuser={name:"Ming",age:18};// ✅ 这样是允许的！(修改内容)user.age=19;console.log(user.age);// 19// ✅ 这样也是允许的！(新增属性)user.gender="male";// ❌ 这样是禁止的！(修改地址/重新赋值)user={name:"Jack"};// 报错

比喻：
const就像是你给了变量一个房子的地址。

• 你不能把这个变量指向另一个房子（重新赋值）。
• 但是你可以随意装修这个房子里的家具（修改属性）。

2. Vue 3 中的const

在你之前的 Vue 代码中，你可能会疑惑：为什么响应式数据要用const？

// Vue 3 常见写法constcount=ref(0);conststate=reactive({list:[]});

• 为什么ref用const？

• 因为ref返回的是一个对象（RefImpl）。

• 我们修改的是count.value = 1（修改房子里的家具）。

• 我们永远不会写count = ref(1)（换房子），这样会丢失响应性。

• 为什么reactive用const？

• 同理，reactive返回的是一个 Proxy 对象。我们只修改里面的属性，不修改对象本身。

结论：在 Vue 3 中，95% 的响应式变量定义都应该用const。

3. 什么时候const会出问题？（必须用let的场景）

只有当你明确需要**“重新赋值”**（Reassign）的时候，const才会报错，这时你需要换成let。

场景 A：基本类型的累加/切换

// ❌ 错误constisShow=false;isShow=true;// 报错// ✅ 正确letisShow=false;isShow=true;

场景 B：for 循环的索引

// ❌ 错误for(consti=0;i<5;i++){// i++ 试图修改 i，导致报错}// ✅ 正确for(leti=0;i<5;i++){...}// ✅ 特例：for...of 是可以的// 因为每次循环都会创建一个新的 const 作用域，而不是修改同一个变量for(constitemoflist){...}

4. 总结：黄金法则

1. **首选const**：默认所有变量都用const。这能告诉阅读代码的人：“这个变量的引用不会变”，代码可读性更强，也更安全。
2. **次选let**：如果你写代码时发现报错说Assignment to constant variable，或者你明确知道这个变量稍后会被x = y这样重新赋值，再把它改成let。
3. **永不用var**：把它扫进历史的垃圾堆。var有变量提升（Hoisting）和作用域泄露的问题，是 bug 之源。

一句话：只要记住const对象是可以改属性的就行。