在前端开发中，我们经常会对数组进行操作。ES10 的新特性之一是新增了 Array 的 flatMap() 方法，它为我们提供了一种便捷有效的方式来操作数组。用它来解决一些其他函数无法解决的问题。
flatMap() 方法的使用
flatMap() 方法接收一个函数作为参数，该函数被称为映射函数。映射函数被应用于每个数组元素，循环执行。flatMap() 做的事情是将映射函数返回的值压缩成一个新的数组。可以这么理解，它先对数组调用 map() 方法，然后调用 flat() 方法把结果展平到一级数组。
const arr = [1, 2, 3, 4, 5]; const resultMap = arr.map((item, index) => [index, item]); // [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5]] const resultFlatMap = arr.flatMap((item, index) => [index, item]); // [0, 1, 1, 2, 2, 3, 3, 4, 4, 5]
可以看到，flatMap() 方法将 map() 的结果展平成了一维数组。
使用 flatMap() 解决其他函数无法解决的问题
问题一：使用 map() 产生嵌套数组
假设我们有一个数组，其中的每个元素都是一组数字。现在，我们要将每组数字求和，然后将每组数字的和加起来，得到最终的总和。如果只用 map() 方法实现，会产生嵌套数组。
-- -------------------- ---- ------- ----- --- - ---- --- --- -- --- --- ---- ----- --------- - -------------- -- - ----- --- - ------------------ -------- -- ---- - --------- ------ ---- --- -- --- --- --- ----- --- - ----------------------- -------- -- ---- - -------- --- -- --
可以看到，resultMap 是一个嵌套数组，我们还需要再对它进行 reduce() 操作。使用 flatMap() 方法能够更加简洁地实现这个需求。
-- -------------------- ---- ------- ----- --- - ---- --- --- -- --- --- ---- ----- ------------- - ------------------ -- - ----- --- - ------------------ -------- -- ---- - --------- ------ ---- --- -- --- --- --- ----- --- - --------------------------- -------- -- ---- - -------- --- -- --
可以看到，我们省去了对 resultMap 进行 reduce() 操作的步骤。
问题二：使用 flat() 展平嵌套数组
使用 flatMap() 方法可以代替对数组展平的操作。在某些场景下，我们需要将数组展平，这个过程可以使用 flat() 方法实现。
const arr = [[1, 2], [3, 4, 5], [6, 7]]; const resultFlat = arr.flat(); // [1, 2, 3, 4, 5, 6, 7]
但是，如果数组有多层嵌套，就需要多次调用 flat() 方法。当然我们也可以使用递归函数或其他库函数来展平多层嵌套数组。但是，这些方法都有一定的复杂度，并且可能因为递归深度过大导致堆栈溢出等问题。使用 flatMap() 方法可以解决这个问题。
const arr = [[[1]], [[[[[[[2]]]]]]], [[[[[3, 4]]]]]]; const resultFlatMap = arr.flatMap((item) => item); // [[1], [[[[[[2]]]]]], [[[[[3, 4]]]]]] const result = resultFlatMap.flatMap((item) => item); // [1, 2, 3, 4]
可以看到，通过 flatMap() 方法，我们一次性将多层嵌套的数组展平成了一维数组。
总结
使用 flatMap() 方法可以解决数组操作中的许多问题，比如多维数组的展平等。与其他的方法相比，flatMap() 具有更加简洁的操作方式，避免了一些不必要的复杂度。因此，学习并善于使用 flatMap() 方法，是我们的前端开发技能提升的一项重要内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649958ce48841e98946593d2