JavaScript对比两个数组 提取差异元素生成新数组的方法

判断两个对象数组的差集时，不要直接比较对象引用（不同内存地址的对象即便属性完全一致，也会被判断为不相等），优先使用元素的唯一标识id做匹配，效率和准确率都更高。

示例数据源 #

API 响应数组：

const apiRes = [
    {
        "id": 25,
        "color": "#00ad02"
    },
    {
        "id": 28,
        "color": "#e1b12c"
    }
]

本地 local 数组：

const localArr = [
    {
        "id": 26,
        "color": "#00ad02"
    },
    {
        "color": "#e1b12c",
        "id": 28
    }
]

对应预期结果的实现 #

你给出的预期输出是id为25的元素，该元素仅存在于API响应数组中，筛选逻辑如下：

1. 先提取local数组中所有元素的id，存入Set结构实现O(1)时间复杂度的查找
2. 遍历API响应数组，筛选出id不在上述Set中的元素即可

完整可运行代码：

// 提取本地数组的所有id
const localIdSet = new Set(localArr.map(item => item.id))
// 筛选差集
const result = apiRes.filter(item => !localIdSet.has(item.id))

console.log(result)
// 输出: [{ "id": 25, "color": "#00ad02" }]，完全符合预期

如果实际需求是找「local数组存在、API响应中不存在」的元素（即id为26的元素），只需要调换两个数组的处理顺序即可：

const apiIdSet = new Set(apiRes.map(item => item.id))
const localOnlyResult = localArr.filter(item => !apiIdSet.has(item.id))
// 输出: [{ "id": 26, "color": "#00ad02" }]

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