JavaScript中如何用filter替代map实现数组筛选并避免返回null值

实现方案说明 #

你现在的filter写法逻辑有问题：filter方法的核心作用是筛选原数组中符合条件的元素，返回的永远是原数组的元素本身，不会修改元素结构。你在filter回调里返回构造的新对象，只是利用了「对象为真值」的特性让符合条件的元素被保留，但最终拿到的还是完整的size对象，不是你要的仅包含_id和value的结构。

想要实现需求，最常用的有两种方案：

方案1：filter + map 组合（推荐）

先通过filter筛选出符合条件的元素，再用map做结构转换，逻辑拆分清晰，可读性最高：

const result = sizes
  // 第一步：筛选出 zones 包含目标值的元素
  .filter(size => size.zones.includes(uniform.zone))
  // 第二步：转换为仅包含 _id 和 value 的结构
  .map(size => ({
    _id: size._id,
    value: size.value
  }))

方案2：reduce 单次遍历（性能优先）

如果数组量级很大，不想做两次遍历，可以用reduce一次完成筛选+转换的操作，性能略好：

const result = sizes.reduce((acc, size) => {
  if (size.zones.includes(uniform.zone)) {
    acc.push({
      _id: size._id,
      value: size.value
    })
  }
  return acc
}, [])

原来的map+三元写法会在结果中插入null，后续还要额外做一次filter(item => item !== null)的过滤，等于多了一步操作，效率和可读性都不如上面两种方案。

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