JavaScript 实现管道分隔层级字符串转树形结构时根节点拆分异常求助

原实现的问题根源 #

• 全局容器设计错误：原代码用单个对象tree作为全局根存储，本质仅能承载1个根节点。处理第二条根路径（如示例中的XYZ开头路径）时，因为第一个根（ABC）已经存在children属性，根本触发不了新根节点的创建逻辑，所有后续路径都会被错挂到ABC的子节点数组下。
• 根层级匹配逻辑缺失：原代码在处理路径拆分后的第一级元素时，没有对已存在的根节点做查重、新增操作，反而强行把第一级路径绑定到全局唯一的tree对象上，完全不支持多根节点场景。

修正核心思路 #

1. 把全局根容器从单个对象改成数组结构，和预期输出的顶层格式完全对齐，天然支持任意数量的根节点。
2. 遍历每条拆分后的路径时，从第一级（根层级）开始就在当前父级的节点列表里做值匹配：
   • 匹配到已存在节点时，顺着该节点的子节点列表继续处理后续路径
   • 未匹配到节点时，新建对应节点，仅当节点不是当前路径的最后一级时，才挂载children空数组供后续路径填充
3. 完全统一各层级的查找、插入逻辑，不再把单个对象硬绑成全局唯一根。

修正后的可运行代码 #

const input = {
  "values": [
    "ABC|A Type 1",
    "ABC|A Type 2|B Type 1",
    "ABC|A Type 2|B Type 2",
    "XYZ|X Type 1",
    "XYZ|X Type 2",
    "XYZ|X Type 3|Y Type 1",
  ]
};

// 根容器改为数组，直接支持多根节点
const tree = [];

function fillTree(steps) {
  // 每一层的查找范围初始为根节点数组
  let currentParentList = tree;
  let existingNode = null;

  for (let level = 0; level < steps.length; level++) {
    const nodeValue = steps[level];
    // 在当前父级节点列表中匹配同值节点
    existingNode = currentParentList.find(item => item.value === nodeValue);

    if (!existingNode) {
      // 未匹配到则新建节点
      const newNode = {
        value: nodeValue,
        label: nodeValue
      };
      // 仅当不是路径最后一级时，才为节点挂载children数组
      if (level < steps.length - 1) {
        newNode.children = [];
      }
      currentParentList.push(newNode);
      // 下一层的查找范围切换到新节点的children（最后一级无children则为空数组，不影响循环走完）
      currentParentList = newNode.children || [];
    } else {
      // 匹配到已有节点，则下一层查找范围切换到该节点的children
      currentParentList = existingNode.children || [];
    }
  }
}

// 逐路径处理
input.values.forEach(pathStr => {
  const pathSteps = pathStr.split('|');
  fillTree(pathSteps);
});

console.log('最终生成的树形结构', JSON.stringify(tree, null, 2));

逻辑验证 #

• 处理ABC开头的路径时，首次遇到ABC会在根数组中新建独立的ABC节点，后续子路径顺着ABC的children匹配、新建子节点，完全匹配预期结构
• 处理XYZ开头的路径时，会在根数组中匹配不到XYZ，直接新建独立的XYZ根节点，不会被错挂载到ABC的子节点下
• 兼容任意深度的层级、任意数量的根节点，不需要针对固定层级数写硬编码判断

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