请教一下怎么将路径数组转为树形结构

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1001 天前的主题，其中的信息可能已经有所发展或是发生改变。

现在我拿到了类似下面这样的路径数组，里面路径嵌套层级不确定。

[
  "./home/analysis",
  "./home/boardTodo",
  "./home/dairy",
  "./home",
  "./home/todo",
  "./index",
  "./profile"
]

我想把它转换为下面这种树形结构：

[
  {
    path: "/home",
    children: [
      {
        path: "/home/analysis",
      },
      {
        path: "/home/boardTodo",
      },
      {
        path: "/home/dairy",
      },
      {
        path: "/home/todo",
      }
    ]
  },
  {
    path: "/index",
  },
  {
    path: "/profile",
  }
]

path

home

树形

TODO

12 条回复 • 2022-03-17 16:09:57 +08:00

stillsilly

2022-03-17 11:25:33 +08:00

要什么语言的代码

wxlwsy

2022-03-17 11:43:11 +08:00

这....手写不难吧

stillsilly

2022-03-17 11:46:14 +08:00

只有两层的话，两个循环就行了
let arr = [
"./home/analysis",
"./home/boardTodo",
"./home/dairy",
"./home",
"./home/todo",
"./index",
"./profile"
]

let tree = format(arr)
console.log(tree)

function format(arr) {
let paths = arr.map(path => {
return path.replace(/^.\//, '').split('/').map(p => '/' + p)
})

let result = []
getLevel1()
getLevel2()

function getLevel1() {
paths.forEach(p => {
if (p.length === 1) {
result.push({
path: p[0],
children: []
})
}
})
}

function getLevel2() {
paths.forEach(p => {
let node = result.find(r => r.path === p[0])
if (p.length !== 1) {
node.children.push({
path: '.' + p.join('')
})
}
})
}

return result
}

stillsilly

2022-03-17 11:47:16 +08:00

排版好乱，我试一下能不能用 markdown
```
let arr = [
"./home/analysis",
"./home/boardTodo",
"./home/dairy",
"./home",
"./home/todo",
"./index",
"./profile"
]

let tree = format(arr)
console.log(tree)

function format(arr) {
let paths = arr.map(path => {
return path.replace(/^.\//, '').split('/').map(p => '/' + p)
})

let result = []
getLevel1()
getLevel2()

function getLevel1() {
paths.forEach(p => {
if (p.length === 1) {
result.push({
path: p[0],
children: []
})
}
})
}

function getLevel2() {
paths.forEach(p => {
let node = result.find(r => r.path === p[0])
if (p.length !== 1) {
node.children.push({
path: '.' + p.join('')
})
}
})
}

return result
}

```

stillsilly

2022-03-17 11:48:58 +08:00

楼主对不起我污染了这个帖子…… /捂脸逃走

Yukee798

2022-03-17 11:53:08 +08:00

@stillsilly #5 很感谢你的回复，但是里面的路径层级是不确定的，应该会用上递归，但是我没写出来

Yukee798

2022-03-17 12:00:42 +08:00

@stillsilly #5 不好意思 = = 刚刚没有仔细看完代码，我自己改了一下，限制了最大层级，已经能满足我的需求了，很感谢。

GuuJiang

2022-03-17 12:04:09 +08:00 via iPhone

Trie ，只不过把标准 Trie 里的单个字母换成路径里的一级

lyminghao

2022-03-17 13:45:24 +08:00

建一个 map: path_string -> set
把每个 path 分级依次插进去，最后统一输出？

gydi

2022-03-17 14:15:17 +08:00

https://gist.github.com/zzzgydi/93c4e5603503f5eda2d8e27daa8289c5.js

murmur

2022-03-17 14:17:56 +08:00

https://www.npmjs.com/package/path-list-to-tree

这种东西不需要自己写吧

Yukee798

2022-03-17 16:09:57 +08:00

感谢大家，最后我采用的 Trie 方案，其实写这个东西就是想动态配置一下 React 路由，那个路径数组是用的 require.context 生成的，目前测试了几遍，应该是没问题了，我把完整代码贴出来：
https://gist.github.com/Yukee-798/3131f9c9b34364e9110f3028abe058aa