JavaScript 变量声明最佳实践

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

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

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

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

1. 最大的误区:const 并不代表"值不能变"

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

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

代码演示:

javascript 复制代码
// ✅ 基础类型:彻底锁死
const score = 100;
score = 101; // ❌ 报错:Assignment to constant variable.

// ⚠️ 引用类型:锁地址,不锁内容
const user = { 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

javascript 复制代码
// Vue 3 常见写法
const count = ref(0);
const state = reactive({ list: [] });
  • 为什么 refconst

  • 因为 ref 返回的是一个对象(RefImpl)。

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

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

  • 为什么 reactiveconst

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

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


3. 什么时候 const 会出问题?(必须用 let 的场景)

只有当你明确需要**"重新赋值"**(Reassign)的时候,const 才会报错,这时你需要换成 let

场景 A:基本类型的累加/切换
javascript 复制代码
// ❌ 错误
const isShow = false;
isShow = true; // 报错

// ✅ 正确
let isShow = false;
isShow = true;
场景 B:for 循环的索引
javascript 复制代码
// ❌ 错误
for (const i = 0; i < 5; i++) { 
    // i++ 试图修改 i,导致报错
}

// ✅ 正确
for (let i = 0; i < 5; i++) { ... }

// ✅ 特例:for...of 是可以的
// 因为每次循环都会创建一个新的 const 作用域,而不是修改同一个变量
for (const item of list) { ... } 

4. 总结:黄金法则

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

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

相关推荐
QQ1__8115175154 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态4 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子4 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室4 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI4 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing4 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者4 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册4 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李4 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢5 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web