JS合并两个对象|极客笔记

JS合并两个对象

在JavaScript中，合并两个对象是一种常见的操作，可以将两个对象的属性合并到一个新的对象中。这种操作在实际开发中经常用到，例如将一个默认配置对象与用户自定义配置对象合并，以便生成最终的配置对象。本文将详细介绍在JavaScript中如何合并两个对象。

1. 使用Object.assign()

JavaScript中有一个内置方法Object.assign()可以实现对象合并的功能。Object.assign()接受多个参数，第一个参数是目标对象，后面的参数是源对象，它会将源对象的属性合并到目标对象中，并返回目标对象。

const obj1 = { foo: 'bar' };
const obj2 = { baz: 'qux' };

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj);
// 输出: { foo: 'bar', baz: 'qux' }

在上面的示例中，我们先定义了两个对象obj1和obj2，然后使用Object.assign()方法将这两个对象合并到一个新的对象mergedObj中。最终mergedObj对象包含了obj1和obj2的所有属性。

需要注意的是，Object.assign()方法是浅拷贝的，如果源对象中有嵌套对象，合并后的结果仅包含嵌套对象的引用。如果需要深拷贝，可以使用其他方法，比如使用第三方库lodash中的_.merge()方法。

2. 使用展开运算符（Spread Operator）

除了Object.assign()方法，还可以使用ES6中的展开运算符（Spread Operator）来合并对象。展开运算符可以将对象展开为属性，从而方便地进行对象合并操作。

const obj1 = { foo: 'bar' };
const obj2 = { baz: 'qux' };

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

console.log(mergedObj);
// 输出: { foo: 'bar', baz: 'qux' }

上面的示例中，我们通过展开运算符{ ...obj1, ...obj2 }将两个对象obj1和obj2合并到一个新的对象mergedObj中。这种方式与Object.assign()方法类似，但代码更加简洁和易读。

需要注意的是，展开运算符是浅拷贝的，和Object.assign()方法一样。因此，如果需要深拷贝对象，也需要考虑使用其他方法。

3. 合并对象数组

除了合并两个对象，有时候我们也需要合并对象数组。可以使用Array.prototype.reduce()方法来实现这一目的。

const arr1 = [{ foo: 'bar' }, { baz: 'qux' }];
const arr2 = [{ abc: 'def' }, { ghi: 'jkl' }];

const mergedArr = [...arr1, ...arr2];

console.log(mergedArr);
// 输出: [{ foo: 'bar' }, { baz: 'qux' }, { abc: 'def' }, { ghi: 'jkl' }]

在上面的示例中，我们定义了两个对象数组arr1和arr2，然后通过展开运算符[...arr1, ...arr2]将这两个数组合并为一个新的数组mergedArr。最终mergedArr中包含了arr1和arr2的所有元素。

需要注意的是，合并对象数组时也是浅拷贝的，如果数组中的元素是对象，并且有嵌套对象，合并后的结果同样只包含嵌套对象的引用。