JavaScript如何递归转换深度嵌套对象数组为指定树形结构

原代码递归遍历子分类时，始终将最外层的根节点作为父节点传入递归函数，没有把当前新建的子项作为下级节点的挂载父级，导致所有层级的分类都被追加到根节点的children数组中，出现结构平铺的问题。

简洁递归写法（推荐） #

直接编写单递归函数，每个节点独立完成字段映射，再递归处理自身子节点即可，逻辑更清晰不容易出错：

const transformTree = (node) => {
  // 完成当前节点的字段映射
  const current = {
    value: node._id,
    title: node.name,
    children: []
  }
  // 存在子分类时，递归转换所有子分类，挂载到当前节点的children下
  if (node.subCategories?.length) {
    current.children = node.subCategories.map(sub => transformTree(sub))
  }
  return current
}

// 调用
const result = transformTree(data)
console.log(result)

原有代码修正版 #

如果要保留原来的双层函数写法，只需要修改递归时传入的父节点参数即可：

const iterate = (data) => {
  let result = {
    title: data.name,
    value: data._id,
    children: [],
  };
  function loop(categoryList, parentNode) {
    for (const category of categoryList) {
      let subItem = {
        title: category.name,
        value: category._id,
        children: [],
      };
      parentNode.children.push(subItem);
      // 修正点：递归处理当前项的子分类时，传入当前项subItem作为父节点，而非外层根节点
      if (category.subCategories?.length) {
        loop(category.subCategories, subItem);
      }
    }
  }
  loop(data.subCategories, result);
  return result;
};

const res = iterate(data);
console.log(res);

两种写法运行后都能得到预期的嵌套树形结构。

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