更好用的map函式 flatMap

undefined發表於2022-01-13
函式

更智慧的 JavaScript 對映器：array.flatMap()

原文： https://dmitripavlutin.com/ja...

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]

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

對於需要一對一對映的情況，這意味著對映的陣列將具有與原始陣列相同數量的專案，array.map()效果很好。

但是，如果您需要將陣列的數量加倍並從對映中跳過零怎麼辦？

直接使用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]

doubled陣列現在包含numbers乘以 2 的項，並且也不包含任何零。

好的，對映和過濾器陣列的array.map()組合array.filter()。但是有更短的方法嗎？

是的！感謝array.flatMap()方法，您只需一個方法呼叫即可執行對映和刪除專案。

以下是如何使用array.flatMap()返回一個新的對映陣列，其中專案加倍，同時過濾零0：

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() function 接受一個回撥函式作為引數並返回一個新的對映陣列：

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

回撥函式在原始陣列中的每個 itam 上呼叫，帶有 3 個引數：當前項、索引和原始陣列。回撥返回的陣列隨後被展平 1 級深度，並將結果項新增到對映陣列中。

此外，該方法接受第二個可選引數，指示this回撥內部的值。

您可以使用的最簡單的方法array.flatMap()是將包含專案作為陣列的陣列展平：

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

console.log(flatten); // logs [2, 4, 6]

在上面的示例arrays中包含數字陣列：[[2, 4], [6]]. 呼叫arrays.flatMap(item => item)將陣列展平為[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]

三、結論

array.flatMap() 如果你想將一個陣列對映到一個新陣列，方法是要走的路，但也可以控制你想新增多少項到新的對映陣列。

的回撥函式array.flatMap(callback)使用 3 個引數呼叫：當前迭代項、索引和原始陣列。然後從回撥函式返回的陣列在 1 級深度展平，並將生成的項插入到生成的對映陣列中。

請注意，如果您只想將單個專案對映到單個新值，請儘量使用標準array.map().

相關文章