JavaScript合并对象的4种常用方式

还在为JavaScript对象合并而烦恼吗？本文为你总结了JS合并对象的四种常用方法，并深入剖析其优缺点，助你选择最佳方案！**Object.assign()**和扩展运算符(...)语法简洁，能快速实现浅拷贝，但同名属性会直接覆盖。手动遍历复制则提供高度灵活性，可控制复制属性，但需注意深拷贝的实现。**Lodash**等第三方库功能强大，提供深拷贝和自定义策略，但会增加项目依赖。文章还探讨了属性冲突的处理、浅拷贝与深拷贝的区别，并提供实际案例，让你轻松掌握JS对象合并技巧，写出更高效、更安全的代码！

合并两个JavaScript对象的方法有四种，各有优劣。1. Object.assign()是ES6方法，浅拷贝，同名属性源对象覆盖目标对象；2. 扩展运算符(...)语法更简洁，同样是浅拷贝，同名属性后面对象覆盖前面；3. 手动遍历复制灵活性高，可控制复制属性，需递归实现深拷贝；4. 第三方库如Lodash提供深拷贝和自定义策略，功能强大但增加依赖。处理属性冲突时，若需覆盖用前两种方法，复杂策略则选后两种。浅拷贝复制引用，修改嵌套属性影响原对象，深拷贝创建新对象隔离状态，用于如React中state更新。其他方法如JSON.parse(JSON.stringify(obj))可深拷贝但丢失函数和Symbol属性。选择方案应根据具体需求权衡优缺点。

合并两个JavaScript对象，简单来说就是把一个对象的属性和值复制到另一个对象上。方法有很多，但目标只有一个：更高效、更安全地完成任务。

解决方案

合并对象，最常用的方法大概有四种，各有优劣，具体用哪个，还得看你的场景。

1. Object.assign()

这是ES6引入的，用起来最简单粗暴。直接把源对象的所有可枚举属性复制到目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }

注意，Object.assign()是浅拷贝。如果属性值是对象，只会复制引用，而不是创建一个新的对象。而且，如果目标对象和源对象有同名属性，源对象的属性会覆盖目标对象的属性。

2. 扩展运算符 (...)

这也是ES6引入的，语法更简洁，也更常用。

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

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 4, c: 5 }

扩展运算符也是浅拷贝，和Object.assign()一样，同名属性后面的对象会覆盖前面的对象。

3. 手动遍历复制

如果需要更精细的控制，比如只想复制某些属性，或者需要进行深拷贝，那就得手动遍历对象属性，一个一个复制。

function mergeObjects(target, source) {
  for (let key in source) {
    if (source.hasOwnProperty(key)) { // 确保只复制自身的属性
      target[key] = source[key];
    }
  }
  return target;
}

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

const mergedObj = mergeObjects(obj1, obj2);

console.log(mergedObj); // { a: 1, b: 4, c: 5 }

这种方法灵活性最高，但代码也最繁琐。如果需要深拷贝，还需要递归处理。

4. 使用第三方库（例如 Lodash）

Lodash 提供了 _.merge() 和 _.assign() 等方法，可以更方便地进行深拷贝和自定义合并策略。

const _ = require('lodash');

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

const mergedObj = _.merge({}, obj1, obj2); // 深拷贝

console.log(mergedObj); // { a: 1, b: { c: 2, d: 3 }, e: 4 }

第三方库的优势在于功能强大，经过充分测试，但引入额外的依赖会增加项目体积。

如何处理合并时出现的属性冲突？

属性冲突的处理方式取决于你的需求。如果你希望后面的对象覆盖前面的对象，那么Object.assign()和扩展运算符就足够了。如果需要更复杂的冲突解决策略，比如合并数组、保留原始值等，那么就需要手动遍历或者使用 Lodash 这样的库。

一个实际的例子：假设你要合并两个配置对象，后面的配置对象优先级更高，可以覆盖前面的配置。

const defaultConfig = {
  theme: 'light',
  language: 'en',
  features: ['a', 'b']
};

const userConfig = {
  theme: 'dark',
  features: ['c', 'd']
};

const mergedConfig = { ...defaultConfig, ...userConfig };

console.log(mergedConfig); // { theme: 'dark', language: 'en', features: [ 'c', 'd' ] }

浅拷贝和深拷贝的区别是什么？什么时候需要深拷贝？

浅拷贝只复制对象的引用，而深拷贝会创建一个新的对象，并将原始对象的所有属性和值复制到新对象中。

如果对象包含嵌套的对象或数组，浅拷贝可能会导致问题。修改浅拷贝后的对象的嵌套属性，会影响到原始对象。

深拷贝的例子：

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = _.cloneDeep(obj1); // 使用 Lodash 进行深拷贝

obj2.b.c = 3;

console.log(obj1); // { a: 1, b: { c: 2 } }
console.log(obj2); // { a: 1, b: { c: 3 } }

深拷贝通常用于需要隔离对象状态的场景，比如在 React 中更新 state 时，为了避免直接修改 state，通常需要深拷贝一份 state 对象。

除了上述方法，还有没有其他合并对象的方式？

除了上面提到的四种方式，还有一些不太常用的方法，比如使用 JSON.parse(JSON.stringify(obj)) 进行深拷贝，但这会丢失函数和 Symbol 类型的属性。

另外，一些库也提供了自定义的合并方法，可以根据具体需求选择。重要的是理解各种方法的优缺点，并根据实际情况选择最合适的方案。

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