更靈活的 Map ：array-flatMap--

map() 方法創建一個新數組，這個新數組由原數組中的每個元素都調用一次提供的函數後的返回值組成。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

但有時，我們需要跳過數組中的某些元素，以上面的例子爲例，當我們需要跳過元素 1 時，可以結合 filter 方法：

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1
    .filter(x => x !== 1)
    .map(x => x * 2);

console.log(map1);
// expected output: Array [8, 18, 32]

使用 map 和 filter 結合的方式固然可以解決我們的需求，但多個方法的結合讓代碼看起來不那麼簡潔易讀，有沒有更簡短的方式來實現呢？

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

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.flatMap(x => x === 1? [] :[ x*2 ])

console.log(map1);
// expected output: Array [8, 18, 32]

flatMap 能用於在 map 期間增刪項目（也就是修改 items 的數量）。換句話說，它允許你遍歷很多項使之成爲另一些項（靠分別把它們放進去來處理），而不是總是一對一。從這個意義上講，它的作用類似於 filter 的對立面。只需返回一個 1 項元素數組以保留該項，返回一個多元素數組以添加項，或返回一個 0 項元素數組以刪除該項。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/G_GeaOV9CdK2lcVbj1zNag