如何在JavaScript中从文件路径数组构建树形对象？

核心实现思路 #

因为输入的路径数组是有序的（父文件夹一定出现在子文件夹之前），我们可以直接逐层遍历路径片段，从根节点开始构建树形结构，每个节点预留files数组用于后续添加文件，folders对象存储子文件夹。

完整代码实现 #

1. 构建树形结构 #

// 示例输入路径数组
const paths = ['root/folder1', 'root/folder1/folderA', 'root/folder1/folderA/folderi', 'root/folder1/folderB', 'root/folder2'];

// 初始化根结构，符合你要求的预留格式
const allFolders = {
  root: {
    files: [],
    folders: {}
  }
};

// 遍历每个路径，逐层构建节点
paths.forEach(path => {
  const segments = path.split('/');
  let currentNode = allFolders.root;

  // 从第二个片段开始处理（第一个是root，已作为初始节点）
  for (let i = 1; i < segments.length; i++) {
    const folderName = segments[i];
    // 子文件夹不存在则创建，自动带上files和folders结构
    if (!currentNode.folders[folderName]) {
      currentNode.folders[folderName] = {
        files: [],
        folders: {}
      };
    }
    // 移动到下一层节点
    currentNode = currentNode.folders[folderName];
  }
});

console.log(allFolders);

2. 遍历树形结构生成层级展示 #

要输出你需要的层级文件夹树，用递归遍历即可：

// 递归打印文件夹层级
function printFolderHierarchy(node, folderName, indent = '') {
  // 打印当前文件夹
  console.log(`${indent}${folderName}`);
  
  // 遍历所有子文件夹
  Object.entries(node.folders).forEach(([name, childNode]) => {
    // 根据层级生成对应缩进和标记
    const level = Math.floor(indent.length / 3) + 1;
    const newIndent = indent + '  ' + '-'.repeat(level) + ' ';
    printFolderHierarchy(childNode, name, newIndent);
  });
}

// 从root节点开始打印
printFolderHierarchy(allFolders.root, 'root');

运行后会输出：

root
  - folder1
    -- folderA
       --- folderi
    -- folderB
  - folder2

后续扩展：添加文件 #

因为每个节点都预留了files数组，直接找到对应节点添加即可：

// 给root/folder1/folderA添加文件
allFolders.root.folders.folder1.folders.folderA.files.push('document.pdf', 'image.png');

// 查看添加后的节点
console.log(allFolders.root.folders.folder1.folders.folderA.files);
// 输出: ['document.pdf', 'image.png']

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