array.map() 是一個非常有用的映射函數：它接收一個數組和一個映射函數，然后返回一個新的映射數組。

然而，有一個替代 array.map()的方法：array.flatMap()(從ES2019開始可用)。這個方法給了我們映射的能力，但也可以在生成的映射數組中刪除甚至添加新的項目。

1. 更加智能的映射器

有一個數字數組，我們要如何創(chuàng)建一個新的數組，使用每個數字加倍?

使用array.map()函數是一個好方法。

const numbers = [0, 3, 6];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // logs [0, 6, 12]

地址：https://jsfiddle.net/dmitri_pavlutin/7g5fz93y/

numbers.map(number => 2 * number) 將 number 數組映射到一個新的數組，其中每個數字都被翻倍。

對于需要一對一映射的情況，也就是說，映射后的數組與原始數組的項數相同，array.map()的效果非常好。

但如果我們需要將一個數組的數字翻倍，同時跳為0的項，該怎么辦?

直接使用 array.map() 是不可能的，因為該方法總是創(chuàng)建一個映射的數組，其項數與原數組相同。但是我們可以使用 array.map()和 array.filter() 的組合。

const numbers = [0, 3, 6];
const doubled = numbers
  .filter(n => n !== 0)
  .map(n => n * 2);
console.log(doubled); // logs [6, 12]

事例地址：https://jsfiddle.net/dmitri_pavlutin/cvtjyLpo/

array.map()和 array.filter() 可以解決問題，但有沒有更簡短的方法?

必須滴。使用 array.flatMap() 方法，只需調用一個方法就可以執(zhí)行映射和刪除項目。

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
  return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]

事例地址：https://jsfiddle.net/dmitri_pavlutin/j945qunz/

通過只使用 numbers.flatMap()，你可以將一個數組映射到另一個數組，但也可以從映射中跳過某些元素。

接著，我們來更詳細地看看 array.flatMap()是如何工作的。

2. array.flatMap()

array.flatMap() 函數接受一個回調函數作為參數并返回一個新的映射數組

const mappedArray = array.flatMap((item, index, origArray) => {
  // ...
  return [value1, value2, ..., valueN];
}[, thisArg]);

回調函數在原數組中的每個iteam上被調用，有3個參數：當前項、索引和原數組。然后，回調函數返回的數組被扁平化了1層，得到的項目被添加到映射的數組中。

此外，該方法還接受第二個可選參數，表示回調內部的 this 值。

使用 array.flatmap()最簡單的方法是將包含項目的數組扁平化

const arrays = [[2, 4], [6]];
const flatten = arrays.flatMap(item => item);
console.log(flatten); // logs [2, 4, 6]

事例地址：https://jsfiddle.net/dmitri_pavlutin/5rwvcz17/

但是array.flatMap()除了簡單的扁平化之外，還可以做更多的事情。通過控制從回調中返回的數組項的數量：

• 通過返回一個空數組從結果數組中刪除該項
• 通過返回一個帶有一個新值的數組 [newValue] 來修改映射的項
• 通過返回一個包含多個值的數組來添加新項: [newValue1, newValue2, ...]

例如，正如你在上一節(jié)中所看到的，可以通過將項目加倍來創(chuàng)建一個新的數組，但同時也要刪除 0。

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
  return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]

現(xiàn)在，我們來看下它是怎么工作的。

如果當前項為 0，回調函數返回一個空數組 []。這意味著當被扁平化時，空數組[]沒有提供任何值。

如果當前迭代項非零，則返回 [2 * number]。當扁平[2 * number]數組時，結果數組中只添加2 * number。

你也可以使用 array.flatMap()來增加映射的數組中的項目數量。

例如，下面的代碼片段通過添加兩倍和三倍的數字將一個數字數組映射到一個新數組:

const numbers = [1, 4];
const trippled = numbers.flatMap(number => {
  return [number, 2 * number, 3 * number];
});
console.log(trippled);
// logs [1, 2, 3, 4, 8, 12]

事例地址：https://jsfiddle.net/dmitri_pavlutin/k7p2x1ar/

3: 總結

如果你想把一個數組映射到一個新的數組中，同時又能控制你想在新的映射數組中添加多少項，那么 array.flatMap() 方法就是一個好辦法。

array.flatMap(callback) 的回調函數被調用，有3個參數：當前迭代的項、索引和原始數組。然后，從回調函數返回的數組在1層深處被扁平化，得到的項目被插入到所產生的映射數組中。

~完，我是刷碗智，新的一年我們一起洗刷刷!!!!!!

作者：Dmitri Pavlutin 譯者：前端小智 來源：dmitripavlutin 原文：https://dmitripavltin.com/javascrit-array-flatmap/