JavaScript flatMap 為什麼留下 undefined？跳過項目要回傳空陣列

2026-11-05

前端

JavaScript

/

前端開發

/

疑難排解

/

教學

驗證於 2026-11-05

本文目錄

用 flatMap() 轉換清單，遇到不要的資料就 return，結果清單多了 undefined。flatMap 只把 callback 回傳的陣列攤平一層；要跳過一筆應回傳 []，回傳 undefined 或 null 都會保留一個元素。

這個差別來自 ECMAScript flatMap 與 FlattenIntoArray 演算法：回傳值是陣列才進行攤平，其他值直接放進結果。下面的例子限定普通陣列，每個 JavaScript 區塊都可獨立存成 .mjs 後用 Node.js 執行。

[]、[undefined] 與沒寫 return，結果不同#

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

3
assert.deepEqual([1, 2].flatMap(n => n === 1 ? [] : [n]), [2]);
4
assert.deepEqual([1, 2].flatMap(n => n === 1 ? undefined : [n]), [undefined, 2]);
5
assert.deepEqual([1].flatMap(() => {}), [undefined]);
6
assert.deepEqual([1].flatMap(() => [undefined]), [undefined]);
7
assert.deepEqual([1].flatMap(() => null), [null]);
8
assert.deepEqual([1].flatMap(() => [[1, 2]]), [[1, 2]]);
9
assert.deepEqual([1, , 2].flatMap(n => [n]), [1, 2]);
10
assert.deepEqual([1].flatMap(() => [, 'kept']), ['kept']);
11
console.log('flatMap return contracts: PASS');

回傳 [] 會貢獻零個元素；回傳 [undefined] 則貢獻一個明確的 undefined。來源空槽與 callback 回傳陣列內的空槽會被跳過，MDN flatMap也提供相同說明。若來源是 new Array(n)，先確認它真的有索引值，可接著看空槽與 Array.from 初始化。

外層只攤平一次。因此 [[1, 2]] 會變成一個 [1, 2] 元素，若資料契約是「每筆產生多個標籤」，callback 應直接回傳標籤陣列，避免額外包一層。

只排除缺值，保留 0、false 與空字串#

如果輸入是資料庫查詢結果，零與 false 可能都是有效值。先訂出排除條件，再決定回傳零個或一個元素：

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

3
const input = [0, false, '', null, undefined, 'ready'];
4
const output = input.flatMap(value =>
5
  value === null || value === undefined ? [] : [value]
6
);
7
assert.deepEqual(output, [0, false, '', 'ready']);
8
assert.deepEqual(input, [0, false, '', null, undefined, 'ready']);
9

10
const rows = [{ tags: ['js', 'css'] }, { tags: [] }];
11
assert.deepEqual(rows.flatMap(row => row.tags), ['js', 'css']);
12
console.log('explicit missing-value policy: PASS');

這個寫法表達的是「缺值就跳過，其餘保留」，不會把 falsy 全部移除。如果只做排除、沒有轉換需求，直接用條件明確的 filter() 也容易閱讀；需要一筆產生零筆、一筆或多筆時，再選 flatMap。

flatMap 回傳新陣列，但保留下來的物件仍共用原參照。上例使用基本型別；若接著修改物件屬性，資料隔離要依 structuredClone 的支援型別另外評估。

async callback 回傳的 Promise 會留在陣列裡#

flatMap 會同步呼叫 callback，Promise 屬於直接保留的非陣列值。最外層加 await 也只會拿到那個陣列，無法等候裡面的工作。下面用假的非同步查詢示範修正：

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

3
async function loadTags(id) {
4
  return id === 'skip' ? [] : [id, `${id}-extra`];
5
}
6

7
const ids = ['a', 'skip', 'b'];
8
const wrong = ids.flatMap(async id => loadTags(id));
9
assert.equal(wrong.length, 3);
10
assert.ok(wrong[0] instanceof Promise);
11
await Promise.all(wrong); // 等這批示範工作結束
12

13
const groups = await Promise.all(ids.map(id => loadTags(id)));
14
const tags = groups.flat();
15
assert.deepEqual(tags, ['a', 'a-extra', 'b', 'b-extra']);
16
console.log('await groups before flattening: PASS');