flatMap()：map + flat 的組合拳，簡化 JavaScript 數組處理邏輯
作者：JavaScript
JavaScript 中的 flatMap() 方法是數組處理的一把利器，它巧妙地結合了 map() 和 flat() 的功能，讓代碼更簡潔、更優雅。
JavaScript 中的 flatMap() 方法是數組處理的一把利器，它巧妙地結合了 map() 和 flat() 的功能，讓代碼更簡潔、更優雅。
什么是 flatMap()？
flatMap() 方法首先對數組的每個元素執行映射函數（類似 map()），然后將結果扁平化一層（類似 flat(1)）。這個"二合一"的操作使得處理嵌套數組結構變得更加簡單。
基本語法
const newArray = array.flatMap(callback(currentValue, index, array) {
// 返回處理后的元素
}, thisArg);- callback：對每個元素執行的函數
- thisArg：（可選）執行 callback 時用作 this 的值
使用場景與示例
(1) 扁平化嵌套數組結構
// 傳統方法
const result1 = [1, 2, 3].map(x => [x * 2]).flat();
// 使用 flatMap
const result2 = [1, 2, 3].flatMap(x => [x * 2]);
// 兩者結果相同：[2, 4, 6](2) 過濾并轉換元素
flatMap() 可以同時完成篩選和轉換的工作：
(3) 處理可能存在的元素
(4) 展開對象數組中的一對多關系
性能優勢
使用 flatMap() 相比分別調用 map() 和 flat() 有性能優勢：
- 只需遍歷數組一次
- 減少中間數組的創建
- 代碼更加簡潔
注意事項
- flatMap() 只會將結果扁平化一層
- 如果需要多層扁平化，仍需使用 flat(depth)
- IE 瀏覽器不支持此方法，需要使用 polyfill
實際應用案例
文本分析：
數據處理管道：
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);
// 結果是所有90分以上成績的對象數組責任編輯：趙寧寧
來源：
JavaScript
