递归生成父子层级名称对象数组的JavaScript实现问题

你需要将嵌套的树形数据转换成包含完整路径名称和对应id的对象数组，预期输出如下：

[
  {id:1,name:"1"},
  {id:2,name:"1-2"},
  {id:3,name:"1-2-3"},
  {id:4,name:"1-2-4"}
]

当前代码尝试递归处理但逻辑错误，无法得到预期结果。

原代码问题分析 #

原createList函数的核心逻辑完全偏离目标：它试图返回拼接后的字符串，而非收集每个节点的对象信息。递归处理子节点时，把返回的字符串直接拼接到当前name后，最终只会得到一串混乱的字符串，根本无法生成目标数组。

修正方案 #

我们需要递归遍历每个节点，维护当前的路径前缀，将每个节点的id和完整路径名称存入结果数组，再递归处理子节点时传递更新后的前缀。

修正后的代码 #

let item = {
  id: 1,
  name: "1",
  children: [{
    id: 2,
    name: "2",
    children: [{
        id: 3,
        name: "3",
        children: []
      },
      {
        id: 4,
        name: "4",
        children: []
      }
    ]
  }]
};

const createList = (root) => {
  const result = [];
  
  // 递归遍历函数，接收当前节点和父路径前缀
  const traverse = (node, parentPath = '') => {
    // 生成当前节点的完整名称：父路径为空则直接用当前name，否则拼接
    const fullName = parentPath ? `${parentPath}-${node.name}` : node.name;
    // 将当前节点信息加入结果数组
    result.push({ id: node.id, name: fullName });
    
    // 递归处理所有子节点，传递当前完整名称作为父路径
    node.children.forEach(child => traverse(child, fullName));
  };
  
  // 从根节点开始遍历
  traverse(root);
  return result;
};

console.log(createList(item));

代码逻辑说明 #

• 初始化空数组result用于存储最终结果
• 定义内部递归函数traverse，参数为当前节点和父路径前缀：
  1. 根据父路径生成当前节点的完整名称
  2. 将当前节点的id和完整名称组成对象，推入结果数组
  3. 遍历当前节点的所有子节点，递归调用traverse，并将当前完整名称作为新的父路径传递
• 调用traverse从根节点开始处理，最后返回结果数组

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