介绍
JS处理tree树形结构(扁平数据结构转Tree)
# 树形结构样式
- 扁平化数据样例
// 扁平数据
let arr = [
{ id: 1, name: '部门1', pid: 0 },
{ id: 2, name: '部门2', pid: 1 },
{ id: 3, name: '部门3', pid: 1 },
{ id: 4, name: '部门4', pid: 3 },
{ id: 5, name: '部门5', pid: 4 }
]
// 给扁平化数据添加1000条数据
function getRandom () {
return parseInt(Math.random() * 100)
}
for (let i = 6; i < 1000; i++) {
arr.push({ id: i, name: `部门${i}`, pid: getRandom() })
}
- 依据
pid
进行树形结构的转换 大致是这样 这就是传统的树形结构 多用于权限等方面的处理
[
{
"id": 1,
"name": "部门1",
"pid": 0,
"children": [
{
"id": 2,
"name": "部门2",
"pid": 1,
"children": []
},
{
"id": 3,
"name": "部门3",
"pid": 1,
"children": [
// 结果 ,,,
]
}
]
}
]
# 进行树形结构转换
- 主要思路也是先把数据转成
Map
去存储,之后遍历的同时借助对象的引用
,直接从Map
找对应的数据做存储。不同点在遍历的时候即做Map
存储,有找对应关系。性能会更好。
// 把扁平化数据 处理成树形结构
function treeData (data) {
let treeData = []
let map = new Map()
for (let index = 0; index < data.length; index++) {
let pid = data[index].pid
if (map.has(pid)) {
if (!map.get(pid).children) {
map.get(pid).children = []
}
map.get(pid).children.push(data[index])
map.set(data[index].id, data[index])
} else {
treeData.push(data[index])
map.set(data[index].id, data[index])
}
}
return treeData
}
# 其他的解决思路记录
- 双循环的方式进行处理