如何使用JavaScript扩展语法合并对象并保留原有角色属性

先明确你的需求：要合并两个对象，其中嵌套的roles对象需要保留双方的所有属性，顶层的assign属性则保留原对象的值。先把涉及的对象和期望结果明确出来：

原始对象：

var inv = {roles: {"xxx00": {roleId: "zzzz33"}}, assign: [1, 2, 3] }

待合并的结果对象：

var result = { roles: { "1234": {roleId: null}, "5678": {roleId: null}}}

期望的最终合并结果：

{
  roles: {"1234": {roleId: null}, "5678": {roleId: null}, "xxx00": {roleId: "zzzz33"}},
  assign: [1, 2, 3]
}

具体实现代码 #

JavaScript的扩展语法（...）对顶层属性是直接覆盖逻辑，嵌套对象需要单独处理，所以我们要针对性地合并roles：

var inv = {roles: {"xxx00": {roleId: "zzzz33"}}, assign: [1, 2, 3] };
var result = { roles: { "1234": {roleId: null}, "5678": {roleId: null}}};

// 执行合并操作
const mergedObj = {
  // 先展开原对象inv的所有顶层属性，assign数组会直接保留
  ...inv,
  // 重写roles属性：合并result和inv的roles对象
  roles: {
    // 先展开result的roles属性
    ...result.roles,
    // 再展开inv的roles属性，无重复键时会合并所有属性；有重复键时，inv的属性会覆盖result的
    ...inv.roles
  }
};

console.log(mergedObj);

代码逻辑说明 #

• 用...inv展开原对象的顶层属性，确保assign数组被完整保留。
• 单独处理嵌套的roles：通过嵌套的扩展语法，先整合result.roles的所有键值对，再加入inv.roles的内容，这样两个对象的roles属性会被完整合并，不会出现丢失。
• 如果未来两个roles出现重复键名，inv.roles的属性会覆盖result.roles的对应项，这也符合保留原对象属性的需求。

内容的提问来源于stack exchange，提问作者Leonardo Uribe