怎么在 JavaScript 中实现异步数组过滤

一、为什么原生的 Array.prototype.filter 无法搭配 async

很多初次处理异步数据校验的开发者，往往会下意识写出类似下面的代码：

// 试图过滤出偶数（模拟一个异步判定操作）
const list = [1, 2, 3, 4];

const result = list.filter(async (num) => {
  return num % 2 === 0;
});

console.log(result);
// 预期结果: [2, 4]
// 实际输出: [1, 2, 3, 4]（全部保留，过滤完全失效！）

这段代码不仅没有报错，反而把原数组中的 4 个元素原封不动地全部保留了。产生这种现象的根源在于 ECMAScript 规范对 Array.prototype.filter 的定义：

• filter 是纯同步 API：它在内部以同步方式遍历数组每一项，并立即对回调函数的返回值执行布尔转换（即抽象操作 ToBoolean(val)）。
• async 函数的本质是返回 Promise：无论 async 函数内部最终 return false 还是 return true，在外部调用那一瞬间，该函数返回的都是一个处于 pending 或已决议状态的 Promise 对象。
• 对象在布尔上下文中恒为真（Truthy）：在 JavaScript 类型转换规则中，任何 Object（包括普通对象、空数组以及任何状态的 Promise）转换为布尔值时都是 true。

也就是说，filter 在内部判断的永远是 Boolean(Promise)，每一次判断结果无一例外都是 true，导致原本需要被丢弃的项全部被强行保留。

二、主流实现方案：Promise.all 双阶段并发过滤

要解决这个问题，最直观且高效的方法是将“异步判定”与“数组剔除”拆分为两个清晰的阶段：

1. 映射决议阶段：使用 map 遍历原数组，让每一个异步谓词函数并发执行，得到一个 Promise<boolean>[] 数组；随后使用 await Promise.all(...) 等待所有异步判断完成，收敛为一个纯同步的布尔值数组（比如 [false, true, false, true]）。
2. 同步筛选阶段：调用原生的同步 filter，通过索引（index）去比对布尔值数组，仅保留布尔值为 true 的元素。

完整函数封装与代码示例

我们可以将这个逻辑封装为一个通用的工具函数 asyncFilter：

/**
 * 并发异步过滤数组
 * @param {Array} array 待过滤的源数组
 * @param {Function} asyncPredicate 返回 Promise<boolean> 的异步谓词函数
 * @returns {Promise<Array>} 过滤后的新数组
 */
async function asyncFilter(array, asyncPredicate) {
  // 阶段一：并行发起所有异步谓词计算
  const maskPromises = array.map((item, index, arr) => asyncPredicate(item, index, arr));

  // 等待所有 Promise 决议，生成布尔值掩码数组
  const masks = await Promise.all(maskPromises);

  // 阶段二：利用索引根据布尔值进行同步过滤
  return array.filter((_, index) => masks[index]);
}

// 真实业务示例：过滤出一组文件中实际存在于磁盘上的文件列表
async function checkFileExists(filePath) {
  // 模拟异步 I/O 检查
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(filePath.endsWith('.js'));
    }, 50);
  });
}

async function runDemo() {
  const files = ['app.js', 'style.css', 'index.html', 'utils.js'];
  const validFiles = await asyncFilter(files, checkFileExists);
  console.log(validFiles);
  // 输出示例: ['app.js', 'utils.js']
}

runDemo();

三、顺序与资源受限场景：for...of 串行过滤

全并发方案虽然高效，但在某些特定场景下并不适用：

• 严格的接口频控（Rate Limit）：如果外部 API 限制了每秒只能请求 1 次，一次性迸发上百个请求会直接触发 429 Too Many Requests。
• 状态存在前后依赖：例如下一个元素的校验依赖上一个元素的异步写入结果。

此时，我们需要改用纯串行模式。由于普通的 forEach 内部同样无法阻塞外部迭代，正确的串行方案是使用现代 JavaScript 的 for...of 循环配合 await：

