详解 ES10 中的 flatMap() 方法逐层展开数组-JavaScript中文网-JavaScript教程资源分享门户

数组是前端开发中最重要的数据结构之一。在实际的开发中，经常会遇到需要展开嵌套数组的情况。在 ES10 中新增的 flatMap() 方法能够帮助开发者逐层展开数组，是个十分实用的方法。本文将详细介绍 flatMap() 方法的用法，包括其作用、语法、返回值以及示例代码等内容。

flatMap() 方法的作用

flatMap() 方法是 ES10 新增的一个用于数组的方法，其作用是在展开数组的同时，还能够在处理完每个元素后，使用新的函数进行映射。相对于普通的 flat() 方法来说，flatMap() 可以直接对每个元素进行处理，返回一个新的展开后的数组。

flatMap() 方法的语法

flatMap() 方法的语法比较简单，其函数签名如下：

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

其中，array 表示要展开的数组，callback 函数用于对每个元素进行处理，currentValue 表示当前处理的元素，index 表示当前元素的索引值，array 表示被处理的数组本身。

flatMap() 方法的返回值

flatMap() 方法返回的是一个新的数组，并不改变原来的数组。具体来说，它将原数组所有嵌套的数组展开后，再对每个元素进行 callback 函数处理，最后将结果装到一个新数组里返回。

具体来说，flatMap() 方法的返回值有以下三种情况：

callback 函数返回一个数组，会被合并到输出的数组中
callback 函数返回一个非数组的值，不会被展开，直接合并到输出的数组中
callback 函数没有返回值，也不会在输出的数组中添加任何元素

值得注意的是，返回的这个新数组的元素个数不一定等于原始数组中的元素个数乘以展开后的数组元素个数之和，因为 callback 函数本身可能会过滤掉某些元素。

使用 flatMap() 方法逐层展开数组

有了 flatMap() 方法，我们可以很容易地逐层展开数组。下面是一个简单的例子，用于说明 flatMap() 方法的用法：

//展开嵌套数组
let arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
let flatArray = arrayOfArrays.flatMap(x => x);
console.log(flatArray);

这个例子中，我们通过对一个嵌套数组使用 flatMap() 方法，将每个内部数组中的元素都展开成为数组 flatArray 的元素。在这个例子中，输出的结果为 [ 1, 2, 3, 4, 5, 6 ]。

除此之外，flatMap() 方法还可以配合其他的数组方法一同使用。例如，我们可以使用它来进行数组去重：

//使用 flatMap() 方法去重
let arrayWithDuplicates = [1, 2, 3, 4, 5, 5];
let uniqueArray = arrayWithDuplicates.flatMap((x, i, a) => a.indexOf(x) === i ? [x] : []);
console.log(uniqueArray);

在这个例子中，我们使用 flatMap() 方法去重了一个数组 arrayWithDuplicates，具体来说就是判断 currentIndex 是否等于 firstIndexOf x，如果是的话，返回一个包含 x 的数组；否则返回一个空数组。通过这样的操作，我们可以得到一个去重后的数组 [ 1, 2, 3, 4, 5 ]。

总结

使用 flatMap() 方法可以非常方便地对数组展开，使其更易于处理。它的语法简单，使用方便，而且还支持一些高级用法，例如配合其他方法去重、过滤等等。总之，掌握 flatMap() 方法无疑会提高前端开发效率，值得深入学习。

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