JS合并两个对象的几种方法

在JavaScript中合并对象是常见的编程任务，本文深入探讨了两种主流方法：展开语法（spread syntax）和`Object.assign()`。展开语法以其简洁性和不可变性优势，成为现代JS开发的首选，通过`{...obj1, ...obj2}`创建新对象，避免修改原始对象。`Object.assign()`则通过将源对象属性复制到目标对象来实现合并，适用于需要修改现有对象的场景。文章还详细解析了浅拷贝的特性，以及在合并嵌套对象时可能遇到的问题，并介绍了深拷贝的解决方案。此外，还讨论了属性冲突时的“后覆盖前”规则，以及合并多个对象的高效方法，帮助开发者在实际项目中灵活运用，避免踩坑。

在JavaScript中合并对象最推荐的方式是使用展开语法或Object.assign()方法，1. 展开语法通过{...obj1, ...obj2}创建新对象，不修改原对象，符合不可变性原则；2. Object.assign()通过Object.assign(target, source1, source2)将源对象属性复制到目标对象，若目标为空则实现合并，否则会修改目标对象；3. 两者均执行浅拷贝，嵌套对象仅复制引用，需手动递归或使用Lodash的merge实现深拷贝；4. 属性冲突时遵循“后覆盖前”规则，右侧对象属性优先；5. 合并多个对象时，两种方法均支持链式或参数列表方式，按顺序从左到右合并，后出现的属性值覆盖前面同名属性，最终返回合并后的对象。

在JavaScript里合并两个对象，最常见也是最推荐的方式，通常是利用展开语法（spread syntax）或者Object.assign()方法。这两种方式各有侧重，但都能高效地将多个对象的属性汇集到一起，形成一个新的对象，或者更新一个现有对象。

解决方案

说起JavaScript里对象合并，这事儿看似简单，但真要抠细节，还是有些门道的。我们最常用的，也是我个人觉得在现代JS开发中最舒服的方式，就是展开语法（spread syntax）。

想象一下，你有一堆零散的积木（对象的属性），你想把它们都放到一个新的盒子里。展开语法就是那个能帮你把积木从旧盒子里“倒”出来，再“铺”到新盒子里的工具。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// 使用展开语法合并
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

这种方式的优点在于它创建了一个全新的对象，原始对象不会被修改，这符合函数式编程中“不可变性”的理念，让代码更可预测，尤其是在状态管理中，这简直是福音。它就像是制作一份新的文件副本，而不是直接在原文件上涂改。

当然，还有个老牌选手，Object.assign()方法。它就像是一个工厂的工人，负责把源对象的属性复制到目标对象上。

const objA = { x: 10, y: 20 };
const objB = { z: 30 };

// 使用Object.assign()合并
const targetObj = {}; // 通常我们会提供一个空对象作为目标
Object.assign(targetObj, objA, objB);
console.log(targetObj); // { x: 10, y: 20, z: 30 }

// 也可以直接合并到现有对象上，但会修改它
const existingObj = { name: 'Alice' };
Object.assign(existingObj, { age: 30 });
console.log(existingObj); // { name: 'Alice', age: 30 }

Object.assign()的第一个参数是目标对象，后面的参数是源对象。它会将所有源对象的可枚举属性复制到目标对象上，并返回目标对象。要注意的是，如果第一个参数不是一个空对象，那么这个对象本身会被修改。在某些场景下，你可能就想原地修改一个对象，那Object.assign()就很合适。但如果你追求不可变性，记得传入一个空对象作为第一个参数。

这两种方法，无论是展开语法还是Object.assign()，它们都只执行浅拷贝。这意味着如果你的对象里嵌套了其他对象或数组，合并时只会复制它们的引用，而不是递归地复制它们的内容。这一点，我们待会儿可以展开聊聊，因为这常常是初学者踩坑的地方。

合并对象时，属性冲突如何解决？

