理解 Array.prototype.flatMap

让我们从地图开始

上周我们讨论了ES2019 中可用的新 flat 方法。

本周，我们将深入探讨flatMap！

在 JavaScript 中，数组有一个名为的内置函数map。它接受一个函数作为参数，并使用该函数对数组中的每个元素进行操作。类似这样。

let arr = [1, 2, 3]

let result = arr.map((item) => item * 2);

result然后是一个数组，其中每个项目都arr乘以二。

[2, 4, 6]

您还可以map在每个数组元素内创建一个数据结构！让我们来看这个例子。

let arr = [1, 2, 3]

let result = arr.map((item) => [item, item * 2]);

在这种情况下，我们的结果是这样的。

[[1, 2],[2, 4],[3, 6]]

想要将其弄平是很常见的。

所以你有

let arr = [1, 2, 3]

let result = arr.map((item) => [item, item * 2]).flat();

[1, 2, 2, 4, 3, 6]

有了flatMap这些就变得更加简单了！

let arr = [1, 2, 3]

let result = arr.flatMap((item) => [item, item * 2]);

[1, 2, 2, 4, 3, 6]

这是同样的事情。

的默认参数flat是 1，而不是 Infinity。这很重要，因为flatMap方法是一样的。我们来看一个例子。

let arr = [1, 2, 3]

let result = arr.flatMap((item) => [item, [item]]);

[ 1, [1], 2, [2], 3, [3] ]

该数组未完全展平，因为flatMap仅展平了一个级别。

flatMap 是这个流行模式的一个很棒的内置函数！快来试试吧，然后告诉我你的想法。