JavaScript无递归将带路径的文件对象数组转为文件夹树形结构

实现思路 #

核心是用迭代遍历+指针定位层级，完全不需要递归：

1. 初始化根目录结构，统一每个文件夹的结构为{name:string, files:Array, folders:Array}
2. 遍历每一个文件对象，将文件路径按/拆分为路径段数组，最后一段为文件名，前面的所有段为父级文件夹层级
3. 用临时指针从根目录开始，逐段匹配父级文件夹：如果当前层级存在对应名称的文件夹就直接跳转指针，不存在就先创建再跳转
4. 所有父级文件夹匹配完成后，将当前文件信息推入当前指针所在文件夹的files数组中

实现代码 #

const files = [
  { id: 'ruslan/cache/vars.json', size: 17 },
  { id: 'cache/vars.json.bak', size: 17 },
  { id: 'wcc-config.json', size: 10 }
];

// 初始化根目录
const rootFolder = { files: [], folders: [] };

files.forEach(file => {
  const pathSegments = file.id.split('/');
  const fileName = pathSegments.pop(); // 取出最后一段作为文件名
  let currentNode = rootFolder; // 指针从根目录开始

  // 遍历所有父级文件夹段，定位到目标文件夹
  for (const seg of pathSegments) {
    // 查找当前层级有没有同名文件夹
    let targetFolder = currentNode.folders.find(f => f.name === seg);
    if (!targetFolder) {
      // 不存在就创建新文件夹
      targetFolder = { name: seg, files: [], folders: [] };
      currentNode.folders.push(targetFolder);
    }
    // 指针跳转到当前文件夹
    currentNode = targetFolder;
  }

  // 把文件推入目标文件夹的files列表
  currentNode.files.push({ name: fileName, size: file.size });
});

console.log(rootFolder);

补充说明 #

如果需要对文件夹按名称排序，可以在全部文件遍历完成后，递归/迭代给每个folders数组做排序即可。整个实现只有循环迭代逻辑，没有任何递归调用，时间复杂度为O(n*m)，n为文件总数，m为平均路径深度，处理常规业务场景性能足够。

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