React中如何基于键值对筛选数组，移除重复对象生成新数组

你需要从两个对象数组中筛选出仅在其中一侧存在的对象，这里针对你给出的示例场景，给出可行的解决方案：

原代码的问题 #

你的写法存在两个关键问题：

1. JavaScript数组并没有contains方法，正确的数组包含判断方法是includes，但includes对于对象是按引用比较——即使两个对象属性完全一致，也会被判定为不相等。
2. 逻辑错误，不能直接用data.name !== secondObjectArray.contains.name来判断，因为数组里是多个对象，需要遍历检查是否存在匹配项。

解决方案 #

首先定义一个判断两个对象是否匹配的函数（这里按示例中的name和show属性全匹配来判断，你可以根据需求修改）：

function isMatch(objA, objB) {
  return objA.name === objB.name && objA.show === objB.show;
}

然后使用filter结合some方法，筛选出第一个数组中在第二个数组里没有匹配项的对象：

const firstObjectArray = [
  { name: 'six', show: 'six  times' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

const secondObjectArray = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

const remainingArr = firstObjectArray.filter(obj => {
  return !secondObjectArray.some(item => isMatch(obj, item));
});

console.log(remainingArr);
// 输出：[{ name: 'six', show: 'six  times' }]

扩展：获取两个数组中所有仅单侧存在的对象 #

如果需要同时保留第二个数组中不在第一个数组里的对象（比如示例中的Eleven），可以合并两个方向的筛选结果：

const onlyInFirst = firstObjectArray.filter(obj => !secondObjectArray.some(item => isMatch(obj, item)));
const onlyInSecond = secondObjectArray.filter(obj => !firstObjectArray.some(item => isMatch(obj, item)));
const allUniqueItems = [...onlyInFirst, ...onlyInSecond];

console.log(allUniqueItems);
// 输出：[{ name: 'six', show: 'six  times' }, { name: 'Eleven', show: 'Stranger Things' }]

灵活调整匹配规则 #

如果只需要按name属性判断是否匹配（不考虑show字段），只需修改isMatch函数：

function isMatch(objA, objB) {
  return objA.name === objB.name;
}

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