JavaScript Deepmerge

概述

在处理 API 调用、处理数据或开发常规程序时，JavaScript 对象常需要将两个或多个对象合并为一个。了解如何合并对象非常有用。

合并两个事物为一个整体就是合并。结果可以被覆盖为现有实体，或者存储为新的实体。同样，我们可以将两个对象的多个属性合并为一个整体，并使用 JavaScript 通过合并它们来对它进行必要的运算。

但是，这如何实现呢？

基本的 JavaScript 对象由一组键值对表示，用逗号分隔。集合中的每个键都有一个匹配的值。现在，当我们尝试合并两个对象时，这两个对象的属性都会被合并并保存在一个父对象中。听起来够简单了吧？请再耐心一点。好的，我们已经将两个对象合并成了一个单一的实体。但是，如果两个键是相同的，会发生什么呢？在这种情况下应该发生什么？这时，深入理解浅合并和深合并就变得很重要了。现在，让我们尝试通过一些例子来理解它。

如何合并两个 JavaScript 对象

使用扩展运算符（...）合并对象

JavaScript 中的扩展运算符是内置的，可用于合并两个 JavaScript 对象。它将传递给它的可迭代结构（如数组、对象等）展开为单独的元素。此外，这使得我们的代码更具可读性和简洁性。

扩展运算符通常用于创建 JavaScript 对象的浅拷贝。在后面的部分，我们将详细介绍什么是浅拷贝。但目前，让我们这样理解：当使用扩展 (...) 运算符合并两个对象时，如果一个或多个键相同，则会覆盖前一个值。

代码

输出

使用 Object.assign() 方法合并对象

我们可以使用预定义的 Object.assign() 函数来合并两个 JavaScript 对象。它返回一个单一的对象，其中包含了源对象的所有可枚举属性的副本。

其写法如下：

语法

在下面的示例中，我们已将一个空对象用作 Object.assign() 函数的第一个参数，因为我们希望返回一个空对象，该对象包含本例中 obj1 和 obj2 的所有源的最终值。

或者，我们可以将该特定对象作为第一个参数传递，并实现将所有源对象合并到当前对象的目标。

代码

输出

浅合并

浅合并是 JavaScript 中一种合并技术。它合并两个 JS 对象，但有一个诀窍：如果我们进行浅合并，并且两个对象都具有同名的键，则后一个对象的值将替换前一个对象的值。它会完全替换它，而不确定被指向的项目是否是嵌套的或具有具有不同键的子对象。

为了更好地理解这一点，让我们看一个例子。

代码

输出

在这里，我们可以看到键 num2 同时存在于 obj1 和 obj2 中，并且当我们对它们进行浅合并时，最初表示 num2 初始值的对象被替换为一个表示键 num2 的 obj2 初始值的对象。

深合并

与浅合并相比，深合并通过遍历嵌套对象（如果有）来进行深度合并。当我们进行深合并时，如果两个键相同，它不会立即更改值，而是首先检查对象是否是嵌套的，然后继续直到达到键的基本级别。如果它发现两个相同的键并且没有嵌套子项，它会替换它们；否则，它会将子键连接到父对象中的相应位置。让我们用一个例子来解释。

代码

输出

在这个例子中，我们可以看到，在深合并 object1 和 object2 时，整个对象并没有被直接覆盖；相反，它首先进入嵌套对象，查找相同的键，并且因为在基本级别没有相同的键，所以将它们连接到父对象中的适当位置。

使用自定义函数合并对象

此外，我们还可以创建自己的 JavaScript 方法来合并两个对象。

代码

输出

说明 在这里，我们首先初始化 object1 和 object2，然后调用 merge() 函数，并将新创建的对象作为参数传入。在 merge() 函数中，我们使用扩展运算符来接收参数，并创建一个空对象来保存合并后的部分。在那里，我们使用一个名为 merger() 的内部过程来合并提供的项。它接受一个对象作为输入并遍历其组件。然后，我们进行条件检查以确定提供的对象是否具有属性；如果是，则将该元素分配给目标空对象，然后重复此过程，直到整个对象被迭代。完成后，我们返回目标对象并打印它。

Lodash merge() 方法

为了合并两个 JavaScript 对象，我们可以使用 lodash 库的 merge() 方法。

输出

说明 在这个例子中，我们使用 lodash 库的 _.merge() 函数来合并两个对象；它会递归地将源对象的属性合并到目标对象中。即使键相同，值也会被连接而不是被覆盖。使用此 JavaScript 美化器来增强代码的外观。

结论

1. 在我们的程序中，我们通常需要合并多个 JavaScript 对象。
2. 有几种方法可以实现这一点。考虑 JavaScript 的扩展运算符和 Object.assign() 函数。
3. 合并两个 JS 对象时，请记住浅合并和深合并的概念。
4. 当两个对象具有相同的键时，浅合并会替换第一个对象的整个内容。
5. 深合并在覆盖期间识别并替换冲突的嵌套值。
6. 我们可以创建自己的 JavaScript 方法来合并两个对象。