什么是 Array.prototype.flatMap？
Array.prototype.flatMap 是 ES7 （ ECMAScript 2016）中新增的数组方法，它的作用是将数组扁平化后，对每个元素执行一个指定的函数，然后将结果组成一个新的数组。
具体来说，flatMap 操作会对原数组中的每个元素执行一个指定的函数，然后将所有函数执行的结果按照顺序组成一个新的数组返回。
举个例子：
----- --- - --- -- --- ----- ------ - ------------- -- --- - - ---- -------------------- -- --- -- -- -- -- --
上面的例子中，flatMap 对数组 [1, 2, 3] 执行了一个函数 x => [x, x * 2]，这个函数的作用是对每个元素都返回一个数组，包含原始值和原始值乘以 2，最终得到的结果数组是 [1, 2, 2, 4, 3, 6]。
flatMap 的使用技巧
扁平化嵌套数组
一个常见的用例是扁平化嵌套数组。在 ES6 中，我们可以使用 Array.prototype.flat 方法来实现这样的需求。但在数组元素嵌套层次较深的情况下，使用 flat 很容易出现回调地狱的情况。
使用 flatMap 可以避免回调地狱，让代码更加简洁。
----- --- - ---- --- --- --- --- ---- ----- ------ - ------------- -- --- -------------------- -- --- -- -- -- -- --
上面的例子中，我们将一个二维数组扁平化为一维数组。
移除数组中的空值
在实际项目中，我们有时需要相关的数据集中在一起，如下所示：
----- -------- - - - ----- ------- -------- ----------- --- ----------- -- - ----- ------- -------- ---- ---------- -- - ----- -------- -------- ---------- ------------ -- --
如果我们需要将所有用户的爱好都合并到一个数组中，可以使用 flatMap。由于 flatMap 会忽略返回值中的空值，我们可以把空值直接去掉。
----- ------- - --------------------- -- ---------------------- -- --- --------------------- -- ----------- ----------- ---------- --------- ------------
上面的代码中，我们使用 filter 方法去掉了数组中的空值。
实现类似 SQL 的 join 操作
我们可以利用 flatMap 实现多个有关联的数组的联接操作，类似 SQL 中的 join 操作。
例如，我们有两个数组，一个包含学生的成绩信息，另一个包含学生的基本信息：
----- ------ - - - --- -- ------ -- -- - --- -- ------ -- -- - --- -- ------ -- -- -- ----- ---- - - - --- -- ----- ------ -- - --- -- ----- ------ -- - --- -- ----- ------- -- --
我们可以使用 flatMap 将这两个数组合并，然后按照学生 ID 进行联接。
----- ------ - -------------------- -- - ----- ----------- - -------------- -- ------- --- ---------- ------ - --- --------- ----- ----------------- ------ ----------- -- --- -------------------- -- -- --- -- ----- ------- ------ -- -- - --- -- ----- ------- ------ -- -- - --- -- ----- -------- ------ -- --
总结
ES7 中新增的 Array.prototype.flatMap 方法可以用来在数组中执行指定操作，然后将结果组成一个新的数组。在实际项目中，可以使用 flatMap 来扁平化数组、移除数组的空值、实现类似 SQL 的 join 操作等。使用 flatMap 的好处是可以编写简洁的代码，避免回调地狱的情况。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c52640d20074f47a458f7a