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

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

1. 更加智能的映射器

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

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

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 數(shù)組映射到一個新的數(shù)組，其中每個數(shù)字都被翻倍。

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

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

直接使用 array.map() 是不可能的，因為該方法總是創(chuàng)建一個映射的數(shù)組，其項數(shù)與原數(shù)組相同。但是我們可以使用 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() 方法，只需調(diào)用一個方法就可以執(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()，你可以將一個數(shù)組映射到另一個數(shù)組，但也可以從映射中跳過某些元素。

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

2. array.flatMap()

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

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

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

此外，該方法還接受第二個可選參數(shù)，表示回調(diào)內(nèi)部的 this 值。

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

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()除了簡單的扁平化之外，還可以做更多的事情。通過控制從回調(diào)中返回的數(shù)組項的數(shù)量：

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

例如，正如你在上一節(jié)中所看到的，可以通過將項目加倍來創(chuàng)建一個新的數(shù)組，但同時也要刪除 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，回調(diào)函數(shù)返回一個空數(shù)組 []。這意味著當被扁平化時，空數(shù)組[]沒有提供任何值。

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

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

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

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: 總結(jié)

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

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

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

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