解构无法直接替换键名,但可通过解构重命名+对象重构实现快速键名映射:如{ name: username, age: years } = obj后构造{ username, years },支持数组map批量处理及嵌套结构提取,本质是生成新对象而非原地修改。

不能直接用变量解构实现“键名替换”——解构是取值,不是改键。但可以结合解构 + 重构对象的方式,一行内完成新结构赋值,避开显式中间变量,达到“快速替换”的效果。
解构本身不改键,但能帮你跳过临时变量
比如原对象 { name: 'Alice', age: 30 },想变成 { username: 'Alice', years: 30 }:
你不需要先写 const tempName = obj.name,再拼新对象。而是直接解构重命名 + 立即组装:
-
const { name: username, age: years } = obj;→ 解构出重命名后的变量 -
const newUser = { username, years };→ 利用属性简写立刻生成新对象
合起来就是:const { name: username, age: years } = obj; const newUser = { username, years };
更紧凑写法(单行表达式):const newUser = (({ name: username, age: years }) => ({ username, years }))(obj);
对数组中多个对象批量处理,用 map + 解构
面对数组如 [{name:'Tom',work:'FE'}],想统一把 name→username、work→role:
- 不用
forEach+delete+ 赋值的三步操作 - 直接用
map配合解构重命名:data.map(({ name: username, work: role }) => ({ username, role }))
返回的是全新数组,原对象不变,无副作用,也不产生中间变量。
嵌套结构也能一次解构到位
若对象带层级,如 { user: { fullName: 'Bob', info: { level: 5 } } },要转成 { name: 'Bob', rank: 5 }:
- 嵌套解构一步提取:
const { user: { fullName: name, info: { level: rank } } } = obj; - 再组合:
const result = { name, rank };
整个过程没有创建 user、info 这类中间变量,只保留最终需要的字段和名称。
注意边界:这不是“原地修改”,而是“新建结构”
解构重构本质是生成新对象,适合函数式、不可变数据场景(Vue 3 响应式、Nuxt 数据预处理等):
- 优点:安全、可预测、易测试、兼容
const - 缺点:不适用于必须复用原引用的场合(如某些 DOM 绑定或第三方库要求原对象)
- 若需原地改键,仍得用
delete+ 赋值 或Object.defineProperty










