如何在JavaScript中使用ES6语法合并对象

在JavaScript项目里，把多个对象的数据拼到一起是很常见的需求。ES6之后，我们不需要再手写循环去复制属性，语言层面给出了更直观的方案。下面先了解具体写法。

使用扩展运算符合并对象

扩展运算符是三个点（...），它可以把对象自身的可枚举属性展开到新对象中。后面的属性会覆盖前面的同名属性。

// 使用扩展运算符合并对象
const base = { name: 'Tom', age: 20 };
const extra = { age: 25, city: 'Beijing' };

// 合并，extra 中的 age 会覆盖 base 中的 age
const merged = { ...base, ...extra };
console.log(merged); // { name: 'Tom', age: 25, city: 'Beijing' }

使用 Object.assign 合并对象

Object.assign 是 ES6 提供的静态方法，它把源对象的可枚举属性复制到目标对象，并返回目标对象。第一个参数是目标对象，后面是可变数量的源对象。

// 使用 Object.assign 合并对象
const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 };

// 把 a 和 b 合并到空对象中
const result = Object.assign({}, a, b);
console.log(result); // { x: 1, y: 3, z: 4 }

两种方式的区别

• 扩展运算符写法更简洁，且不会产生对目标对象的引用修改。
• Object.assign 的第一个参数会被直接修改，如果传入已有对象要小心副作用。
• 两者都是浅拷贝，嵌套对象仍然共享引用。

注意浅拷贝问题

无论是扩展运算符还是 Object.assign，都只复制第一层属性。如果属性值是对象，复制的是引用地址。

const obj1 = { info: { a: 1 } };
const obj2 = { info: { b: 2 } };
const mix = { ...obj1, ...obj2 };
// mix.info 是 obj2.info 的引用
mix.info.b = 99;
console.log(obj2.info.b); // 99，原对象被影响

如何做深合并

如果项目中需要深层合并，可以使用 JSON 序列化方式（有局限）或引入工具库。简单示例如下：

// 简单的深合并示例（仅适合纯 JSON 结构）
function deepMerge(target, source) {
  const out = { ...target };
  for (const key in source) {
    if (
      source[key] &&
      typeof source[key] === 'object' &&
      !Array.isArray(source[key])
    ) {
      out[key] = deepMerge(target[key] || {}, source[key]);
    } else {
      out[key] = source[key];
    }
  }
  return out;
}

const o1 = { user: { name: 'A', age: 1 } };
const o2 = { user: { age: 2, sex: 'M' } };
console.log(deepMerge(o1, o2));
// { user: { name: 'A', age: 2, sex: 'M' } }

总结

在 JavaScript 中使用 ES6 语法合并对象，扩展运算符和 Object.assign 是最直接的工具。日常合并扁平数据用它们就够了，遇到嵌套结构要注意浅拷贝陷阱，必要时自己写递归或借助成熟库来完成深合并。

JavaScriptES6对象合并修改时间：2026-07-30 23:45:26