在前端数据处理场景中，我们经常会遇到这样的需求：有一个对象数组，还有一个用于匹配的普通数组，需要根据普通数组的值筛选对象数组中对应的项，再从筛选结果中提取指定的属性组成新的数组。下面介绍几种常用的实现方案。
基础场景示例
首先定义我们的测试数据，假设有一个用户对象数组，还有一个需要匹配的id数组，目标是筛选出id在匹配数组中的用户，再提取用户的name和age属性：
// 原始对象数组
const userList = [
{ id: 1, name: '张三', age: 20, gender: '男' },
{ id: 2, name: '李四', age: 22, gender: '女' },
{ id: 3, name: '王五', age: 25, gender: '男' },
{ id: 4, name: '赵六', age: 21, gender: '女' }
];
// 用于匹配的id数组
const targetIds = [1, 3];
方案一：使用filter结合includes方法
这是最直观的实现方式，先用filter方法筛选符合条件的对象，再用map方法提取需要的属性：
const result = userList
.filter(item => targetIds.includes(item.id))
.map(item => ({ name: item.name, age: item.age }));
console.log(result);
// 输出：[{ name: '张三', age: 20 }, { name: '王五', age: 25 }]
这种方案逻辑清晰，适合匹配数组长度不大的场景。如果匹配数组长度很长，includes方法每次都要遍历数组，性能会有所下降。
方案二：使用Set优化匹配效率
当匹配数组长度较大时，可以先将匹配数组转为Set结构，利用Set的查找时间复杂度为O(1)的特性提升性能：
const targetIdSet = new Set(targetIds);
const result = userList
.filter(item => targetIdSet.has(item.id))
.map(item => ({ name: item.name, age: item.age }));
console.log(result);
// 输出：[{ name: '张三', age: 20 }, { name: '王五', age: 25 }]
这种方案在匹配数组元素较多时，性能优势会非常明显，是处理大数据量场景的推荐方案。
方案三：使用reduce方法一步实现
如果希望用更简洁的代码实现，也可以使用reduce方法在一次遍历中完成筛选和属性提取：
const targetIdSet = new Set(targetIds);
const result = userList.reduce((acc, item) => {
if (targetIdSet.has(item.id)) {
acc.push({ name: item.name, age: item.age });
}
return acc;
}, []);
console.log(result);
// 输出：[{ name: '张三', age: 20 }, { name: '王五', age: 25 }]
这种方案减少了数组的遍历次数，但是代码可读性稍弱，适合对代码简洁度有要求的场景。
不同方案对比
以下是三种方案的适用场景和特点对比：
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| filter+includes | 匹配数组长度小 | 逻辑清晰，代码易懂 | 匹配数组大时性能差 |
| filter+Set | 匹配数组长度大 | 查找效率高，性能好 | 需要额外创建Set结构 |
| reduce一步实现 | 追求代码简洁 | 遍历次数少 | 可读性稍弱 |
注意事项
- 如果匹配的属性是对象类型，需要注意引用类型的比较问题，不能直接用
includes或者has判断，需要先提取关键标识字段再匹配。 - 提取属性时如果不想手动写每个属性名，可以用
Object.fromEntries结合Object.entries筛选需要的属性：
const needKeys = ['name', 'age'];
const result = userList
.filter(item => targetIds.includes(item.id))
.map(item =>
Object.fromEntries(
Object.entries(item).filter(([key]) => needKeys.includes(key))
)
);
以上方法可以根据实际开发需求灵活选择，基本能覆盖大部分根据数组匹配过滤对象并提取属性的场景。
JavaScript数组过滤对象数组属性提取数组匹配修改时间：2026-06-18 13:15:28