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

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

1. 更加智能的映射器

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

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

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

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

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

直接使用 array.map() 是不可能的，因?yàn)樵摲椒偸莿?chuàng)建一個(gè)映射的數(shù)組，其項(xiàng)數(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)用一個(gè)方法就可以執(zhí)行映射和刪除項(xiàng)目。

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()，你可以將一個(gè)數(shù)組映射到另一個(gè)數(shù)組，但也可以從映射中跳過某些元素。

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

2. array.flatMap()

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

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

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

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

使用 array.flatmap()最簡單的方法是將包含項(xiàng)目的數(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ù)組項(xiàng)的數(shù)量：

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

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

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

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

如果當(dāng)前項(xiàng)為 0，回調(diào)函數(shù)返回一個(gè)空數(shù)組 []。這意味著當(dāng)被扁平化時(shí)，空數(shù)組[]沒有提供任何值。

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

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

例如，下面的代碼片段通過添加兩倍和三倍的數(shù)字將一個(gè)數(shù)字?jǐn)?shù)組映射到一個(gè)新數(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é)

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

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

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

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