React中如何剔除数组中的重复对象？

要拿到你想要的结果，关键是先定位出两个数组中重复的uid，再把这些uid对应的对象全部过滤掉就行。下面给两种实现方式：

方式一：先合并再过滤 #

这种方式逻辑直观，先合并两个数组，再剔除重复uid的对象：

const dayone = [{ name: 1, uid: 1 }, { name: 2, uid: 2 }, { name: 3, uid: 3 },
    { name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }]

const daytwo = [{ name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }, { name: 7, uid: 7 }]

// 提取两个数组的uid集合，用Set提升查找效率
const dayoneUids = new Set(dayone.map(item => item.uid));
const daytwoUids = new Set(daytwo.map(item => item.uid));

// 找出在两个数组都出现过的uid（交集）
const duplicateUids = new Set([...dayoneUids].filter(uid => daytwoUids.has(uid)));

// 合并数组并过滤掉重复uid的对象
const total = dayone.concat(daytwo);
const newTotal = total.filter(item => !duplicateUids.has(item.uid));

console.log(newTotal);
// 输出：[{ name: 1, uid: 1 }, { name: 2, uid: 2 }, { name: 3, uid: 3 },{ name: 7, uid: 7 }]

方式二：直接过滤后合并 #

这种方式更高效，不用先处理重复的对象，直接分别筛选两个数组中独有的部分再合并：

const dayone = [{ name: 1, uid: 1 }, { name: 2, uid: 2 }, { name: 3, uid: 3 },
    { name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }]

const daytwo = [{ name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }, { name: 7, uid: 7 }]

const dayoneUids = new Set(dayone.map(item => item.uid));
const daytwoUids = new Set(daytwo.map(item => item.uid));

// 筛选dayone中不在daytwo的对象，加上daytwo中不在dayone的对象
const newTotal = [
  ...dayone.filter(item => !daytwoUids.has(item.uid)),
  ...daytwo.filter(item => !dayoneUids.has(item.uid))
];

console.log(newTotal);
// 输出结果和上面一致

两种方式都能实现需求，方式二更适合数据量较大的场景，因为减少了不必要的对象处理。

内容的提问来源于stack exchange，提问作者eugene lee