这是个很实际的问题，毕竟不是每次合并都那么风平浪静，属性名一样的情况太常见了。当两个或多个对象在合并时拥有相同的属性名，JavaScript有一套清晰的规则来处理这种“冲突”，简单来说就是“后来者居上”。

无论是使用展开语法还是Object.assign()，它们的行为都是一致的：位于后面（或右侧）的对象的同名属性值，会覆盖前面（或左侧）对象的属性值。

我们来看个例子：

const userDefault = {
  name: 'Guest',
  role: 'viewer',
  permissions: ['read']
};

const userConfig = {
  name: 'John Doe',
  permissions: ['write', 'delete'],
  status: 'active'
};

// 使用展开语法
const finalUserSpread = { ...userDefault, ...userConfig };
console.log(finalUserSpread);
/*
{
  name: 'John Doe',     // userConfig 的 name 覆盖了 userDefault 的
  role: 'viewer',
  permissions: ['write', 'delete'], // userConfig 的 permissions 覆盖了 userDefault 的
  status: 'active'
}
*/

// 使用Object.assign()
const finalUserAssign = Object.assign({}, userDefault, userConfig);
console.log(finalUserAssign);
/*
{
  name: 'John Doe',     // userConfig 的 name 覆盖了 userDefault 的
  role: 'viewer',
  permissions: ['write', 'delete'], // userConfig 的 permissions 覆盖了 userDefault 的
  status: 'active'
}
*/

从这个例子可以看到，name和permissions属性都被userConfig中的值覆盖了。这很符合直觉，也常用于配置合并的场景：先定义一个默认配置，然后用用户提供的配置去覆盖或补充它。

这种“覆盖”机制在很多情况下都非常有用，比如当你需要合并一个基础配置对象和用户自定义的特定配置时。你只需要把默认值放在前面，把个性化设置放在后面，就能轻松实现配置的优先级管理。但同时也要注意，如果你希望合并的属性是某种“累加”而不是“覆盖”，比如两个数组属性，那这种默认的合并行为就帮不上忙了，你需要自己写额外的逻辑来处理。这正是“浅拷贝”特性带来的影响，我们接着聊。

深拷贝与浅拷贝：合并嵌套对象时需要注意什么？

前面提到，无论是展开语法...还是Object.assign()，它们都执行的是浅拷贝。这意味着什么呢？简单来说，它们只会复制对象的第一层属性。如果属性值是基本类型（字符串、数字、布尔值、null、undefined、Symbol、BigInt），那它们会被直接复制一份。但如果属性值是引用类型（对象、数组、函数），那么复制的将是这个引用本身的地址，而不是引用指向的实际内容。

这听起来有点抽象，我们直接看个例子来感受一下这个“坑”：

const userProfile = {
  id: 1,
  name: 'Jane',
  address: {
    street: '123 Main St',
    city: 'Anytown'
  },
  hobbies: ['reading', 'hiking']
};

const updates = {
  name: 'Jane Doe',
  address: {
    city: 'Newville' // 假设我们只更新城市
  },
  hobbies: ['coding'] // 假设我们想添加一个爱好
};

const mergedProfile = { ...userProfile, ...updates };
console.log(mergedProfile);
/*
{
  id: 1,
  name: 'Jane Doe',
  address: { city: 'Newville' }, // 注意：street 属性不见了！
  hobbies: ['coding'] // 注意：hiking 爱好不见了！
}
*/

// 更糟糕的是，如果更新的是引用类型内部的属性
const userProfile2 = {
  id: 2,
  name: 'Bob',
  settings: {
    theme: 'dark',
    notifications: {
      email: true,
      sms: false
    }
  }
};

const updates2 = {
  settings: {
    notifications: {
      sms: true // 试图只更新sms通知
    }
  }
};

const mergedProfile2 = { ...userProfile2, ...updates2 };
console.log(mergedProfile2);
/*
{
  id: 2,
  name: 'Bob',
  settings: {
    notifications: { sms: true } // 注意：theme 属性和 email 通知都不见了！
  }
}
*/

