JS中不能直接用解构赋值合并同名变量,因解构仅提取值;可通过解构配合展开运算符或Object.assign实现浅合并,深层合并需专用工具函数。

JS 中不能直接用解构赋值“合并”同名变量,因为解构是**提取值**,不是合并对象。但你可以通过解构配合展开运算符(...)或 Object.assign() 等方式,实现类似“合并同名属性并覆盖/保留”的效果。
用解构 + 展开运算符合并对象(推荐)
这是最常用、语义最清晰的方式:先解构出需要的字段,再用展开运算符拼接新对象。
- 后一个对象的同名属性会覆盖前一个(浅合并)
- 适合从多个来源提取并组合配置、参数等
const defaults = { theme: 'light', fontSize: 14, lang: 'zh' };
const userPrefs = { theme: 'dark', notifications: true };
// 解构出部分默认值,再合并
const { theme, fontSize } = defaults;
const merged = { theme, fontSize, ...userPrefs };
// → { theme: 'dark', fontSize: 14, notifications: true }
解构时用别名避免冲突,再手动合并
当两个对象有同名字段,又都想保留时,解构时可用别名区分,再按需组合:
const a = { id: 1, name: 'Alice', role: 'user' };
const b = { id: 1, name: 'Bob', level: 5 };
const { id: idA, name: nameA, role } = a;
const { id: idB, name: nameB, level } = b;
const combined = { idA, idB, nameA, nameB, role, level };
// → { idA: 1, idB: 1, nameA: 'Alice', nameB: 'Bob', role: 'user', level: 5 }
深层合并?解构不适用,换工具函数
解构和展开都只做浅层操作。如果要真正合并嵌套对象(如 user.profile.name 和 user.settings.theme),解构无法自动递归处理:
- 不要试图用多层解构“模拟”深合并——代码难读且不可靠
- 改用
structuredClone+ 递归合并函数,或使用 Lodash 的merge - 现代写法示例(浅层够用就别过度设计)
// ✅ 简单场景:用展开足够
const base = { user: { name: 'Tom' }, features: ['a'] };
const patch = { user: { active: true }, features: ['b'] };
const result = { ...base, ...patch };
// → { user: { active: true }, features: ['b'] } —— user 被整个替换了
// ❌ 解构无法让 result.user 变成 { name: 'Tom', active: true }
注意:解构本身不修改原对象,也不“合并变量”
常见误解:“用解构把两个 let 变量合并成一个”。实际上:
- 解构只是读取语法糖,不创建合并逻辑
- 变量名相同不会自动叠加,JS 不允许重复声明(
let x, x报错) - 真要“合并变量值”,本质是合并它们指向的数据(对象/数组),而非变量本身


















