ES10（ECMAScript 2019）是 JavaScript 最新的 ECMAScript 规范版本，其中新增加了一些非常实用的方法。本文将介绍其中一项新增方法：flatMap。在前端开发中，flatMap 可以帮助我们更有效地处理数组数据，提高我们代码的可读性和可维护性。
flatMap 方法
flatMap 方法返回一个新数组，这个新数组是一个被“压平”过的数组，也就是将原数组的所有嵌套数组都“拍成”一维数组。同时，flatMap 方法还可以接受一个映射函数，这个映射函数可以用来将数组中每个元素都进行操作，并将操作后的结果放入一个新的数组中返回。
下面是 flatMap 方法的语法：
----- -------- - -------------------------------- ------- ---------- ---------
其中，callback 参数是一个回调函数，用于对数组元素进行操作，它可以接受三个参数：
- element：数组中正在处理的元素
- index（可选）：正在处理的元素在数组中的索引
- array（可选）：被处理的源数组
thisArg（可选）：当前执行 callback 函数时作为 this 值使用的对象。
flatMap 方法的应用
flatMap 方法可以用来将嵌套数组转换为一维数组，比如我们有一个二维数组：
----- --- - ---- --- --- --- --- ----
如果我们需要将这个数组压平为一维数组，以前我们可能需要这样写：
----- ------- - ----------------- ---- -- ----------------- ----
使用 flatMap 方法可以更加简洁：
----- ------- - ---------------- -- ------
flatMap 方法不仅可以将嵌套数组拍成一维数组，也可以用来对数组中的每个元素进行操作。比如我们有一个数组：
----- --- - --- -- -- -- ---
我们可以使用 flatMap 方法对每个元素都进行操作，比如将每个元素都乘以 2：
----- ------ - ---------------- -- ---- - --- -- --- -- -- -- ---
我们也可以使用 flatMap 方法对数组中的每个元素都生成新的数组，最后将所有的新数组合并成一个一维数组。例如，我们有一个数组：
----- ----- - ----- ------- ------ ----- ------ ------ ---- ---- ------ ----- ------ - ---------------- -- ---------- ---- -- ------- -------- -------- ------ -------- ------- ------ ------- ------
我们将字符串中的每个单词都拆分成了一个个单独的元素，并将它们都组成了一个新的一维数组。
另外，在使用 flatMap 方法时，你也可以传递一个可选的 thisArg 参数，用于在 callback 函数中指定 this 对象。比如：
----- --- - --- -- --- ----- --- - - -- - -- ----- ------ - -------------------- ------ - ------ ------ - ----- -- ----- -- --- -- --
其中，this 指向了 obj 对象，并将 obj.a 加上了数组中的每个元素得到了一个新的数组。
总结
ES10 中新增加的 flatMap 方法对于前端开发非常实用，无论是对于数组的压平还是对数组中每个元素的操作，都可以用这个方法优雅地实现。如果你还没有使用过 flatMap 方法，那么现在就开始试试吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64550656968c7c53b08b4207