合并两个对象数组，跳过具有相同ID属性的对象

Question

我想合并两个对象数组，但是我想跳过具有相同ID的对象（只想保存具有相同id的第一个对象）。

一个数组存储在本地，另一个是从API中获取用户。

const localUsers = [
    {
        "id": 1,
        "first_name": "Adam",
        "last_name": "Bent",
        "avatar": "some img url"
    },
    {
        "id": 2,
        "first_name": "New Name",
        "last_name": "New Last Name",
        "avatar": "some new img url"
    }

];

const apiUsers = [
    {
        "id": 2,
        "first_name": "Eve",
        "last_name": "Holt",
        "avatar": "some img url"
    },
    {
        "id": 3,
        "first_name": "Charles",
        "last_name": "Morris",
        "avatar": "some img url"
    }
];

我希望能够实现以下功能：跳过id为2的apiUsers对象，因为它已经存在于本地对象数组localUsers中。我想对所有具有相同id的对象执行此操作。

const mergedUsers = [
    {
        "id": 1,
        "first_name": "Adam",
        "last_name": "Bent",
        "avatar": "some img url"
    },
    {
        "id": 2,
        "first_name": "New Name",
        "last_name": "New Last Name",
        "avatar": "some new img url"
    },
    {
        "id": 3,
        "first_name": "Charles",
        "last_name": "Morris",
        "avatar": "some img url"
    }

];

- Milos Petrovic

---

@YuryTarabanko 在你删除的答案中，你需要在 Map 中将 localUsers 放在 apiUsers 之后，这样才能按照 OP 的要求进行覆盖。 - Patrick Roberts

@PatrickRoberts 那么顺序就会不同了 ;) id: 1 将成为最后一个。 - Yury Tarabanko

你假设顺序很重要，但他们并没有明确说明 :P - Patrick Roberts

Answer 1

创建你的mergedUsers，将本地用户和尚未在本地用户中出现的api用户连接起来：

const localUsers = [
    {
        "id": 1,
        "first_name": "Adam",
        "last_name": "Bent",
        "avatar": "some img url"
    },
    {
        "id": 2,
        "first_name": "New Name",
        "last_name": "New Last Name",
        "avatar": "some new img url"
    }

];

const apiUsers = [
    {
        "id": 2,
        "first_name": "Eve",
        "last_name": "Holt",
        "avatar": "some img url"
    },
    {
        "id": 3,
        "first_name": "Charles",
        "last_name": "Morris",
        "avatar": "some img url"
    }
];

const mergedUsers = localUsers.concat(apiUsers.filter(a => !localUsers.find(b => b.id === a.id)));
console.log(mergedUsers);

- quirimmo

---

这很酷，谢谢！如果它能满足我的需求，我会尝试并回复你的。@quirimmo - Milos Petrovic

由于您实际上并没有使用“found”对象，因此可以使用localUsers.every(b => b.id !== a.id)代替!localUsers.find(b => b.id === a.id)。 - Jordan Running

@jordanrunning 嗯，谢谢，很有道理。即使没有计算上的区别，实际上你已经得到了一个布尔值。如果方便的话，请随意编辑，我现在正在用手机 :) - quirimmo

这非常有帮助！这是最精简和高效的解决方案。谢谢 :) - Milos Petrovic

Answer 2

你可以通过按照所需顺序缩小数组来使用Map。

const
    localUsers = [{ id: 1, first_name: "Adam", last_name: "Bent", avatar: "some img url" }, { id: 2, first_name: "New Name", last_name: "New Last Name", avatar: "some new img url" }],
    apiUsers = [{ id: 2, first_name: "Eve", last_name: "Holt", avatar: "some img url" }, { id: 3, first_name: "Charles", last_name: "Morris", avatar: "some img url" }],
    result = Array.from(
        [localUsers, apiUsers]
            .reduce(
                (m, a) => a.reduce((n, o) => n.set(o.id, n.get(o.id) || o), m),
                new Map
            )
            .values()
    );

console.log(result);

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

- Nina Scholz

Answer 3

首先从apiUsers中删除所有存在于localUsers中的实例，然后将该数组添加到localUsers中。数组的顺序在问题中没有说明，因此无关紧要，但易于执行。

const filteredApiUsers = apiUsers.filter(x => !localUsers.some(y => x.id === y.id));
const mergedUsers = [...localUsers, ...filteredApiUsers];

- tic

Answer 4

您可以使用此方法将两个带有重复项的对象合并：

Array.prototype.push.apply(localUsers,apiUsers);

然后你可以使用新对象删除重复项。

参考：合并两个对象数组

- Omkar

Answer 5

1. 从apiUserArray中过滤出已经在localUserArray中的用户。

2. 合并两个数组。

   let distinctApiUsers = apiUsers
                           .filter(rUser => localUsers
                                             .findIndex(lUser => lUser.id == rUser.id) == -1)
   
   let mergedArray = localUsers.concat(distinctApiUsers)
   

- ThatBrianDude

Answer 6

编写自己的比较函数非常容易：

    for(var i=0; i<localUsers.length; ++i) {
        var checked = 0;
        for(var j=i+1; j<apiUsers.length; ++j) {
             if(localUsers[i]['id'] === apiUsers[j]['id']){
                  apiUsers.splice(j--, 1);
             }
        }
    }
    console.log(localUsers.concat(apiUsers));

- pavan krishna