详解 ECMAScript 2020 中的数组扁平化方法 flatMap-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 中，新增了一个非常实用的数组方法 —— flatMap。它不仅能够对数组进行映射操作，还能够将映射后的结果扁平化成一个新的数组。本文将详细介绍 flatMap 方法的用法、实现原理以及示例代码，帮助大家更好地理解和应用这个方法。

什么是 flatMap 方法？

flatMap 方法是数组实例的一个新方法，它结合了 map 和 flat 两个方法的功能。具体来说，它对数组中的每个元素都执行一个映射函数，然后将映射后的结果扁平化成一个新的数组。

相比于使用 map 和 flat 两个方法来实现同样的功能，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 方法对每个子数组执行了一个简单的映射函数 item => item，将子数组直接返回。最后，flatMap 方法将映射后的结果扁平化成了一个一维数组 flatArr。可以看到，使用 flatMap 方法比使用 map 和 flat 两个方法更加简洁和直观。

flatMap 方法的语法和参数

flatMap 方法的语法和参数与 map 方法类似，都接受一个函数作为参数，并返回一个新的数组。具体来说，flatMap 方法的语法如下：

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

其中，callback 是一个函数，接受三个参数：

currentValue：当前正在处理的元素。
index：当前正在处理的元素的索引。
array：调用 flatMap 方法的数组。

callback 函数必须返回一个数组，表示对当前元素的映射结果。flatMap 方法将所有映射结果扁平化成一个新的数组，并返回这个新数组。

flatMap 方法还可以接受一个可选的 thisArg 参数，用来指定 callback 函数中的 this 值。如果不指定 thisArg 参数，则默认为 undefined。

flatMap 方法的实现原理

flatMap 方法的实现原理比较简单，可以分为两个步骤：

对数组中的每个元素执行 callback 函数，得到一个新的数组。
将所有新数组扁平化成一个新的数组。

其中，第二个步骤使用了 Array.prototype.flat 方法。具体来说，flatMap 方法的实现如下：

Array.prototype.flatMap = function(callback, thisArg) {
  // 对数组中的每个元素执行 callback 函数，得到一个新数组
  const mappedArr = this.map(callback, thisArg);
  // 将所有新数组扁平化成一个新数组
  return mappedArr.flat();
};

需要注意的是，由于 flatMap 方法使用了 map 方法，因此 callback 函数中的 this 值也可以通过 thisArg 参数来指定。

flatMap 方法的应用示例

下面我们来看几个实际应用 flatMap 方法的示例。

将字符串数组转换为数字数组

假设我们有一个字符串数组，其中每个元素都表示一个数字。我们希望将这个字符串数组转换为一个数字数组。可以使用 flatMap 方法来实现：

const strArr = ['1', '2', '3', '4', '5'];
const numArr = strArr.flatMap(item => Number(item));
console.log(numArr); // [1, 2, 3, 4, 5]

上面的代码中，我们首先定义了一个字符串数组 strArr，然后使用 flatMap 方法对每个字符串执行了一个映射函数 item => Number(item)，将字符串转换为数字。最后，flatMap 方法将映射后的结果扁平化成了一个数字数组 numArr。

将二维数组扁平化并去重

假设我们有一个二维数组，其中包含了一些重复的元素。我们希望将这个二维数组扁平化并去重，得到一个一维数组。可以使用 flatMap 方法和 Set 对象来实现：

const arr = [[1, 2], [3, 4], [2, 3, 4]];
const uniqueArr = arr.flatMap(item => item).reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4]

上面的代码中，我们首先定义了一个二维数组 arr，然后使用 flatMap 方法将其扁平化成一个一维数组。接着，我们使用 reduce 方法和 Set 对象对这个一维数组进行去重操作，得到了一个新的数组 uniqueArr。

将多个数组合并成一个数组

假设我们有多个数组，我们希望将它们合并成一个数组。可以使用 flatMap 方法来实现：

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [6, 7, 8, 9];
const mergedArr = [arr1, arr2, arr3].flatMap(item => item);
console.log(mergedArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

上面的代码中，我们首先定义了三个数组 arr1、arr2 和 arr3，然后使用 flatMap 方法将它们合并成一个新的数组 mergedArr。

总结

flatMap 方法是 ECMAScript 2020 中新增的一个非常实用的数组方法，它能够对数组进行映射操作，并将映射后的结果扁平化成一个新的数组。本文介绍了 flatMap 方法的用法、实现原理以及一些实际应用示例。希望本文能够帮助大家更好地理解和应用这个方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656ec892d2f5e1655d70c2e3