JS合并对象的5种方法有哪些

JS合并对象是JavaScript开发中的常见任务，涉及将多个对象的属性整合到一个新对象或更新现有对象。核心方法包括`Object.assign()`、展开语法以及手动递归实现的深合并。`Object.assign()`和展开语法属于浅合并，仅复制第一层属性，嵌套对象共享引用。深合并则递归复制所有层级，确保数据独立性，适用于配置覆盖、状态管理等场景。选择合并方法需考虑属性覆盖顺序、是否修改原对象以及性能影响，尤其深合并的复杂性和开销较大。本文将深入探讨这几种方法的原理、使用场景和注意事项，助你实现安全高效的数据整合，提升代码质量和性能。

JavaScript中合并对象的核心方法有Object.assign()、展开语法和手动递归实现深合并，其中Object.assign()和展开语法均为浅合并，只复制对象第一层属性，嵌套对象仍共享引用，而深合并需递归复制所有层级以确保数据独立性，常用于配置覆盖、状态管理等场景，需注意属性覆盖顺序、是否修改原对象及性能影响，特别是深合并的复杂性和开销较大，应根据实际需求选择合适方案，最终目的是实现安全、高效的数据整合。

在JavaScript中，合并对象这事儿，说白了就是把多个对象的属性“攒”到一个新对象里，或者更新现有对象。核心目的通常是为了整合数据、配置或者状态，同时很多时候也得考虑是不是要动到原始数据，以及数据层级的问题。

解决方案

JS合并对象，最常用的方式无非就那么几种，各有各的脾性：

1. Object.assign() 这是ES6引入的一个方法，非常直接。它接受一个目标对象和任意数量的源对象，然后把源对象的所有可枚举自有属性复制到目标对象。注意，它会修改并返回目标对象。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = Object.assign({}, obj1, obj2); // 合并到一个新对象
// mergedObj 现在是 { a: 1, b: 3, c: 4 }
// obj1 和 obj2 保持不变

// 也可以直接修改现有对象
const targetObj = { x: 10 };
Object.assign(targetObj, obj1);
// targetObj 现在是 { x: 10, a: 1, b: 2 }

这里有个细节，如果属性名冲突，后面的源对象的属性会覆盖前面的。

2. 展开语法（Spread Syntax ...） ES2018（或者说ES9）引入的对象展开语法，让合并对象变得异常简洁和优雅。它本质上是创建了一个新的对象，然后把源对象的可枚举属性“铺平”到这个新对象里。

const objA = { name: 'Alice', age: 30 };
const objB = { age: 31, city: 'New York' };
const combinedObj = { ...objA, ...objB };
// combinedObj 现在是 { name: 'Alice', age: 31, city: 'New York' }
// objA 和 objB 保持不变

和Object.assign({}, ...)效果类似，但语法上更直观。它也遵循“后来的覆盖先前的”规则。

3. 手动遍历（适用于特定场景，尤其是深合并） 虽然不常用，但在需要高度定制化合并逻辑，或者实现深合并时，手动遍历对象的属性是绕不开的。

function mergeDeep(target, ...sources) {
  if (sources.length === 0) return target;
  const source = sources.shift();

  if (typeof target !== 'object' || target === null) {
    target = {}; // 如果目标不是对象，就初始化一个空对象
  }

  if (typeof source === 'object' && source !== null) {
    for (const key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
          if (!target.hasOwnProperty(key) || typeof target[key] !== 'object' || target[key] === null) {
            target[key] = {}; // 如果目标没有这个key或者不是对象，就初始化一个空对象
          }
          mergeDeep(target[key], source[key]); // 递归合并
        } else {
          target[key] = source[key]; // 直接赋值
        }
      }
    }
  }
  return mergeDeep(target, ...sources); // 处理下一个源对象
}

const config1 = {
  db: { host: 'localhost', port: 27017 },
  app: { name: 'MyApp' }
};
const config2 = {
  db: { port: 27018, user: 'admin' },
  app: { version: '1.0' }
};
const finalConfig = mergeDeep({}, config1, config2);
/*
finalConfig 现在是:
{
  db: { host: 'localhost', port: 27018, user: 'admin' },
  app: { name: 'MyApp', version: '1.0' }
}
*/

这种方式复杂很多，但提供了最大的灵活性来处理嵌套对象和数组等复杂数据结构。

为什么需要合并对象？这不仅仅是简单的“加起来”

合并对象在日常开发中简直是家常便饭，它远不止是把属性简单地堆砌起来。对我来说，它更多的是一种数据策略的体现，尤其是在处理配置、状态管理和数据整合时。

想想看，当你在开发一个应用，通常会有一些默认配置，用户可能又会提供自己的偏好设置。这时候，你就需要把用户设置“合并”到默认配置上，用户设置覆盖默认设置中冲突的部分，同时保留默认设置中用户未指定的部分。这种“合并”就不是简单的加法，而是一种智能的融合。

在前端框架里，比如React或Vue的状态管理，当你更新一部分状态时，你通常不会直接修改原始状态对象，而是创建一个新的状态对象，把旧状态和新的更改合并起来。这不仅是为了保持数据的不可变性（Immutable Data），避免难以追踪的副作用，也是为了让框架能更高效地检测到状态变化并进行渲染更新。如果直接修改原对象，框架可能就“懵”了，不知道哪里变了。

