对象合并是在前端开发中非常常见的操作，它将两个或多个对象合并成一个新的对象，并保留原始对象的属性和值。在 JavaScript 中，我们可以使用一些内置函数来实现对象合并，其中 Object.assign 方法是一种非常常见的用于对象合并的方法。
Object.assign 方法
Object.assign 方法可以将多个源对象合并为一个目标对象，并返回合并后的目标对象。该方法有两个参数。第一个参数为目标对象，即合并后的新对象。第二个参数及其后面的参数是源对象，可以任意多个。若目标对象与源对象有相同的属性，则后面的对象会覆盖前面的对象。
示例代码：
const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const obj3 = Object.assign({}, obj1, obj2); console.log(obj3); // { a: 1, b: 3, c: 4 }
在上面的示例代码中，Object.assign 的第一个参数是一个空对象 {}，作为目标对象，后面的 obj1 和 obj2 作为源对象，将它们合并到目标对象中，生成一个新的对象 obj3，其中属性 b 取了后面的 obj2 中的值 3。
深度合并对象
当源对象中含有复杂类型的属性时（如对象或数组），浅层合并方式可能会出现一些问题。此时我们需要使用深层合并方式，以保证源对象中的复杂类型属性得到正确处理并合并到目标对象中。
可以借助其他开源库来实现深层合并，比如 lodash 库中的 merge 方法。不过也可以使用递归来手动实现深度合并。
示例代码：
-- -------------------- ---- ------- -------- ------------------ ----------- - ---------------------- -- - ------------------------------- -- - ----- ----------- - ------------ ----- ----------- - ------------ -- ------- ----------- --- --------- - ----------- - -------------------------- - -- - --- ----------------------- ------------- - ---- - ----------- - ------------ - --- --- ------ ------- - ----- ------ - - -- - -- -- -- --- - -- - --- -- -- ----- ------ - - -- - -- -- -- --- - -- - --- -- -- -------------------------- ------- ---------展开代码
在上面的示例代码中，我们手动实现了深度合并对象的函数 deepAssign，该函数接收一个目标对象和多个源对象，将源对象中的属性合并到目标对象中。如果源对象中的属性是复杂类型，即对象或数组时，我们需要递归调用 deepAssign 函数进行深度合并。
运行该示例代码，输出结果为：
{ a: { b: 4, c: [5, { d: 3, e: 6 }], }, }
这里我们使用了嵌套对象和数组进行了深度合并。
总结
本篇文章介绍了 JavaScript 中的对象合并机制及其常见用法。Object.assign 方法是一种常见的用于对象合并的方法，它可以将多个源对象合并为一个目标对象。当源对象中包含复杂类型的属性时，我们需要使用深度合并方式，以保证源对象中的属性得到正确处理并合并到目标对象中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a938cc48841e989457edb9
