在JavaScript中将路径数组转换为树形结构的实现求助

需求说明 #

将给定的路径字符串数组，转换为包含id（完整路径）、level（层级）、childrens（子节点数组）的树形数据结构。

输入路径数组 #

const paths = ["src", "src/components", "src/components/index.ts", "src/utils", "src/configuration/config.ts", "another/file.ts"];

期望输出树形结构 #

[
      {
            "id": "src",
            "level": 1,
            "childrens": [
                  {
                        "id": "src/components",
                        "level": 2,
                        "childrens": [
                              {
                                    "id": "src/components/index.ts",
                                    "level": 3,
                                    "childrens": []
                              }
                        ]
                  },
                  {
                        "id": "src/utils",
                        "level": 2,
                        "childrens": []
                  },
                  {
                        "id": "src/configuration",
                        "level": 2,
                        "childrens": [
                              {
                                    "id": "src/configuration/config.ts",
                                    "level": 3,
                                    "childrens": []
                              }
                        ]
                  }
            ]
      },
      {
            "id": "another",
            "level": 1,
            "childrens": [
                  {
                        "id": "another/file.ts",
                        "level": 2,
                        "childrens": []
                  }
            ]
      }
]

实现方案 #

核心思路 #

1. 拆分路径片段：将每个完整路径按/拆分为层级片段，便于逐层级构建节点。
2. 节点映射表：用Map存储所有已创建的节点，通过完整路径快速查找，避免重复创建。
3. 逐层级构建：从根路径开始，依次检查每个层级的节点是否存在，不存在则创建并关联到父节点的子列表中。

代码实现 #

function buildTree(paths) {
  const nodeMap = new Map(); // 存储所有已创建的节点，key为完整路径id
  const tree = []; // 最终的树形结构根节点数组

  paths.forEach(path => {
    const segments = path.split('/');
    let parentNode = null;
    let currentFullPath = '';

    segments.forEach((segment, index) => {
      // 拼接当前层级的完整路径
      currentFullPath = currentFullPath ? `${currentFullPath}/${segment}` : segment;
      const currentLevel = index + 1;

      // 节点不存在则创建
      if (!nodeMap.has(currentFullPath)) {
        const newNode = {
          id: currentFullPath,
          level: currentLevel,
          childrens: []
        };
        nodeMap.set(currentFullPath, newNode);

        // 关联到父节点或根数组
        if (parentNode) {
          parentNode.childrens.push(newNode);
        } else {
          tree.push(newNode);
        }
      }

      // 更新父节点为当前节点，处理下一层级
      parentNode = nodeMap.get(currentFullPath);
    });
  });

  return tree;
}

// 测试示例
const paths = ["src", "src/components", "src/components/index.ts", "src/utils", "src/configuration/config.ts", "another/file.ts"];
console.log(JSON.stringify(buildTree(paths), null, 2));

代码说明 #

• nodeMap：通过完整路径作为唯一键，快速定位已存在的节点，保证每个路径只创建一次节点。
• 路径拼接：逐段拼接完整路径，确保每个层级的节点id都是对应的完整路径。
• 层级关联：每个新节点根据是否有父节点，决定添加到根数组还是父节点的childrens列表中，自然形成树形结构。

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