如何在 ES10 及以上版本中使用 ECMAScript 2019 中的 flatMap

在 ECMAScript 2019 中引入了一个新的数组方法 flatMap()，这个方法可以让我们在一行代码中完成多种操作，大大简化了代码的编写。本篇文章将会详细地介绍如何在 ES10 及以上版本中使用 flatMap()，并提供一些示例代码方便学习和实践。

flatMap() 方法的定义

在深入介绍具体如何使用 flatMap() 方法之前，我们先来看一下 flatMap() 方法的定义：

array.flatMap(function callback(currentValue[, index[, array]]) {
  // return element for new array
}[, thisArg])

从上面的代码可以看出，flatMap() 方法接受一个回调函数 callback，这个回调函数会被 flatMap() 方法中的每一个元素调用。callback 函数中可以使用 currentValue、index 和 array 三个参数，来执行相应的操作并返回一个新的元素。flatMap() 方法在整个执行过程中会将所有的 callback 函数的返回值收集起来，返回一个新的数组。

需要注意的是，flatMap() 方法不仅仅只能操作一维数组，它可以处理任意维度的数组，并且会自动将返回的数组进行扁平化处理。

使用 flatMap() 方法

下面我们将通过一些示例代码来详细介绍如何使用 flatMap() 方法：

将二维数组扁平化

使用 flatMap() 方法可以非常容易地将一个二维数组扁平化，代码如下：

const arr = [[1, 2], [3, 4], [5, 6]];
const flatArr = arr.flatMap(item => item);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

从上面的代码可以看出，我们首先定义了一个二维数组 arr，然后使用 flatMap() 方法和一个非常简单的回调函数将数组扁平化，最后打印出了扁平化后的数组。

使用 flatMap() 方法进行操作

flatMap() 方法可以非常方便地在一行代码中完成多种操作，例如将一个字符串数组中的每个字符串都转换成数字并乘以 2，示例代码如下：

const arr = ['1', '2', '3'];
const result = arr.flatMap(item => parseInt(item) * 2);
console.log(result); // [2, 4, 6]

从上面的代码可以看出，我们首先定义了一个字符串数组 arr，然后使用 flatMap() 方法和一个回调函数将数组中的字符串转换成数字并乘以 2，最终得到了一个新的数组。

使用 flatMap() 方法处理嵌套数组

flatMap() 方法还可以很方便地处理嵌套数组，示例代码如下：

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.flatMap(item => item.map(i => i * 2));
console.log(result); // [2, 4, 6, 8, 10, 12]

从上面的代码可以看出，我们首先定义了一个二维数组 arr，然后使用 flatMap() 方法和一个回调函数中的 map() 方法将多维数组扁平化，并将每一个元素都乘以 2，最终得到了一个新的数组。

总结

通过本篇文章的介绍，我们可以看出使用 flatMap() 方法可以非常方便地进行数组操作，并且可以大大简化代码的编写。在实际使用中，我们可以结合具体的业务需求来使用 flatMap() 方法，以达到更高效的编程效果。

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