如何将JavaScript字符串数组转换为菜单与子菜单层级数据结构？

嘿，这个需求我之前也碰到过，实现思路其实很清晰，咱们一步步来拆解～

核心逻辑 #

我们要做的就是把每个路径字符串按/拆分成单个片段，然后像搭树一样，逐层构建嵌套的节点结构——每个节点包含name（路径片段名称）和children（子节点数组）。具体步骤：

1. 先建一个根容器，用来装所有顶层节点
2. 遍历每个路径项，把路径拆成片段数组
3. 沿着层级结构逐步查找/创建对应节点，每处理一个片段就深入一层
4. 最后根容器的子节点就是我们要的完整层级结构

代码实现（迭代版，更稳定） #

迭代方式比递归更适合处理超长路径，不会出现调用栈溢出的问题，直接看代码：

var array = [
  { string: 'path1/path2/path3' },
  { string: 'path1/path4/path5' },
  { string: 'path1/path2/path6' },
  { string: 'path10/path7' },
  { string: 'path10/path8/path9' }
];

function buildHierarchy(pathArray) {
  // 根容器，承载所有顶层节点
  const root = { children: [] };
  
  pathArray.forEach(item => {
    // 拆分路径为单个片段
    const pathSegments = item.string.split('/');
    // 从根的子节点开始遍历
    let currentLevel = root.children;
    
    pathSegments.forEach(segment => {
      // 检查当前层级是否已有同名节点
      let targetNode = currentLevel.find(node => node.name === segment);
      
      // 没有的话就创建新节点并加入当前层级
      if (!targetNode) {
        targetNode = { name: segment, children: [] };
        currentLevel.push(targetNode);
      }
      
      // 进入下一层级，继续处理后续片段
      currentLevel = targetNode.children;
    });
  });
  
  // 返回根容器的子节点，就是最终的层级结构
  return root.children;
}

// 调用函数得到你想要的结构
const paths = { children: buildHierarchy(array) };
console.log(paths);

额外优化建议 #

• 节点排序：如果需要每个层级的节点按名称排序，可以在添加节点后对children数组排序：

  currentLevel.push(targetNode);
  currentLevel.sort((a, b) => a.name.localeCompare(b.name));
  

• 特殊路径处理：如果路径里有转义的/（比如path1\/path2），要先做转义处理再拆分，避免错误分割
• 性能提升：如果路径数量极大，可以把每个层级的节点用Map存储（键为name，值为节点），代替find方法，加快查找速度

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