JavaScript 對映器 array.flatMap()

2022-02-16 16:00:02

1. 更加智慧的對映器

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

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

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

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]

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]

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

但是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]

3. 總結

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

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

到此這篇關於JavaScript 對映器array.flatMap()的文章就介紹到這了,更多相關JavaScript 對映器內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

JavaScript 對映器 array.flatMap()

目錄

1. 更加智慧的對映器

2. array.flatMap()

3. 總結

熱門文章