JavaScript中如何过滤属性匹配另一对象数组的对象数组元素

为什么原有过滤逻辑不生效 #

JavaScript 中 Array.includes() 对引用类型（比如对象）的判断是内存地址级别的引用匹配，不会逐字段对比对象的键值内容。
你代码中 issue.state 和 states 数组里哪怕存在键值完全相同的对象，只要二者不是同一块内存地址的引用，includes 就会判定为不相等，最终过滤结果始终为空。

基础实现方案 #

将原本的对象引用对比，改成逐字段的值匹配，用 Array.some() 做存在性判断即可：

return issues.filter(issue => {
  return states.some(stateItem => {
    // 按照需求匹配对应字段，这里以label字段为例
    return stateItem.label === issue.state.label
  })
})

Array.some() 会在遍历到第一个满足条件的元素时就立刻返回true，比全量遍历的效率更适合做存在性校验。

性能优化写法 #

当 states 数组规模较大时，每遍历一个issue就全量扫一遍states数组会产生不必要的性能消耗，可以提前把所有合法的state标识提取成Set结构，将存在性判断的时间复杂度从O(n)降到O(1)：

// 预处理：提取所有合法的label值存入Set
const allowedStateLabels = new Set(states.map(item => item.label))

// 执行过滤
return issues.filter(issue => allowedStateLabels.has(issue.state.label))

注意：如果后续state对象需要匹配多个字段（比如同时校验label和name），只要在值对比的环节补上对应字段的判断逻辑即可，不要依赖对象的直接引用做相等判断。

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