Array.filter()匹配对象数组嵌套值异常：空数组问题排查与解决

问题场景 #

现有两个对象数组：

let arrOne = [{ id:01, name:'haris' },{ id:02, name:'papi' },{ id:03, name:'john' }];
let arrTwo = [{ jobId:03, name:'haha' },{ jobId:01, name:'kaka' }];

想要筛选出arrOne中id与arrTwo的jobId匹配的元素，使用以下代码后返回空数组[]：

arrOne.filter((ele,index) => ele.id == (arrTwo)[index]?.jobId)

但将arrTwo调整为[{ jobId:01, name:'haha' },{ jobId:02, name:'kaka' }]时，代码能返回匹配值，需要排查问题并解决。

问题根源 #

你的代码错误地用数组索引来关联两个数组的元素匹配：

• filter回调里的index是arrOne当前元素的索引，你用它去取arrTwo对应索引的元素做比较，这要求两个数组中匹配的元素必须在相同索引位置才能命中。
• 第一个例子里，arrOne[0].id=1对应arrTwo[0].jobId=3，不匹配；arrOne[1].id=2对应arrTwo[1].jobId=1，也不匹配；arrOne[2].id=3但arrTwo没有索引2的元素，自然返回空数组。
• 调整arrTwo后，刚好索引0的jobId=1匹配arrOne[0].id=1，索引1的jobId=2匹配arrOne[1].id=2，这只是巧合，逻辑不具备通用性。

正确解决方案 #

正确的思路是：先提取arrTwo中所有jobId的集合，再遍历arrOne判断元素的id是否在这个集合里。这样不管两个数组的元素顺序、长度如何，都能准确匹配。

代码示例：

let arrOne = [{ id:01, name:'haris' },{ id:02, name:'papi' },{ id:03, name:'john' }];
let arrTwo = [{ jobId:03, name:'haha' },{ jobId:01, name:'kaka' }];

// 提取arrTwo的所有jobId到Set，提升查找效率
const jobIdSet = new Set(arrTwo.map(item => item.jobId));
// 筛选匹配元素
const matchedItems = arrOne.filter(ele => jobIdSet.has(ele.id));

console.log(matchedItems);
// 输出：[{ id: 1, name: 'haris' }, { id: 3, name: 'john' }]

方案优势 #

• 时间复杂度更低：从暴力匹配的O(n*m)优化为O(n+m)，大数据量下性能更优。
• 逻辑通用：不受数组元素顺序、长度差异影响，只要id和jobId值匹配就能筛选出来。

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