如何使用 ECMAScript 2020 中 Array.prototype.flatMap 方法

在 ECMAScript 2020 中，新增了一个 Array.prototype 上的方法：flatMap。它是 flatten 和 map 方法的组合体，可以大大简化对二维数组的操作。本文就来介绍一下 flatMap 方法的使用方法和一些注意事项。

flatMap 方法的作用

flatMap 方法可以将当前数组中的每个元素通过映射函数进行转换，然后将结果压缩成一个新的数组。与 map 方法的不同之处在于，flatMap 方法会将结果数组展平一层，提供更直观的访问方式。

具体用法如下：

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

const arr2 = arr1.flatMap(x => [x * 2]);

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

上面的例子中，flatMap 方法将当前数组 arr1 中的每个元素都乘以 2，并将结果展开到一个新的数组 arr2 中。

flatMap 方法的实现

flatMap 方法的实现比较简单，本质上是在调用 Array.prototype.map 方法之后再调用 Array.prototype.flat 方法，如下所示：

Array.prototype.flatMap = function (callback) {
  return this.map(callback).flat();
};

如果当前数组中的元素本身包含一个数组，则需要使用 depth 参数，指定需要展开的层数：

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

const arr2 = arr1.flatMap(x => [x * 2]);

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

const arr3 = arr1.flatMap(x => [x * 2], 1);

console.log(arr3); // [2, 4, 3, 4]

在上面的例子中，arr1 数组中包含一个子数组 [3, 4]，如果不指定 depth 参数，flatMap 方法会将其展开到一维数组中；如果指定 depth 为 1，则只展开一层，即将子数组变成两个单独的元素。

flatMap 方法的注意事项

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

1. flatMap 方法返回一个新的数组，不会修改原来的数组。
2. flatMap 方法遍历的元素是当前数组的所有非空元素。
3. 如果映射函数中返回了一个空数组，将会被忽略掉。

总结

使用 ECMAScript 2020 中新增的 Array.prototype.flatMap 方法可以大大简化对二维数组的操作。在实际开发中，我们可以将其用于数据处理、二维变一维、提取数据等操作。值得一提的是，flatMap 方法只是在 map 和 flat 方法的基础上做了简单的封装，如果需要自己实现，只要按照上面的方式实现即可。

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