前言
在前端编程中，为了提高开发效率和代码的可读性，ES6/ES7 和 ES10 中新增了很多优秀的 API，其中 flatMap() 函数是十分实用的一个。本篇文章将详细介绍 flatMap() 函数的用法和注意事项，读者可以通过本文学习并应用该函数。
ES6 flatMap() 函数
flatMap() 函数是在 ES6 中引入的。它可以将数组中的每个元素进行映射，然后将所有映射后的元素拼接成一个新的数组，同时去除其中的空隙（undefined）。与 map() 函数不同的是，flatMap() 函数可以链式调用来处理多维数组。
下面是 flatMap() 函数的语法和示例：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
-- -------------------- ---- ------- ----- ------ - --- -- -- --- -- --- --------- -- ----- ------- - ---------------- -- --- - - ---- --------------------- -- --- -- -- -- -- -- -- -- ----- ------ - --------- --------- -- -- ----- ---- ----------------------- -- -- --------- ---- ----- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----- ------- - ---------------- -- ------------- --------------------- -- ----- ---- ---- ---- ---- ---- ---- ---- ---- ----
在上述代码中，我们首先声明了两个数组 array1 和 array2。然后，我们使用 flatMap() 函数分别对两个数组进行了不同的操作。
在 newArr1 中，我们输入了一个回调函数，该函数将数组 array1 中的每个元素 x 重复两次（分别为 x 和 x * 2），最后使用 flatMap() 函数将所有结果重新拼接成了一个新的数组。
在 newArr2 中，我们使用 flatMap() 函数将数组 array2 中的所有字符串拆成单个字母，并将它们重新拼接成一个新的数组。相对于 map() 函数，flatMap() 函数更加高效。
ES7 flatMapDeep() 函数
在 ES7 中，flatMapDeep() 函数被引入，它一步步地递归处理多维数组。flatMapDeep() 函数可以简化已有的嵌套数组结构，更加符合代码逻辑。
下面是 flatMapDeep() 函数的语法和示例：
arr.flatMapDeep(callback(currentValue[, index[, array]])[, thisArg])
const array1 = [1, 2, [3, 4], [[5, 6]]]; const newArr1 = array1.flatMapDeep(x => x); console.log(newArr1); // [1, 2, 3, 4, [5, 6]]
在上述代码中，我们首先声明了一个数组 array1 包含了一些多维数组。然后，我们使用 flatMapDeep() 函数将数组 array1 扁平化（展开）成一个一维数组，该数组不包含多维数组中的项目。
在此处，我们输入了一个回调函数，该函数将数组 array1 中的每个元素 x 依次展开，最后使用 flatMapDeep() 函数将其拼接成了一个新的数组。我们可以看到，最后的结果中，只保留了一维数组中的所有项目。
ES10 flat() 函数
在 ES10 中，flat() 函数进一步地简化了扁平化多维嵌套数组的操作。它允许您使用指定深度从嵌套数组中获取项目。
下面是 flat() 函数的语法和示例：
arr.flat([depth])
const array1 = [1, 2, [3, 4], [[5, 6]]]; const newArr1 = array1.flat(2); console.log(newArr1); // [1, 2, 3, 4, 5, 6]
在上述代码中，我们使用了 ES10 中的 flat() 函数，它接受一个参数 depth，该参数标识多维数组需要展开的深度。在该示例中，我们输入了 depth 为 2，从而将多维数组中的项目展开至最外层，从而组成一个一维数组。
总结
在本篇文章中，我们学习了在 ES6/ES7 和 ES10 中实现数组扁平化的三个 API，分别是 flatMap()、flatMapDeep() 和 flat()。我们了解了它们的语法、区别和示例，并从实用性和效率的角度分析了它们的应用场景。学习并掌握这些 API，可以提高前端开发的效率和代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b2065968c7c53b0a8cf9b