JavaScript为嵌套文件夹数组添加layer层级标识实现方案

思路 #

• 采用递归遍历嵌套文件夹结构，不受嵌套层级限制
• 遍历到每个文件夹对象时直接添加layer字段，值为当前传入的层级数
• 若当前文件夹存在子文件夹数组，则递归处理子文件夹，传入层级+1

实现代码 #

/**
 * 为嵌套文件夹数组添加层级标识
 * @param {Array} folders 文件夹数组
 * @param {Number} currentLayer 当前层级，默认最外层为0
 */
function addLayerToFolders(folders, currentLayer = 0) {
  // 遍历当前层级所有文件夹
  folders.forEach(folder => {
    // 给当前文件夹添加layer字段
    folder.layer = currentLayer;
    // 兼容字段大小写差异（示例中根节点是subFolder大写F，子节点是subfolder小写f，若是笔误统一命名的话可去掉兼容逻辑）
    const subFolders = folder.subFolder || folder.subfolder || [];
    // 存在子文件夹则递归处理，层级+1
    if (subFolders.length > 0) {
      addLayerToFolders(subFolders, currentLayer + 1);
    }
  })
}

// 使用示例
const yourFolderArray = [
  {
    name: "folder parent",
    subFolder: [
      {
        name: "folder child 1",
        subfolder: [
          {
            name: "folder child 2",
            subfolder: []
          }
        ]
      },
      {
        name: "folder child 1",
        subfolder: [
          {
            name: "folder child 2",
            subfolder: [
              {
                name: "folder child 3",
                subfolder: []
              }
            ]
          }
        ]
      }
    ]
  }
];
// 调用函数
addLayerToFolders(yourFolderArray);
// 输出处理后的数组
console.log(yourFolderArray);

注意事项 #

• 上述代码会直接修改原数组对象，如果你需要保留原数组不变，可以先对原数组做深拷贝后再调用函数处理
• 如果你的子文件夹字段是统一命名（比如全为subfolder或者全为subFolder），可以删除代码中的兼容判断，直接取对应字段即可，避免出错

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