async filter 為什麼全部保留？JavaScript 非同步篩選的兩種寫法

2026-10-31

前端

JavaScript

/

前端開發

/

疑難排解

/

最佳實踐

items.filter(async item => await isAllowed(item)) 把每筆資料都留下，即使條件最後回傳 false。原因是 filter 當下收到 Promise 物件，把它當成真值；它不會等待 Promise 裡面的布林結果。 在整個 filter() 外面加 await 也沒有用。

先選擇循序等待，或先並行取得判定再用同步 filter()。兩種方法的差別是何時啟動工作，不只是寫法長短。

await 放在外層，仍然等不到判定#

filter 的 callback 契約以回傳值的 truthiness 決定是否保留；async function則回傳 Promise。這段可獨立存成 .mjs 執行：

1
import assert from 'node:assert/strict';
2

3
const input = [1, 2, 3];
4
const wrong = await input.filter(async () => false);
5
assert.deepEqual(wrong, [1, 2, 3]);
6
assert.equal(Boolean(Promise.resolve(false)), true);
7
console.log('已重現：async false 仍全部保留');

這裡不是網路慢到結果沒更新，而是篩選早已完成。若 callback 拒絕，原本的同步 filter() 也不會替你收集錯誤，所以不要拿這種寫法呼叫真實 API。

需要一筆完成才做下一筆，用 for…of#

下面兩個 helper 都限定一般、沒有空槽的陣列，predicate 回傳布林或 Promise 布林。執行期間不要修改輸入或 predicate 依賴的共享狀態。

1
async function filterSerial(items, predicate) {
2
  const snapshot = items.slice();
3
  const kept = [];
4
  for (const [index, item] of snapshot.entries()) {
5
    if (await predicate(item, index)) kept.push(item);
6
  }
7
  return kept;
8
}
9

10
async function filterParallel(items, predicate) {
11
  const snapshot = items.slice();
12
  const decisions = await Promise.all(
13
    snapshot.map((item, index) => predicate(item, index)),
14
  );
15
  return snapshot.filter((_, index) => decisions[index]);
16
}

把這組與下一組驗收放在同一份 .mjs 執行。filterSerial 適用於有順序依賴、需要前一筆完成再開始下一筆的工作；遇到拒絕就停止，後面的 predicate 不再啟動。它保留原物件參照，不做深拷貝。

如果每筆互不相依，資料量也受控，可以用 filterParallel。Promise.all() 的結果依輸入順序排列，所以晚完成的第一筆仍對應第一個判定，不會因完成順序不同而選錯項目。

驗收不能只看最後剩幾筆#

下面檢查保留順序、空陣列，以及 predicate 拒絕時的行為。以手動 gate 讓第一筆晚於後兩筆完成，不依賴毫秒數猜測排程：

1
import assert from 'node:assert/strict';
2

3
for (const filter of [filterSerial, filterParallel]) {
4
  assert.deepEqual(await filter([1, 2, 3], async n => n !== 2), [1, 3]);
5
  assert.deepEqual(await filter([], async () => true), []);
6
  await assert.rejects(
7
    filter([1, 2, 3], async n => {
8
      if (n === 2) throw new Error('判定服務失敗');
9
      return true;
10
    }),
11
    /判定服務失敗/,
12
  );
13
}
14

15
let releaseFirst;
16
const gate = new Promise(resolve => { releaseFirst = resolve; });
17
const completed = [];
18
const pending = filterParallel([1, 2, 3], async n => {
19
  if (n === 1) await gate;
20
  completed.push(n);
21
  return n !== 2;
22
});
23
assert.deepEqual(completed, [2, 3]);
24
releaseFirst();
25
assert.deepEqual(await pending, [1, 3]);
26
assert.deepEqual(completed, [2, 3, 1]);
27
console.log('篩選、空陣列、拒絕與完成順序檢查通過');