在 ECMAScript 2021 中，Array 原型（Array.prototype）新增了一个 flatMap 数组方法，其作用是通过先映射后展平的方式，对原数组进行一次数据转换。本文将介绍这个方法的详细用法和效果，并通过示例代码进行演示。
flatMap() 方法的用法
语法
flatMap() 方法的语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中：
arr是被调用的数组；callback是用来处理数组元素的函数；currentValue表示当前处理的数组元素；index表示当前处理的数组元素的下标；array表示当前正在处理的数组；thisArg是执行callback函数时的上下文对象。
参数说明
callback 函数的返回值可以是任何值，需要注意的是：
- 返回普通数组，会将原数组展平一层；
- 返回嵌套数组，则与
flat()方法一样会展平嵌套数组中的元素； - 返回值为
null或undefined，会被跳过； - 如果回调函数不改变元素个数，返回的数组与原数组的长度相同；
- 如果回调函数改变了元素个数，返回的数组长度可能与原数组不相等。
示例说明
下面是一个使用 flatMap() 方法的示例：
const arr = [1, 2, 3, 4, 5]; const result = arr.flatMap(x => [x * 2]); console.log(result); // [2, 4, 6, 8, 10]
以上代码中，result 的值为 [2, 4, 6, 8, 10]，其中数组元素是在原数组的基础上，每个元素都变成了原数组元素的两倍。
flatMap() 方法的效果
相较于 ES6 引入的 map() 和 flat() 方法，flatMap() 特别适用于一些需要同时进行映射和展平操作的情况。
例如，当我们需要统计某篇英文文章中各单词的出现次数时，可以先将每一个单词转化为其出现次数的数组，再用 flatMap 将所有数组展平到一个数组，并通过 reduce 方法进行累加，得到单词的个数最终统计结果。
为了演示具体效果，可以试试这段代码：
-- -------------------- ---- -------
----- --- - ------ ----- ----- ---------- ------- -------
----- ------ - ---
-------- --
------------- -- ---------------
------------- ---- -- -
-------- - ---------- - --------- - ---
------ ----
-- ----
--------------------该代码将字符串 str 按照空格分割，并将每个单词用 split('') 方法转换为字母数组。再将这些数组通过 flatMap() 方法展平，并最终统计出每个字母在该字符串中出现的个数。
运行结果：
{ h: 2, e: 4, l: 7, o: 6, w: 2, r: 2, d: 2, j: 1, a: 2, v: 1, s: 1, c: 1, b: 1, y: 1 }可以看到，得到的统计结果正确，并且代码相对简洁。
总结
flatMap() 方法是 ES12 中一个很有用的新增方法，通过将 Array.prototype 中的 map 和 flat 两个方法结合起来，可以更加简洁地完成一些比较复杂的数组操作。此外，值得一提的是，flatMap() 还支持 thisArg 可选参数，使得我们可以在回调函数中方便地使用不同上下文对象进行元素处理。在以后的项目中，我们也可以更加灵活地使用该方法，来实现更加高效和简单的代码解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba8774add4f0e0ff30e711