更好用的map函数 flatMap

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