在前端开发中，针对数组的操作是非常常见的，特别是在一些数据处理、数据转换等场景下。在 ES12 中，新增了一个很实用的数组方法: Array.prototype.flatMap()。它可以将一个嵌套的数组展开并映射成一个新数组，可以有效地降低代码复杂度。
什么是 Array.prototype.flatMap()？
Array.prototype.flatMap() 是在 ES12（ES2022）中新增的数组方法，它和 Array.prototype.map() 方法非常相似，都是将数组中的每个元素进行操作、映射到另一个值，并最终返回一个新的数组。不同之处在于，Array.prototype.flatMap() 方法还会去掉返回值中的空数组（[]）并将其展开，返回一个“扁平化”的新数组。
如何使用 Array.prototype.flatMap()？
基本语法如下：
arr.flatMap(callback[, thisArg])
参数：
callback：回调函数，用于处理每个元素的值，它返回一个新数组，该数组将与结果数组“扁平化”的插入。thisArg：可选，回调函数内部this值。
几个示例：
-- -------------------- ---- ------- ----- ---- - --- -- -- --- ----- ---- - --- -- -- --- ----- ------- - -------------- -- -- - ---- --------------------- -- --- -- -- -- ----- ------- - -------------- -- --- - - --- ------ --------------------- -- --- -- -- -- -- -- --- -- --- ----- ------- - ---------------- ------ -- --- -------- --------------------- -- --- -- -- -- -- -- -- --
如何优雅地使用 Array.prototype.flatMap()？
使用 Array.prototype.flatMap() 方法可以极大地降低使用数组操作时的代码复杂度，例如将一个数组中的字符串数字转换为数字类型：
const arr = ['1', '2', '3', '4']; const result = arr.flatMap(Number); console.log(result); // [1, 2, 3, 4]
这一行代码就取代了以下代码：
const arr = ['1', '2', '3', '4']; const result = arr.map(item => Number(item)); console.log(result); // [1, 2, 3, 4]
在处理嵌套数组时，Array.prototype.flatMap()也十分实用。如下例子，我们要求一个班上所有学生的平均成绩：
-- -------------------- ---- ------- ----- -------- - - - ----- ----- ------- ---- --- --- -- - ----- ----- ------- ---- --- --- -- - ----- ----- ------- ---- --- ---- - -- ----- ------ - --------------------- -- ------------- ----- -------- - ------------------------------ ---- -- --- - ---- - --------------- ---------------------- -- --
这里使用了 Array.prototype.flatMap() 获取所有学生的成绩，又通过 reduce() 方法求和并计算平均值，而没有写循环等冗余的代码。
总结
Array.prototype.flatMap() 方法让我们在数组操作时可以用更简洁、更优雅的方式替代冗长的循环、if 语句等代码，提高了代码的可读性，减少了出错的机率，同时也能很好地满足一些数据处理、数据转换等需求。在实践中，我们应该充分利用 Array.prototype.flatMap() 这个实用的工具，使我们的代码更加简洁易读，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1b875b5eee0b525914695