/**
 * 串行异步过滤数组（按顺序逐个判定）
 * @param {Array} array 源数组
 * @param {Function} asyncPredicate 异步谓词函数
 * @returns {Promise<Array>} 过滤后的结果数组
 */
async function asyncFilterSequential(array, asyncPredicate) {
  const results = [];
  let index = 0;

  for (const item of array) {
    // 阻塞等待当前项校验完成，再进入下一次循环
    const keep = await asyncPredicate(item, index, array);
    if (keep) {
      results.push(item);
    }
    index++;
  }

  return results;
}

在串行模式下，整个操作的总耗时是所有项耗时的累加之和（t1 + t2 + ... + tn）。虽然耗时拉长，但对服务器和网络连接的瞬时开销始终压在单个请求级别，极具可控性。

四、生产级高并发防御：控制并发池（Concurrency Limit）

当数组规模达到成百上千项时，“全并发”会导致网络瞬间拥塞或浏览器连接耗尽，而“纯串行”又过于迟缓。工程实践中最稳健的折中方案是限制最大并发数的异步过滤（例如保持同时最多 5 个任务在飞）。

我们可以使用类似滑动窗口机制实现一个轻量的并发池过滤函数，不需要依赖外部繁琐的第三方包：

/**
 * 带并发数限制的异步过滤函数
 * @param {Array} array 源数组
 * @param {Function} asyncPredicate 异步谓词函数
 * @param {number} concurrency 最大并行执行数，默认 4
 * @returns {Promise<Array>} 过滤后的结果数组
 */
async function asyncFilterLimit(array, asyncPredicate, concurrency = 4) {
  const masks = new Array(array.length);
  let currentIndex = 0;

  // 单个工作线程函数：循环从任务池中取任务执行
  async function worker() {
    while (currentIndex < array.length) {
      const index = currentIndex++;
      try {
        masks[index] = await asyncPredicate(array[index], index, array);
      } catch (err) {
        // 容错策略：异常项默认判定为 false，避免单项崩溃导致整批过滤中断
        masks[index] = false;
      }
    }
  }

  // 启动上限数量的并发 worker
  const workers = [];
  const runnerCount = Math.min(concurrency, array.length);
  for (let i = 0; i < runnerCount; i++) {
    workers.push(worker());
  }

  // 等待所有 worker 执行完毕
  await Promise.all(workers);

  // 维持原数组元素相对顺序同步筛选
  return array.filter((_, idx) => Boolean(masks[idx]));
}

五、异常处理与工程踩坑提醒

在编写异步过滤逻辑时，还有两处极易被忽略的边界问题需要特别留意：

1. 单点异常（Promise Reject）对整体的影响

在基础的 Promise.all 实现中，只要数组中有任何一个元素的异步判定抛出错误或网络中断，Promise.all 会立刻将整个状态置为 reject，导致哪怕其余几百个元素全部成功，最终也拿不到任何过滤结果。

针对这个隐患，有两种加固方式：

• 谓词内部封装防御（推荐）：在传入过滤器的异步函数内部加上 try...catch，捕获异常后返回默认的保底值（如 false）。
• 使用 Promise.allSettled 代替 Promise.all：通过检查状态是否为 fulfilled 并提取对应值，避免因单次网络抖动使整组数据报废。

2. 保持元素原有的相对顺序

异步调用的返回时间是不确定的。比如检查第一项需要 200ms，而检查第二项仅需 50ms。如果在异步返回时直接 push 进结果列表，数组原有的排列顺序就会被打乱。

本文介绍的“布尔掩码数组（Masks Array）结合索引”的设计，正是确保最终结果与原数组顺序完全一致的关键所在。

六、方案对比与选型指南

在实际项目编码中，可以根据数据体量、性能要求与下游服务承载能力进行选型：

理解了原生 filter 无法处理异步的核心机制之后，只需根据具体业务的并发承受能力，选择全并发、纯串行或池化控流中的一种方案，即可在 JavaScript 中稳健、安全地实现异步数组过滤。