看到了吗？当updates对象中的address属性是一个新的对象时，它会完全替换掉userProfile中的address对象，而不是合并它们内部的属性。同样，hobbies数组也被整个替换了。在第二个例子里，settings和notifications也是如此。这种行为可能不是你想要的，你可能希望的是深度合并，即递归地合并嵌套对象和数组的属性。

要实现深拷贝合并，...和Object.assign()就无能为力了。你通常需要：

1. 手动递归合并： 编写一个函数，遍历对象的每一个属性。如果属性值是对象或数组，就递归调用自身进行合并。这需要一些代码量，但能完全控制合并逻辑。
2. 使用第三方库： 像Lodash这样的实用工具库提供了_.merge()或_.mergeWith()这样的方法，它们能够方便地进行深度合并，并且通常考虑了各种边缘情况。在实际项目中，这往往是更省心且健壮的选择。

所以，当你处理包含嵌套对象或数组的数据时，一定要先问自己：我需要的是浅拷贝还是深拷贝？如果答案是深拷贝，那么请记住，原生的...和Object.assign()并不是你的终极解决方案，它们只是起点。

合并多个对象，除了两个，还有哪些高效方法？

合并两个对象是基础，但在实际应用中，我们经常需要合并三个、四个甚至更多个对象。好消息是，我们前面提到的两种主要方法——展开语法和Object.assign()——都非常擅长处理这种情况，而且用法几乎一样直观。

先看展开语法：

const baseConfig = {
  port: 3000,
  env: 'development',
  logging: true
};

const devConfig = {
  env: 'development',
  debug: true,
  port: 8080 // 覆盖 baseConfig 的 port
};

const userOverrides = {
  logging: false, // 覆盖 baseConfig 的 logging
  debug: false // 覆盖 devConfig 的 debug
};

// 将所有对象按顺序展开，后面的对象会覆盖前面同名属性
const finalConfig = { ...baseConfig, ...devConfig, ...userOverrides };
console.log(finalConfig);
/*
{
  port: 8080,      // 被 devConfig 覆盖
  env: 'development',
  logging: false,  // 被 userOverrides 覆盖
  debug: false     // 被 userOverrides 覆盖
}
*/

这种链式的展开方式非常清晰，一眼就能看出合并的顺序和优先级。从左到右，后面的对象属性会覆盖前面的同名属性，这在处理多层配置或选项时非常方便。

接着是Object.assign()：

const baseSettings = { theme: 'light', font: 'sans-serif' };
const userSettings = { theme: 'dark' };
const adminSettings = { permissions: ['all'], font: 'monospace' };

// Object.assign(target, source1, source2, ..., sourceN)
// 第一个参数是目标对象，后续所有参数都是源对象
const combinedSettings = Object.assign({}, baseSettings, userSettings, adminSettings);
console.log(combinedSettings);
/*
{
  theme: 'dark',        // 被 userSettings 覆盖
  font: 'monospace',    // 被 adminSettings 覆盖
  permissions: ['all']
}
*/

Object.assign()同样支持传入任意数量的源对象。它会按照参数的顺序，依次将每个源对象的可枚举属性复制到目标对象上。因此，越靠后的源对象，其属性的优先级越高。

从效率上讲，对于大多数日常使用场景，这两种方法在合并少量到中等数量的对象时，性能差异微乎其微，你完全可以根据个人偏好和团队规范来选择。展开语法通常被认为是更现代、更简洁的写法，尤其是在需要创建新对象时。而Object.assign()在需要原地修改现有对象时，或者在旧版浏览器兼容性要求较高（虽然现在展开语法也基本普及了）的情况下，依然是可靠的选择。

总结一下，无论是合并两个还是多个对象，JavaScript都提供了简洁且高效的原生方法。关键在于理解它们的浅拷贝特性以及属性冲突的解决机制，这样才能在实际开发中避免不必要的“惊喜”。

今天关于《JS合并两个对象的几种方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！