javascript - 根据对象数组生成树

Question

我想生成以下形式的树:

[
  {
  folder: 'src',
  children: [
    {
      folder: 'app',
      children: [
        { file: 'app.module.ts', status: 'M' },
        {
          folder: 'components',
          children: [
            { 
              folder: 'accordion',
              children: [
                { file: 'accordion.components.scss', status: 'M'}
              ]
            },
            {
              folder: 'file-diff-commit',
              children: [
                { file: 'file-diff-commit.component.html', status: 'A' },
                { file: 'file-diff-commit.component.ts', status: 'A' }
              ]
            }
          ]
        },
        {
          folder: 'models',
          children: [
            { file: 'MockGitService.ts' , status: 'M' },
            { file: 'MockLeftPanelService.ts', status: 'M'} 
          ]
        }
      ]
    },
    {
      folder: 'assets'
      children: [

      ]
    }
  ]
},
{ file: 'package.json', status: 'M' },
{ file: 'yarn.lock', status: 'M' }
]

我需要使用一个对象数组来生成。一个例子:

[
  { status: "M", path: "src/app/app.module.ts" },
  { status: "M", path: "src/app/components/accordion/accordion.component.scss" },
  { status: "A", path: "src/app/components/file-diff-commit/file-diff-commit.component.html" },
  { status: "A", path: "src/app/components/file-diff-commit/file-diff-commit.component.ts" },
  { status: "M", path: "src/app/models/MockGitService.ts" },
  { status: "M", path: "src/app/models/MockLeftPanelService.ts" },
  { status: "M", path: "src/assets/i18n/en.json" },
  { status: "M", path: "src/assets/i18n/fr.json" },
  { status: "M", path: "package.json" },
  { status: "M", path: "yarn.lock" }
]

我不是要一个完整的方法，而是要一个小线索来指导我的研究。从我在互联网上查看的内容来看，我只发现使用索引生成的树，但我更愿意使用路径寻找逻辑。

欢迎任何帮助。提前致谢。

Answer 1

您可以对对象采用迭代方法，对拆分目录和最终文件采用递归方法。

在递归中，在实际级别中搜索具有所需目录名称的对象，如果未找到，则生成一个包含folder 和children 的新对象。

最后，文件对象被推到最后一层。

var data = [{ status: "M", path: "src/app/app.module.ts" }, { status: "M", path: "src/app/components/accordion/accordion.component.scss" }, { status: "A", path: "src/app/components/file-diff-commit/file-diff-commit.component.html" }, { status: "A", path: "src/app/components/file-diff-commit/file-diff-commit.component.ts" }, { status: "M", path: "src/app/models/MockGitService.ts" }, { status: "M", path: "src/app/models/MockLeftPanelService.ts" }, { status: "M", path: "src/assets/i18n/en.json" }, { status: "M", path: "src/assets/i18n/fr.json" }, { status: "M", path: "package.json" }, { status: "M", path: "yarn.lock" }],
    tree = [];

data.forEach(({ status, path }) => {
    var dirs = path.split('/'),
        file = dirs.pop();

    dirs
        .reduce((level, folder) => {
            var object = level.find(o => o.folder === folder);
            if (!object) {
                level.push(object = { folder, children: [] });
            }
            return object.children;
        }, tree)
        .push({ file, status });
});

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }