如何使用 ES10 的 flatMap 方法

ES10 中新增了 flatMap 方法，它可以让我们更方便地对多维数组进行操作。在前端开发中，如果我们需要对一个多维数组进行操作，使用 flatMap 方法可以让代码更加简洁、易读。

flatMap 方法简介

flatMap 方法是数组对象的一个方法，它可以将一个多维数组“打平”，返回一个新的一维数组。其语法如下：

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

其中，callback 是一个函数，它可以接收三个参数：

• currentValue：当前元素的值。
• index：当前元素的索引。
• array：当前元素所属的数组对象。

flatMap 方法会对数组中的每个元素调用 callback 函数，并将返回值“打平”成一个新的数组。如果 callback 返回的是一个数组，那么这个数组会被“打平”到结果数组中。

flatMap 方法的使用

我们可以通过一个示例来看看 flatMap 方法的使用：

const arr = [1, 2, 3, 4];

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

console.log(result); // [2, 4, 6, 8]

上面的代码中，我们定义了一个数组 arr，然后调用 flatMap 方法对其进行操作。在 callback 函数中，我们将每个元素乘以 2，并将结果放入一个新的数组中。最终，我们得到了一个新的一维数组 [2, 4, 6, 8]。

如果 callback 返回的是一个多维数组，那么这个数组会被“打平”到结果数组中。我们可以通过下面的示例来看看这个过程：

const arr = [[1, 2], [3, 4]];

const result = arr.flatMap((item) => item.map((i) => i * 2));

console.log(result); // [2, 4, 6, 8]

上面的代码中，我们定义了一个二维数组 arr，然后调用 flatMap 方法对其进行操作。在 callback 函数中，我们对每个子数组调用 map 方法，将每个元素乘以 2，并将结果放入一个新的数组中。最终，我们得到了一个新的一维数组 [2, 4, 6, 8]。

flatMap 方法的注意事项

在使用 flatMap 方法时，需要注意以下几点：

• flatMap 方法只能“打平”一层数组，如果要“打平”多层数组，需要使用多次 flatMap 方法。
• 如果 callback 返回的是一个类似于 undefined、null、NaN 或空字符串的值，则会被忽略。
• flatMap 方法会跳过数组中的空元素，不会将它们“打平”到结果数组中。

总结

ES10 中新增的 flatMap 方法可以让我们更方便地对多维数组进行操作。在前端开发中，如果我们需要对一个多维数组进行操作，使用 flatMap 方法可以让代码更加简洁、易读。但是需要注意，flatMap 方法只能“打平”一层数组，如果要“打平”多层数组，需要使用多次 flatMap 方法。

示例代码

const arr = [[1, 2], [3, 4]];

const result = arr.flatMap((item) => item.map((i) => i * 2));

console.log(result); // [2, 4, 6, 8]

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f9c159d10417a2225a8553