更智能的 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().