JavaScript中为何在reduce回调内递归调用flatten函数？

你的测试用例只有一层嵌套数组，所以去掉递归后输出看起来和原代码一致，但原代码里的递归调用是为了处理多层嵌套的场景——这才是这个扁平化函数的核心价值。

原代码的工作原理 #

原代码是一个深度扁平化函数，递归调用flatten的作用是：遇到嵌套数组时，继续拆解这个子数组，直到所有元素都是非数组类型。我们一步步拆解它的执行流程：

1. 初始调用flatten(myArray)，处理数组["J", "a", "v", ["a", "scrip"], "t"]
2. reduce开始遍历每个元素：
   • 遇到非数组元素（如"J"、"a"），直接通过flat.concat(arry)添加到结果数组flat中
   • 遇到数组元素["a", "scrip"]，先递归调用flatten(["a", "scrip"])：
     • 这个递归调用里的reduce会遍历["a", "scrip"]的每个元素，把它们都concat成扁平数组["a", "scrip"]
     • 再把这个扁平数组concat到上层的flat中
3. 最后把完全扁平的数组用join("")转成字符串，得到"Javascript"

如果数组有更深的嵌套，比如：

let myArray = ["J", "a", "v", ["a", ["s", "c", "r"], "ip"], "t"];

原代码的递归会继续拆解["s", "c", "r"]这个子数组，最终得到完全扁平的数组["J","a","v","a","s","c","r","ip","t"]，join后输出"Javascript"。

你修改后的代码的局限 #

你修改后的代码去掉了递归调用，变成：

const flatten = (myArray) => {
  return myArray.reduce((flat, arry) => {
    return Array.isArray(arry) ? flat.concat(arry) : flat.concat(arry);
  }, []).join("");
};

这段代码只能扁平化一层：遇到子数组时，直接把整个子数组concat到结果里，不会处理子数组内部的嵌套。

还是用刚才的深层嵌套例子，修改后的代码执行时：

• 处理["a", ["s", "c", "r"], "ip"]这个子数组时，直接把它concat到flat中，结果数组会变成["J","a","v","a",["s","c","r"],"ip","t"]
• 调用join("")时，数组["s","c","r"]会被转成字符串s,c,r，最终输出"Javas,c,ript"，和预期结果不符。

总结 #

• 原代码的递归调用是为了实现深度扁平化，支持任意层数的数组嵌套
• 你修改后的代码只能处理一层嵌套，在深层嵌套场景下会失效

内容的提问来源于stack exchange，提问作者Ameen Shamsan