在Javascript中将唯一对象添加到对象数组答案

【问题标题】：Add unique objects to array of objects in Javascript在Javascript中将唯一对象添加到对象数组
【发布时间】：2018-10-12 17:47:46
【问题描述】：

我有如下所示的对象数组：

const array1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}]

const array2 = [{id: 1, name: "John"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}]

如何从array2 to array1 添加唯一对象，使其看起来像这样：

const array1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}]

允许使用 Lodash 实现。非常感谢。

【问题讨论】：

嘿戴夫。这有点像您只是要求我们为您编写代码，这通常是不受欢迎的。考虑包括你自己的尝试，这样我们至少可以告诉你哪里出了问题，并希望改进你的解决方案，而不是完全从头开始编写一个。因此，要求问题尽可能具体。
How to merge two arrays in JavaScript and de-duplicate items的可能重复
@Herohtar 该目标的问题是您无法使用== 或=== 按值比较两个对象。您必须明确比较它们的值。
@TylerRoper 啊，我明白了，我会编辑并重新发布。谢谢。
@DaveKalu 你可以edit your existing question 而不是转发:)

标签： javascript arrays object lodash

【解决方案1】：

您可以使用_.unionBy() 函数来合并数组中的唯一对象。

const array1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}];

const array2 = [{id: 1, name: "John"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}];


console.log(_.unionBy(array1, array2, 'id'));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

使用原生数组函数可以得到想要的结果，如下：

首先使用.concat() 连接两个数组
使用.reduce() 创建以id 作为键、将值作为相关对象的结果对象。如果已经添加了一个对象，则跳过具有相同 ID 的其他对象。
使用Object.values() 从结果对象中获取对象数组。

演示：

const array1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}],
      array2 = [{id: 1, name: "John"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}];

const result = Object.values(
    array1.concat(array2).reduce((r, c) => (r[c.id] = r[c.id] || c, r),  {})
);
                   
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案3】：

也可以通过原生Map object和reduce一行完成：

const arr1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}]
const arr2 = [{id: 1, name: "John"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}]

const result = [...[...arr1, ...arr2]
   .reduce((r, c) => (r.set(c.id, c), r), new Map()).values()]

console.log(result)

【讨论】：