ECMAScript 2019 (ES10)：Array.prototype.flatMap() 解决数组嵌套问题

ECMAScript 2019 (ES10)：Array.prototype.flatMap() 解决数组嵌套问题

在开发中，我们常常需要处理嵌套数组，例如将一个二维数组转换成一维数组，或者将一个函数的返回值嵌套到另一个数组中。在 ECMAScript 5(ES5) 中，我们可以使用 Array.prototype.concat.apply([], array) 或者 Array.prototype.reduce() 来处理嵌套数组。但是这些方法会产生一些问题，比如不够简洁，不够直观，而且这些方法返回值也不符合期望。

幸运的是，ECMAScript 2019 (ES10) 引入了一种新方法 Array.prototype.flatMap() 解决数组嵌套问题。

Array.prototype.flatMap()

Array.prototype.flatMap() 方法首先对数组中的每个元素执行一个映射函数，然后将结果压缩成一个新数组。flatMap() 方法返回一个新数组，该数组是通过使用函数映射每个元素的结果，并将其压缩成一个数组而生成的。

需要注意的是，flatMap() 方法和 map() 方法的区别在于它可以处理嵌套数组并返回一个平坦的数组。flatMap() 方法通过展开数组并将元素传递给映射函数来解决嵌套数组问题。

下面我们来看一下如何使用 Array.prototype.flatMap() 方法：

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

上面的代码中，我们将一个数组中的每个元素映射成一个包含两个元素的数组，然后使用 flatMap() 方法将这些元素压缩成一个新的一维数组。

假设我们有一个嵌套的数组：

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

上面的代码中，我们使用 flatMap() 方法将嵌套的数组 arr 展开成一个一维数组。

另外，flatMap() 还可以解决 undefined 和 null 的问题。

const arr = [1, 2, 3, 4, null, undefined];
const result = arr.flatMap((x) => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8]

总结

ES10 新方法 Array.prototype.flatMap() 可以解决数组嵌套问题，返回一个平坦的数组。flatmap() 方法可以更简洁、直观地解决嵌套数组问题，同时还可以处理 undefined 和 null 的问题。如果你经常与嵌套数组打交道，那么 flatMap() 方法一定会成为你代码实现的重要工具之一。

参考链接

1. Array.prototype.flatMap()

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