扁平数据结构转换为tree结构的最优解(前端)

热爱前端的小菜

已于 2022-08-01 10:04:15 修改

阅读量404

点赞数

文章标签：数据结构 javascript 开发语言前端

于 2022-07-16 13:57:24 首次发布

本文链接：https://blog.csdn.net/weixin_47970316/article/details/125819167

版权

例如：
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},
]
转换为：
[
{
“id”: 1,
“name”: “部门1”,
“pid”: 0,
“children”: [
{
“id”: 2,
“name”: “部门2”,
“pid”: 1,
“children”: []
},
{
“id”: 3,
“name”: “部门3”,
“pid”: 1,
“children”: [
// 结果 ,
]
}
]
}
]
其详细过程解法如下：可以直接复制粘贴使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <script>
 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: 5},
    {id: 5, name: '部门5', pid: 2},
]

function arrayToTree(items) {
  // 存放结果
 const result = []
//  将数组中的所有对象的数据map到对象中，其中创建的对象的key是数组内每一个对象的id值
 const map_obj = {}
 
//  遍历对象
for(const key in items){

  const {id,pid} = items[key]
  if(!map_obj[id]){
    map_obj[id] = {
      children:[]
    }
  }

  map_obj[id] = {
    ...items[key],
    children:map_obj[id]['children']
  }
  // 数组内的每一个对象都是tree结构的一个分支
  const tree_item = map_obj[id]

  // pid=0，说明该数组内的这个对象是这个tree结构的根
  if(pid === 0){
    result.push(tree_item)
  }else{
    // 如果pid不等于0，那么说明这个数组内的这个对象，是tree结构的某一环
    // 此时根绝pid判断其父结构是否在树中，如果不在，那么在map_obj中预先创建坑位
    // 给其父结构准备，并且将这个子对象直接放入到其父结构的children数组中，为36行的解构对象做准备
    if(!map_obj[pid]){
      map_obj[pid] = {
        children:[]
      }
    }
    // 其父结构已经存在了，那么把这个子对象直接放入到其父结构的children数组中
    map_obj[pid]['children'].push(tree_item)
  }
}
console.log(result)
}

console.log(arrayToTree(arr))
 </script> 
</body>
</html>