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

2022-03-17 11:11:59 +08:00
 Yukee798

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

[
  "./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",
  }
]
1706 次点击
所在节点    问与答
12 条回复
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
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
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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/840964

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX