在前端开发的实际场景中，我们常常会遇到需要根据一个对象数组去过滤另一个对象数组的需求，比如根据已有的选中的商品ID列表，从完整的商品列表中筛选出对应的商品信息，或者根据已删除的用户ID列表，过滤掉用户列表中的对应数据。
基础实现方案：filter结合some方法
最直观的实现思路是使用数组的filter方法遍历目标数组，同时结合some方法判断当前元素是否存在于过滤条件数组中。假设我们有两个对象数组，一个是完整的用户列表userList，另一个是包含需要筛选的用户ID的数组targetIds，我们要筛选出userList中ID在targetIds中的用户。
// 完整的用户列表
const userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 },
{ id: 4, name: '赵六', age: 28 }
];
// 需要筛选的用户ID数组
const targetIds = [1, 3];
// 使用filter结合some过滤
const result = userList.filter(user => {
return targetIds.some(id => id === user.id);
});
console.log(result);
// 输出: [{ id: 1, name: '张三', age: 20 }, { id: 3, name: '王五', age: 25 }]
这种方式的优点是代码逻辑清晰，容易理解，适合过滤条件数组长度不大的场景。但如果targetIds的长度很长，some方法每次都会遍历整个条件数组，整体时间复杂度会达到O(n*m)，执行效率会有所下降。
优化方案：使用Set或Map提升性能
当过滤条件数组的长度较大时，我们可以先将条件数组转换成Set或者Map结构，利用这两种数据结构查找效率高的特点来优化性能。还是以上面的用户筛选场景为例，使用Set的实现方式如下：
const userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 },
{ id: 4, name: '赵六', age: 28 }
];
const targetIds = [1, 3];
// 将条件数组转换成Set
const targetIdSet = new Set(targetIds);
// 过滤时直接判断Set中是否有对应的ID
const result = userList.filter(user => targetIdSet.has(user.id));
console.log(result);
// 输出: [{ id: 1, name: '张三', age: 20 }, { id: 3, name: '王五', age: 25 }]
如果过滤条件不是简单的ID匹配，而是需要根据对象中的多个属性判断，比如需要根据用户ID和用户类型共同过滤，那么可以使用Map来存储条件，键可以是拼接后的唯一标识：
const userList = [
{ id: 1, name: '张三', age: 20, type: 'vip' },
{ id: 2, name: '李四', age: 22, type: 'normal' },
{ id: 1, name: '张三副本', age: 20, type: 'normal' },
{ id: 3, name: '王五', age: 25, type: 'vip' }
];
// 过滤条件：需要筛选id为1且type为vip，或者id为3且type为vip的数据
const filterConditions = [
{ id: 1, type: 'vip' },
{ id: 3, type: 'vip' }
];
// 将条件转换成Map，键为拼接的唯一标识
const conditionMap = new Map();
filterConditions.forEach(item => {
const key = `${item.id}_${item.type}`;
conditionMap.set(key, true);
});
// 过滤时拼接当前元素的标识判断是否存在于Map中
const result = userList.filter(user => {
const key = `${user.id}_${user.type}`;
return conditionMap.has(key);
});
console.log(result);
// 输出: [{ id: 1, name: '张三', age: 20, type: 'vip' }, { id: 3, name: '王五', age: 25, type: 'vip' }]
反向过滤场景
有时候我们需要的是反向过滤，也就是过滤掉对象数组中存在于条件数组里的元素，只需要将判断逻辑取反即可。比如要过滤掉userList中ID在targetIds里的用户，使用Set的实现方式如下：
const userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 },
{ id: 4, name: '赵六', age: 28 }
];
const targetIds = [1, 3];
const targetIdSet = new Set(targetIds);
// 取反判断，过滤掉符合条件的元素
const result = userList.filter(user => !targetIdSet.has(user.id));
console.log(result);
// 输出: [{ id: 2, name: '李四', age: 22 }, { id: 4, name: '赵六', age: 28 }]
不同方案对比
我们可以通过下面的表格对比不同方案的适用场景和特点：
| 方案 | 时间复杂度 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|---|
| filter + some | O(n*m) | 条件数组长度小的简单过滤场景 | 逻辑直观，代码易理解 | 条件数组长时效率低 |
| filter + Set | O(n+m) | 单属性匹配的过滤场景 | 查找效率高，性能优秀 | 仅支持单属性匹配 |
| filter + Map | O(n+m) | 多属性匹配的过滤场景 | 支持复杂条件匹配，性能优秀 | 需要手动拼接唯一标识键 |
注意事项
- 如果对象数组中的匹配属性是引用类型，比如需要根据对象中的某个对象属性过滤，需要先明确匹配规则，不能直接使用
===判断，因为引用类型比较的是引用地址。 - 当过滤条件数组可能包含重复元素时，使用
Set转存时会自动去重，不会影响过滤结果，反而能进一步提升查找效率。 - 如果处理的数据量非常庞大，还可以考虑使用
for循环代替filter方法，减少函数调用的开销，进一步提升性能。
JavaScript对象数组过滤filter方法数组去重修改时间：2026-06-25 12:09:37