前端车辆筛选分组：Map方案与三数组方案的性能及代码简洁性对比

安全阿岳

2026-7-13

两种车辆筛选方案的对比分析

性能对比

方案1（单独useMemo筛选）：需要对车辆数组执行3次完整遍历（每个状态对应一次filter），当数组规模较大时，会产生额外的计算开销。
方案2（Map分组）：仅需遍历数组1次，通过单次循环完成所有状态的分组，数据量越大，该方案的性能优势越显著。

两种方案都通过useMemo缓存计算结果，仅当依赖的cars数组变化时才重新执行计算，缓存逻辑的效率一致，核心差异来自遍历次数的不同。

代码简洁性对比

方案1：写法直白，每个状态对应的数组单独声明，阅读和维护时能直接对应到具体状态，对新手友好。但状态数量增加时，需要重复编写useMemo和filter逻辑，代码会出现冗余。
示例代码：

const newCars = useMemo(() => cars.filter(car => car.status === 'NEW'), [cars]);
const purchasedCars = useMemo(() => cars.filter(car => car.status === 'PURCHASED'), [cars]);
const damagedCars = useMemo(() => cars.filter(car => car.status === 'DAMAGED'), [cars]);

方案2：代码更紧凑，仅需一次循环完成分组。状态数量增加时，只需在Map初始化阶段添加对应键值对即可，无需修改循环逻辑。但需要开发者熟悉Map的使用，初次阅读时需要理解分组逻辑。
示例代码：
```
const carMap = useMemo(() => {
  const statusMap = new Map([
    ['NEW', []],
    ['PURCHASED', []],
    ['DAMAGED', []]
  ]);
  cars.forEach(car => statusMap.get(car.status).push(car));
  return statusMap;
}, [cars]);
```