JavaScript如何将一个对象的属性值复制替换到另一对象对应属性

问题复现 #

你当前的两个对象结构参考如下：

// 原对象
const deviceSpec = {
  cpu: { id: 13, brand: "Intel", model: "i3-12100" },
  gpu: { id: 2, brand: "Nvidia", model: "GTX 1660" },
  hdd: {},
  ram: {},
  mb: {}
}

// 提供新gpu属性的替换源对象
const replacement = {
  gpu: { id: 9, brand: "Nvidia", model: "RTX 3050" }
}

Object.assign()调用后属性未更新，绝大多数情况是传参顺序错误、未接收返回值，或是调用时指向了错误的对象层级。

实现方式 #

1. 直接属性赋值（最推荐，单属性替换场景最优） #

仅需要替换gpu单个一级属性时，直接赋值是逻辑最清晰、性能最好的方案，不需要调用额外方法：

deviceSpec.gpu = replacement.gpu

执行后原对象的gpu属性会直接替换为新对象，修改即时生效。

2. 正确调用Object.assign()实现替换 #

Object.assign的规则是：将后续所有源对象的自有可枚举属性，合并到第一个传入的目标对象上，最终返回合并后的目标对象。

• 直接修改原对象的写法：

Object.assign(deviceSpec, replacement)

• 不修改原对象、生成全新合并后对象的写法：

const updatedSpec = Object.assign({}, deviceSpec, replacement)

注意：Object.assign是浅合并，仅处理对象第一层属性，当前替换一级gpu属性的场景完全适用。如果需要修改gpu对象内部的部分子属性而非整体替换，才需要额外做深合并处理。

3. ES6展开运算符写法 #

支持ES6语法的环境下，可以用对象展开运算符实现更简洁的不可变更新（不修改原对象）：

const updatedSpec = {
  ...deviceSpec,
  gpu: replacement.gpu
}

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