厲害了，一個更智慧的 JavaScript 對映器：array.flatMap()

前端小智發表於2022-02-01
JavaScript
作者：Dmitri Pavlutin
譯者：前端小智
來源：dmitripavlutin
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

array.map() 是一個非常有用的對映函式：它接收一個陣列和一個對映函式，然後返回一個新的對映陣列。

然而，有一個替代 array.map()的方法：array.flatMap()（從ES2019開始可用）。這個方法給了我們對映的能力，但也可以在生成的對映陣列中刪除甚至新增新的專案。

1. 更加智慧的對映器

有一個數字陣列，我們要如何建立一個新的陣列，使用每個數字加倍？

使用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_p...

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

對於需要一對一對映的情況，也就是說，對映後的陣列與原始陣列的項數相同，array.map()的效果非常好。

但如果我們需要將一個陣列的數字翻倍，同時跳為0的項，該怎麼辦？

直接使用 array.map() 是不可能的，因為該方法總是建立一個對映的陣列，其項數與原陣列相同。但是我們可以使用 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_p...

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

必須滴。使用 array.flatMap() 方法，只需呼叫一個方法就可以執行對映和刪除專案。

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_p...

通過只使用 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_p...

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

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

例如，正如你在上一節中所看到的，可以通過將專案加倍來建立一個新的陣列，但同時也要刪除 0。

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

現在，我們來看下它是怎麼工作的。

如果當前項為 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_p...

3: 總結

如果你想把一個陣列對映到一個新的陣列中，同時又能控制你想在新的對映陣列中新增多少項，那麼 array.flatMap() 方法就是一個好辦法。

array.flatMap(callback) 的回撥函式被呼叫，有3個引數：當前迭代的項、索引和原始陣列。然後，從回撥函式返回的陣列在1層深處被扁平化，得到的專案被插入到所產生的對映陣列中。

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

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://dmitripavltin.com/jav...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章