JavaScript 中的 flatMap() 方法是數(shù)組處理的一把利器，它巧妙地結(jié)合了 map() 和 flat() 的功能，讓代碼更簡潔、更優(yōu)雅。

什么是 flatMap()？

flatMap() 方法首先對數(shù)組的每個元素執(zhí)行映射函數(shù)（類似 map()），然后將結(jié)果扁平化一層（類似 flat(1)）。這個"二合一"的操作使得處理嵌套數(shù)組結(jié)構(gòu)變得更加簡單。

基本語法

const newArray = array.flatMap(callback(currentValue, index, array) {
// 返回處理后的元素
}, thisArg);

• callback：對每個元素執(zhí)行的函數(shù)
• thisArg：（可選）執(zhí)行 callback 時用作 this 的值

使用場景與示例

(1) 扁平化嵌套數(shù)組結(jié)構(gòu)

// 傳統(tǒng)方法
const result1 = [1, 2, 3].map(x => [x * 2]).flat();
// 使用 flatMap
const result2 = [1, 2, 3].flatMap(x => [x * 2]);
// 兩者結(jié)果相同：[2, 4, 6]

(2) 過濾并轉(zhuǎn)換元素

flatMap() 可以同時完成篩選和轉(zhuǎn)換的工作：

(3) 處理可能存在的元素

(4) 展開對象數(shù)組中的一對多關(guān)系

性能優(yōu)勢

使用 flatMap() 相比分別調(diào)用 map() 和 flat() 有性能優(yōu)勢：

• 只需遍歷數(shù)組一次
• 減少中間數(shù)組的創(chuàng)建
• 代碼更加簡潔

注意事項

• flatMap() 只會將結(jié)果扁平化一層
• 如果需要多層扁平化，仍需使用 flat(depth)
• IE 瀏覽器不支持此方法，需要使用 polyfill

實際應(yīng)用案例

文本分析：

數(shù)據(jù)處理管道：

const userData = [
  { name: "Alice", scores: [85, 90, 92] },
  { name: "Bob", scores: [75, 80] },
  { name: "Charlie", scores: [95, 85, 90, 100] }
];

const highScores = userData
  .flatMap(user =>
    user.scores.map(score => ({ name: user.name, score }))
  )
  .filter(item => item.score >= 90);
// 結(jié)果是所有90分以上成績的對象數(shù)組