作為一門主流的WEB編程語言，JavaScript 不斷發展，添加新的語法、功能或抽象，幫助開發人員輕松解決復雜的問題。如數組展平過去需要自己編寫方法來實現，而從 ES2019 中開始引入了一種扁平化數組的新方法，可以展平任何深度的數組，這個方法就是 flat() 。而說起 flat() 的方法，就不得不順便說下 flatMap()。而在 JavaScript 中數據操作方法常用的大概是10個左右，具體數據方法如何使用可以參閱《JavaScript 數組操作必須熟練運用的10個方法》

flat

flat() 方法創建一個新數組，其中所有子數組元素以遞歸方式連接到特定深度。

語法：array.flat(depth)

• array ： flat() 方法將在給定的數組中使用。
• depth：可選參數，指定展平的深度，默認情況下，深度為 1。

此方法會按照一個可指定的深度遞歸遍歷數組，并將所有元素與遍歷到的子數組中的元素合并為一個新數組返回。

const arr = [[1, 2], [3, 4], 5];
console.log(arr.flat()); // [ 1, 2, 3, 4, 5 ]

flat() 方法也會移除數組中的空項：

const arr = [[1, 2], , [3, 4], 5];
console.log(arr.flat()); // [ 1, 2, 3, 4, 5 ]

在一些復雜的場合，數組的層級不單一比較復雜的情況下，不必去逐個計算數組的嵌套深度，可以借助參數 Infinity ，就可以將所有層級的數組展平。

const arrVeryDeep = [[1, [2, 2, [3, [4, [5, [6]]]]], 1]];

console.log(arrVeryDeep.flat(Infinity)); // [ 1, 2, 2, 3, 4, 5, 6, 1 ]

flatMap

flatMap() 方法首先使用映射函數映射每個元素，然后將結果壓縮成一個新數組。它與 map 連著深度值為 1 的 flat() 幾乎相同，但 flatMap() 通常在合并成一種方法的效率稍微高一些。

語法

// Arrow function
flatMap((currentValue) => { ... } )
flatMap((currentValue, index) => { ... } )
flatMap((currentValue, index, array) => { ... } )
// Callback function
flatMap(callbackFn)
flatMap(callbackFn, thisArg)
// Inline callback function
flatMap(function(currentValue) { ... })
flatMap(function(currentValue, index) { ... })
flatMap(function(currentValue, index, array){ ... })
flatMap(function(currentValue, index, array) { ... }, thisArg)

• callbackFn：處理新數組元素的回調函數，接收三個參數
  • currentValue：數組中正在處理的當前元素。
  • index：可選參數，數組中正在處理的當前元素的索引。
  • array：可選參數，調用了數組 map()。
• thisArg：執行 callbackFn 時用作 this 的值

此方法返回一個新數組的值，其中每個元素都是通過回調函數的處理過的結果，并將其展平到深度為 1。

const userRunning1 = {
    movements: [1000, 4500, 500, 1200],
};
const userRunning2 = {
    movements: [2000, 4500, 2500, 12000],
};
const userRunning3 = {
    movements: [10000, 5000, 1500, 800],
};
const allRunning = [userRunning1, userRunning2, userRunning3];
// flat
const overalDistance = allRunning
    .map((acc) => acc.movements)
    .flat()
    .reduce((acc, mov) => acc + mov, 0);
console.log(overalDistance); // 45500
// flatMap
const overalDistance2 = allRunning
    .flatMap((acc) => acc.movements)
    .reduce((acc, mov) => acc + mov, 0);
console.log(overalDistance2); // 45500

上述代碼通過 flat() 方法和 flatMap() 方法來解決同樣問題，將所有用戶的跑步記錄進行累加。

flatMap() 展平的深度值為 1 ，而flat() 可以指定多級。