
本文介绍如何使用 javascript 的 `filter()` 与 `includes()` 方法,高效筛选出对象数组中 `id` 属性**不匹配**给定数字数组的元素。
在实际开发中,我们常需对比两个数据集——例如,从一组位置对象中排除已选中的 ID(如用户已勾选的选项),或识别待同步/待删除的记录。核心需求是:找出对象数组中 id 值未出现在目标 ID 数组里的所有项。
实现这一逻辑最简洁、可读性最强的方式是结合 Array.prototype.filter() 与 Array.prototype.includes():
const ids = [60, 1456];
const data = [
{ id: 60, itemName: 'Main Location - Cleveland' },
{ id: 1453, itemName: 'Second Location - Cleveland' },
{ id: 1456, itemName: 'Third Location - New York' }
];
const unmatchedItems = data.filter(({ id }) => !ids.includes(id));
console.log(unmatchedItems);
// 输出:
// [
// { id: 1453, itemName: 'Second Location - Cleveland' }
// ]✅ 关键点解析:
- filter() 遍历 data 数组,对每个对象执行测试函数;
- 解构参数 ({ id }) 直接提取 id 字段,提升代码简洁性;
- !ids.includes(id) 判断该 id 是否不存在于 ids 数组中(注意取反逻辑);
- 返回新数组,不修改原数组,符合函数式编程最佳实践。
⚠️ 注意事项:
- 若 ids 数组较大(如 > 10,000 项),includes() 的线性查找(O(n))可能影响性能;此时建议先将 ids 转为 Set,再用 has() 实现 O(1) 查找:
const idSet = new Set(ids); const unmatchedItems = data.filter(({ id }) => !idSet.has(id)); - 确保 id 类型一致(如均为数字);若存在字符串 '60' 与数字 60 混用,includes() 会因严格相等而返回 false,必要时统一类型(如 Number(id) 或 String(id))。
综上,该方案以最小代码量、最高可读性解决“属性值是否包含于某数组”的常见判定问题,适用于前端列表过滤、权限校验、差异比对等多种场景。










