ECMAScript 2019 增加了许多功能强大、实用的语言特性，其中包括 Array.prototype.flatMap 方法。本文将详细介绍这个方法的使用方法、意义，以及实用的案例。
什么是 Array.prototype.flatMap 方法？
Array.prototype.flatMap 是 ECMAScript 2019 中新增的一个数组方法，用于将嵌套数组“拍平”，例如下面这个例子：
const arr = [1, 2, [3, 4]]; const flatArr = arr.flatMap(num => num); console.log(flatArr); // [1, 2, 3, 4]
在这个例子中，嵌套的数组 [3, 4] 被“拍平”成了两个元素 3 和 4，与外层数组 [1, 2] 共同组成了新的平面数组 [1, 2, 3, 4]。
然而，这个方法不仅仅能够处理数组中的基本数据类型，它也可以处理复杂的嵌套结构，例如对象数组：
-- -------------------- ---- ------- ----- --- - - - --- -- ----- -------- -------- ----------- ----------- -- - --- -- ----- ------ -------- ---------- ---------- -- - --- -- ----- ---------- -------- ------------- ----------- - -- ----- ------- - -------------- --- ----- ------- -- -- ----------------- -- -- --- ----- ----- --- -- --------------------- -- - - --- -- ----- -------- ------ --------- -- - --- -- ----- -------- ------ ---------- -- - --- -- ----- ------ ------ -------- -- - --- -- ----- ------ ------ --------- -- - --- -- ----- ---------- ------ ----------- -- - --- -- ----- ---------- ------ ---------- - - --
在这个例子中，Array.prototype.flatMap 在处理嵌套数组时，使用一个回调函数作为参数，这个回调函数可以根据数组元素返回一个新的数组。
如何使用 Array.prototype.flatMap 方法？
使用 Array.prototype.flatMap 方法非常简单，只需要调用该方法并传入一个回调函数即可。回调函数有两个参数：
- 当前元素的值。
- 当前元素的索引。
回调函数必须返回一个数组，表示对该元素的处理结果。这些数组都将被自动“拍平”后返回成一个新的数组。下面是一个示例：
-- -------------------- ---- ------- ----- --- - - - --- -- ----- -------- ------ ---- --- --- -- - --- -- ----- ------ ------ ---- --- --- -- - --- -- ----- ---------- ------ ---- --- --- - -- ----- -------- - --- ----------- --- ----- ----- -- -- - - --- ----- ------ ------------------ -- -- --- - -- -- - ------------ - -- ------- ----- ----- -- -- ---------- ------- ----- -- ------------ ---------------------- -- --------- ------- ----- -- ----- ------ ------- ----- -- ----- ---------- ------- ----- -- -----
在这个例子中，我们使用 flatMap 以“拍平”的方式处理对象数组，然后使用 reduce 方法计算每个对象的平均分数。最后，使用 map 方法将计算结果转换为一个字符串数组。
为什么要使用 Array.prototype.flatMap 方法？
Array.prototype.flatMap 方法的主要优点是简化了代码的书写，让数组处理变得更加简单和优雅。
在使用 flatMap 前，为了处理嵌套数组，我们通常需要使用 map 和 concat 方法结合起来，例如：
const arr = [1, 2, [3, 4]]; const flatArr = arr .map(num => Array.isArray(num) ? num : [num]) .reduce((acc, val) => acc.concat(val), []); console.log(flatArr); // [1, 2, 3, 4]
使用 flatMap 方法可以简化上面的代码，更加方便地处理数组：
const arr = [1, 2, [3, 4]]; const flatArr = arr.flatMap(num => num); console.log(flatArr); // [1, 2, 3, 4]
除了上面提到的“拍平”数组，Array.prototype.flatMap 方法还可以用于处理对象数组和其他嵌套结构，例如树形结构。
结论
在 ECMAScript 2019 中，Array.prototype.flatMap 方法是一个非常实用、方便的数组方法。它可以简化代码的书写，并提高代码的可读性和可维护性。
使用 Array.prototype.flatMap 方法需要注意的是回调函数的返回值需要是一个数组，表示对该元素的处理结果。当然，可以通过返回空数组来过滤掉某些元素。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671e25a52e7021665ef637b8