如何在JavaScript中仅将对象的变更字段更新至原对象？

假设我们有原对象：

const obj1 = {
  id: 123,
  name: "ABC test",
  desc: "SPme test sdesctiption",
  data: [{name:"data1"}],
  createdBy: "Some person",
  updatedBy: "Some persone22"
};

客户端编辑后得到更新对象（仅name字段变更）：

const updatedObj = {
  id: 123,
  name: "ABC12222222 test", // 已修改
  desc: "SPme test sdesctiption",
  data: [{name:"data1"}],
  createdBy: "Some person",
  updatedBy: "Some persone22"
};

问题分析 #

你之前使用Object.assign(obj1, {updatedObj})导致错误，是因为{updatedObj}会创建一个以updatedObj为键的嵌套对象，而非直接合并字段。下面提供几种正确的实现方式：

方法1：正确使用Object.assign #

Object.assign会将后续对象的字段合并到第一个参数中，若要保留原对象不变，可先传入空对象作为初始值：

// 生成新对象，不修改原obj1
const newObj = Object.assign({}, obj1, updatedObj);

// 直接修改原obj1（如果允许）
// Object.assign(obj1, updatedObj);

方法2：使用ES6展开运算符（更简洁） #

展开运算符可以快速合并对象，同样支持保留原对象或直接修改：

// 生成新对象
const newObj = {...obj1, ...updatedObj};

方法3：仅更新原对象存在的字段（避免新增属性） #

如果客户端可能传入原对象没有的额外字段，可先过滤出原对象已有的键再合并：

const newObj = {...obj1};
// 遍历更新对象，仅复制原对象存在的字段
for (const key in updatedObj) {
  if (obj1.hasOwnProperty(key)) {
    newObj[key] = updatedObj[key];
  }
}

或者用reduce实现更简洁的版本：

const newObj = Object.keys(updatedObj).reduce((result, key) => {
  if (obj1.hasOwnProperty(key)) {
    result[key] = updatedObj[key];
  }
  return result;
}, {...obj1});

注意事项 #

以上方法均为浅拷贝：如果对象包含嵌套引用类型（如示例中的data数组），若updatedObj未修改该字段，新对象会与原对象共享引用。如果需要处理深层对象的变更，需编写递归深拷贝逻辑，或使用成熟的深拷贝工具函数。

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