JavaScript递归函数返回多个数组 如何调整为返回单个数组

问题说明 #

当前递归函数每处理一条info数据就会生成一个新数组，无法返回包含所有子数组的单个聚合数组，多次调用时会返回多个独立的嵌套数组，不符合预期。

问题代码 #

let childrenStructures = []
export function getInfo(): any {

  let recursiveChildren = (info: any) => {
  let childrenStructure = []
  
    for (var i = 0; i < info.length; i++) {
      let childrenObj = {}

      childrenObj['info1'] = info[i].info1
      childrenObj['info2'] = info[i].info2
      if (info[i].children) {
        childrenObj['children'] = recursiveChildren(info[i].children)
      }
      childrenStructure.push(childrenObj)
    }
    return childrenStructure
  };

 //start
  for (var i = 0; i < allinfo.length; i++) {
    if (allinfo[i].info) {
          childrenStructures.push(recursiveChildren(allinfo[i].info))
        }
    
      }
  return childrenStructures
}

问题原因 #

1. 聚合数组childrenStructures定义在函数外部，属于全局变量，每次调用getInfo都会往同一个数组中追加数据，多次调用就会出现返回多组数据、结果累加的问题
2. 若外部调用时又对返回的数组做了额外的嵌套包装，就会出现实际输出中多层嵌套的情况

修复代码 #

// 把allinfo作为参数传入，避免依赖外部变量，函数通用性更强
export function getInfo(allinfo: any[]): any {
  // 聚合数组移到函数内部，每次调用重新初始化
  let childrenStructures = []

  let recursiveChildren = (info: any) => {
    let childrenStructure = []
    for (var i = 0; i < info.length; i++) {
      let childrenObj = {
        info1: info[i].info1,
        info2: info[i].info2
      }
      if (info[i].children) {
        childrenObj['children'] = recursiveChildren(info[i].children)
      }
      childrenStructure.push(childrenObj)
    }
    return childrenStructure
  };

  for (var i = 0; i < allinfo.length; i++) {
    if (allinfo[i].info) {
      // 如果预期输出是每个info处理后的数组作为外层数组的子元素，保持push即可
      childrenStructures.push(recursiveChildren(allinfo[i].info))
      // 如果需要把所有处理后的元素合并成单层数组，替换成下面这行
      // childrenStructures.push(...recursiveChildren(allinfo[i].info))
    }
  }
  return childrenStructures
}

修改说明 #

• 把聚合数组childrenStructures移到函数内部，每次调用getInfo都会生成新的空数组，不会和其他调用的结果混淆，每次调用只会返回当前处理的单个聚合数组
• 把allinfo改为函数入参，避免依赖外部全局变量，减少上下文耦合
• 两种push方式可选，根据实际需要的输出结构选择即可

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