悠悠楠杉
网站页面
JavaScript中利用递归扁平化多维数组：深入理解reduce与嵌套调用，递归实现数组扁平化
11/25
在现代前端开发中，数据结构的处理是日常编码的重要组成部分。我们常常会遇到需要将嵌套层级较深的多维数组转换为一维数组的场景，比如从后端接口获取到的树形菜单、评论嵌套结构，或复杂的表单数据。虽然ES2019提供了Array.prototype.flat()方法来简化这一过程，但理解其底层实现原理，尤其是通过reduce结合递归的方式手动实现扁平化，不仅能加深对JavaScript语言特性的掌握，还能提升解决复杂问题的能力。
要实现一个通用的扁平化函数，核心思路是“逐层拆解”。当遍历数组元素时，如果当前元素仍是数组，就需要继续进入该子数组进行遍历——这正是递归大显身手的场景。而reduce方法恰好提供了一种优雅的累积处理方式，允许我们在遍历过程中不断将处理结果合并到一个累加器中。
我们可以从最简单的二维数组开始思考。例如，[1, [2, 3], 4]只需要展开一层即可得到[1, 2, 3, 4]。这时使用reduce配合concat就能轻松完成：
javascript
function flatTwoLevel(arr) {
return arr.reduce((acc, item) => acc.concat(item), []);
}
这段代码的逻辑清晰：每遇到一个元素，无论它是数字还是数组，都直接拼接到累加器中。对于非数组元素，concat会将其作为单个值加入；对于数组，则会展开其内容。然而，这种方法仅适用于固定层数的扁平化。一旦遇到三层甚至更深的嵌套，如[1, [2, [3, 4]], 5]，上述方法就会失效，因为内层数组不会被进一步展开。
这时候就需要引入递归。递归的本质是“函数调用自身”，它特别适合处理具有自相似结构的数据，比如树、链表或多维数组。我们可以在reduce的回调中判断当前元素是否为数组：如果是，则递归调用扁平化函数处理该子数组；如果不是，则直接推入结果。这样，无论嵌套多少层，都能被逐步“压平”。
以下是完整的递归扁平化实现：
javascript
function flatten(arr) {
return arr.reduce((acc, item) => {
if (Array.isArray(item)) {
return acc.concat(flatten(item));
} else {
return acc.concat(item);
}
}, []);
}
让我们一步步分析这个函数的执行过程。以输入[1, [2, [3, 4]], 5]为例：
- 初始累加器为空数组
[] - 处理第一个元素
1：不是数组，直接合并 →[1] - 处理第二个元素
[2, [3, 4]]：是数组，递归调用flatten([2, [3, 4]])
- 在递归调用中：
- 处理
2→[2] - 处理
[3, 4]→ 再次递归，返回[3, 4] - 合并后得
[2, 3, 4]
- 处理
- 在递归调用中：
- 将
[2, 3, 4]拼接到主流程的累加器 →[1, 2, 3, 4] - 处理最后一个元素
5→[1, 2, 3, 4, 5]
整个过程体现了递归“分而治之”的思想：将大问题分解为相同类型的小问题，直到达到最简情况（即非数组元素）。
值得注意的是，concat在此处起到了关键作用。它不会修改原数组，而是返回新数组，符合函数式编程的纯函数理念。同时，concat能智能处理参数类型，无论是单个值还是数组，都能正确合并，这让我们的递归逻辑更加简洁。
当然，这种实现方式也存在潜在问题。对于极深的嵌套结构，递归可能导致调用栈溢出。不过在大多数实际应用中，数据嵌套深度有限，因此该方案依然具备良好的实用性。若需处理极端情况，可考虑改用迭代方式或使用生成器函数优化内存使用。
此外，我们还可以扩展此函数，支持控制扁平化深度，模拟原生flat()的行为。只需增加一个depth参数，并在递归时递减即可：
javascript
function flatten(arr, depth = Infinity) {
return arr.reduce((acc, item) => {
if (Array.isArray(item) && depth > 0) {
return acc.concat(flatten(item, depth - 1));
} else {
return acc.concat(item);
}
}, []);
}
