JavaScript对象解构中用冒号实现变量重命名,格式为源属性名:目标变量名,不改变原对象;可与默认值共存、用于嵌套结构,并解决命名冲突、统一语义及提升参数可读性。

在 JavaScript 对象解构中,为变量重新命名用冒号 : 实现,格式是 源属性名: 目标变量名。它不改变原对象,只影响解构后生成的变量名。
基础写法:用冒号指定新变量名
当对象属性名和你想要的变量名不一致时,直接在属性名后加冒号和新变量名:
-
const { username: name, email: contact } = user; → 把
user.username赋给变量name,user.email赋给contact - const { firstName: fName, lastName: lName } = person; → 常用于缩写或统一命名风格
配合默认值一起用
重命名和默认值可以共存,顺序自由,互不影响:
-
const { years: age = 25, isAdmin: isManager = false } = user; → 即使
user.years不存在,age也会是25 - 默认值只作用于目标变量,和原属性名无关;重命名也不影响默认值生效逻辑
嵌套对象里也能重命名
嵌套结构中,冒号可出现在任意层级的属性位置:
-
const { profile: { nickname: userName, avatar: imgUrl } } = data; → 从
data.profile.nickname提取并重命名为userName - 注意括号配对:外层花括号对应
data,内层对应profile,冒号始终在“被读取的属性名”之后
实际开发中的典型用途
重命名不是炫技,而是解决真实问题:
- 避免变量名冲突(比如已有
timeout变量,第三方配置也有timeout,就写成{ timeout: apiTimeout }) - 统一语义(
Chart.js的legend.position和ECharts的tooltip.trigger,可分别映射为legendPos、tooltipTrigger) - 让函数参数更自解释(
const { baseURL: apiBase, headers: apiHeaders } = config,后续传参一目了然)


















