JavaScript中flatMap如何用累加器？flatMap与reduce对比

1. 如何用flatMap实现去重效果？ #

flatMap本身的回调逻辑无法直接复用之前的处理结果，需要借助外部的Set来跟踪已出现的dxParentId，以此控制flatMap的返回值：

const seen = new Set();
const resultArr = data.flatMap(obj => {
  if (obj.dxParentId !== null && !seen.has(obj.dxParentId)) {
    seen.add(obj.dxParentId);
    return [obj.dxParentId];
  }
  return [];
});
console.log(resultArr); // ['1_id', '12_id']

这里利用Set的has和add方法（均为O(1)时间复杂度）做去重判断，flatMap负责完成过滤与映射，最终得到去重后的目标数组。

如果追求代码简洁，也可以先通过flatMap过滤出非null值，再转Set去重：

const resultArr = [...new Set(data.flatMap(obj => obj.dxParentId !== null ? [obj.dxParentId] : []))];
console.log(resultArr); // ['1_id', '12_id']

这种写法更短，但会多一次遍历（flatMap遍历一次，Set构建遍历一次），小规模数据下性能差异可以忽略。

2. flatMap迭代中能否访问累加结果？ #

不行。flatMap的回调函数参数只有当前元素、索引、原数组，没有类似reduce的累加器参数。它的设计逻辑是让每个元素独立完成映射/过滤操作，无法直接获取之前所有元素的处理结果。如果需要跟踪状态，只能借助外部变量（比如Set、数组）实现。

3. 性能优化角度：reduce、flatMap、forEach哪个更合适？ #

这取决于你采用的去重方式：

推荐方案：用Set做去重 #

• reduce + Set：一次遍历完成过滤、去重、收集，性能最优，逻辑也集中在一个函数内：

  const resultArr = data.reduce((acc, obj) => {
    if (obj.dxParentId !== null && !acc.seen.has(obj.dxParentId)) {
      acc.seen.add(obj.dxParentId);
      acc.result.push(obj.dxParentId);
    }
    return acc;
  }, { seen: new Set(), result: [] }).result;
  

• forEach + Set：和reduce性能几乎一致，写法更直观，适合偏好命令式风格的场景：

  const seen = new Set();
  const resultArr = [];
  data.forEach(obj => {
    if (obj.dxParentId !== null && !seen.has(obj.dxParentId)) {
      seen.add(obj.dxParentId);
      resultArr.push(obj.dxParentId);
    }
  });
  

• flatMap + Set：需要两次遍历（flatMap一次，Set转数组一次），性能略逊于上面两种，但代码最简洁，适合数据量不大的场景。

不推荐方案：用数组includes去重 #

不管是reduce还是forEach里用filtered.includes(...)，每次判断都是O(n)时间，整体复杂度达到O(n²)，数据量大时性能会急剧下降，完全不建议这种写法。

总结 #

• 追求极致性能：选reduce + Set或forEach + Set
• 追求代码简洁：选flatMap + Set
• 绝对避免用数组includes做去重判断

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