还有，从多个API接口获取数据，这些数据可能分散在不同的对象里，但逻辑上它们属于同一个实体。这时候，就需要把这些零散的数据合并成一个完整、统一的对象，方便后续处理和展示。这背后是对数据完整性和结构化的追求。所以，合并对象不仅仅是语法操作，它承载了更深层次的架构思考和数据管理哲学。

浅合并与深合并：你真的理解它们的区别吗？

这是合并对象时最容易让人“踩坑”的地方，也是区分一个开发者对数据理解深浅的关键点。说白了，Object.assign() 和展开语法 ...，它们都只执行“浅合并”。

什么是浅合并？ 想象一下，你有一本书，里面记录了你朋友的联系方式。浅合并就像是你把这本书的封面和书名复制了一份，但书里面的内容（比如朋友的详细地址和电话）并没有被“复制”成新的，而是指向了原来的那一页。

具体到代码，如果你的对象里包含嵌套的对象或数组，浅合并只会复制这些嵌套对象的“引用”（内存地址），而不是它们本身。这意味着，如果你通过合并后的新对象去修改这个嵌套对象，原始对象里的那个嵌套对象也会跟着被修改，因为它们指向的是同一块内存区域。

const userProfile = {
  id: 1,
  info: {
    name: 'Jane Doe',
    email: 'jane@example.com'
  }
};

// 使用展开语法进行浅合并
const updatedProfile = { ...userProfile };

updatedProfile.info.email = 'new_jane@example.com'; // 修改合并后的对象里的嵌套属性

console.log(userProfile.info.email); // 糟糕！原始对象的email也被改成了 'new_jane@example.com'

这就是浅合并的“陷阱”。对于简单的、只有一层属性的对象，这完全没问题。但一旦涉及到嵌套结构，就得小心了。

那深合并又是什么？ 深合并，顾名思义，就是会递归地复制所有嵌套的属性，直到所有原始值（非对象、非数组）都被复制。就像是你不仅复制了书的封面，还把书里每一页的内容都重新抄写了一遍，形成了一本全新的、完全独立于原书的副本。

JavaScript原生并没有提供深合并的方法。所以，如果你需要深合并，通常需要自己编写一个递归函数（就像上面解决方案里展示的那样），或者借助成熟的第三方库，比如Lodash的_.merge或_.cloneDeep。实现一个健壮的深合并函数并不简单，它需要处理各种数据类型（对象、数组、null、undefined），以及循环引用等复杂情况。但当你需要确保数据源的完全独立性时，深合并是不可或缺的。

合并对象时的常见陷阱与性能考量

在合并对象的实践中，除了深浅合并的区别，还有一些细节和性能上的考量值得注意，这些往往是决定代码健壮性和效率的关键。

1. 属性覆盖的优先级 无论是Object.assign()还是展开语法...，它们在处理重复属性时，都遵循一个简单的规则：后面的源对象的属性会覆盖前面同名属性的值。这个规则看似简单，但在复杂的合并逻辑中，如果源对象的顺序没搞对，很容易出现意料之外的结果。

const defaults = { color: 'red', size: 'medium' };
const userSettings = { size: 'large', type: 'bold' };
const finalConfig = { ...defaults, ...userSettings };
// finalConfig 是 { color: 'red', size: 'large', type: 'bold' }
// 如果写成 { ...userSettings, ...defaults } 结果就会不同

所以，在合并配置或选项时，务必明确哪个对象是“基准”，哪个是“覆盖层”。

2. 对原始对象的修改（Mutation）Object.assign()的第一个参数是目标对象。如果你直接传入一个现有对象作为目标，那么这个对象就会被修改。

const originalOptions = { timeout: 1000, retry: 3 };
const newOptions = { timeout: 2000 };
Object.assign(originalOptions, newOptions);
console.log(originalOptions); // { timeout: 2000, retry: 3 } - originalOptions 被修改了

这种行为在某些场景下是期望的，比如更新一个组件的内部状态。但如果你的意图是创建一个全新的对象而不影响原始数据，那么就应该传入一个空对象作为目标，例如 Object.assign({}, source1, source2)，或者直接使用展开语法 ({...source1, ...source2})，因为它们总是返回一个新对象。

3. 性能考量 对于大多数日常应用，合并几个甚至几十个对象，Object.assign()和展开语法的性能差异几乎可以忽略不计。现代JavaScript引擎对这些操作都做了高度优化。

然而，当涉及到非常大的对象（比如包含成千上万个属性），或者需要进行频繁的深合并时，性能就可能成为一个瓶颈。深合并由于需要递归遍历所有嵌套结构并创建新的对象，其计算开销远大于浅合并。在这些极端情况下，你可能需要考虑：

• 是否真的需要深合并？ 有时，浅合并配合一些不可变数据结构的库（如Immer.js）可以达到类似的效果，且性能更优。
• 优化深合并算法： 如果必须手动实现，确保你的深合并函数尽可能高效，避免不必要的复制。
• 数据结构设计： 重新审视数据结构，看是否可以通过扁平化或者其他方式减少嵌套深度。

最后，值得一提的是，null或undefined作为源对象时，它们会被跳过，不会抛出错误。这算是JavaScript的容错性，但也意味着你不能指望它们来清空某个属性。合并对象，看似简单，实则处处是学问，理解其背后的机制，才能写出更健壮、更高效的代码。

文中关于对象合并,Object.assign(),浅合并,深合并,展开语法的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS合并对象的5种方法有哪些》文章吧，也可关注golang学习网公众号了解相关技术文章。