在前端开发中，经常需要对数组进行操作，拼接、分割、筛选等等。而现在，ES10 已经在 Array 的 prototype 中新增了 flatMap() 方法，让我们可以更加灵活和方便地进行数组操作。
flatMap() 的作用和用法
先来了解一下 flatMap() 的具体作用和使用方法。首先，flatMap() 是一个组合方法，它结合了 map() 和 flat() 两个方法的功能。
简单来说，flatMap() 的作用是将原数组中的每个元素转换成一个新的数组，并将其拍平为一个新数组。也就是说，它会对每个元素执行一个回调函数，并返回一个新数组。
具体的语法格式为：
------------------------------------- ------- ---------- ---------
其中，callback 函数分别接收当前值 currentValue，它的索引 index，以及原数组 array。并将返回一个数组，flatMap() 会将这个数组与其他数组合并，最终得到一个新的扁平化数组。
下面我们来看一个具体的实例：
----- --- - --- -- -- ----- ------ - ---------------- -- ------ --------- -------------------- -- --- -- -- -- -- --
这里我们定义了一个名为 arr 的数组，并使用 flatMap() 方法对数组中的每个元素执行一个回调函数，生成一个值为 [item, item*2] 的数组，然后将它们合并成一个新的数组。
flatMap() 和 map() 的区别
我们已经知道 flatMap() 是一个组合方法，与 map() 的功能有些相似。那么它们之间的区别在哪里呢？
首先，两者的主要区别就是返回值不同。map() 方法返回一个新数组，而 flatMap() 方法返回一个扁平化的新数组。
其次，如果在 map() 方法中，回调函数返回的是一个数组，那么最终得到的结果是一个嵌套数组。而在 flatMap() 中，回调函数返回的是一个数组，那么该数组会直接被合并到最终的扁平化数组中。
下面是一个例子，其中函数 func 返回的是一个数组：
----- --- - --- -- --- ----- ------- - ------------ -- ------ --------- ----- ------- - ---------------- -- ------ --------- --------------------- -- ---- --- --- --- --- --- --------------------- -- --- -- -- -- -- --
flatMap() 和 flat() 的区别
除了与 map() 方法的区别，flatMap() 方法还与 flat() 方法有一定的关系。
flatMap() 的作用在于先对数组中的每个元素执行一个回调函数，生成一个嵌套数组，然后再将这个嵌套数组扁平化成一个新数组。
而 flat() 方法则是将数组一维化，即将嵌套数组变成一个新的一维数组。
下面是一个例子，其中数组 newArr 是一个嵌套数组：
----- --- - --- -- --- ---- ----- ------- - ---------------- -- ------ --------- ----- ------- - ----------- --------------------- -- --- -- -- -- -- -- --------------------- -- --- -- -- --
可以看到，flatMap() 方法将嵌套数组也转换成了一个新数组，而 flat() 方法则是只将嵌套数组变成了一维数组。
注意事项
在使用 flatMap() 方法时，需要注意一些细节问题。
首先，回调函数中需要返回一个数组，否则会出现类型错误。如果回调函数返回的是一个非数组类型的对象，那么 flatMap() 会直接将这个对象转换成一个数组，然后将它加入结果数组中。
其次，如果数组中存在空元素，那么 flatMap() 方法会将它们作为 undefined 处理，并将它们转换成 NaN。因此，在使用 flatMap() 方法时一定要注意对数组进行筛选，删除空元素。
最后，如果使用 flatMap() 进行数组操作，需要确保当前的 JavaScript 运行环境支持 ES10。
总结
本文对 ES10 的 Array.prototype.flatMap() 方法进行了详细的讲解和示例，以及和 map() 和 flat() 方法之间的区别和联系进行了介绍。在日常的前端开发中，合理运用 flatMap() 方法可以在数组操作方面事半功倍，同时也需要注意一些使用技巧和注意事项，才能更好地使用该方法加速项目开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ab591f48841e989472c78c