有趣且重要的JS知识合集（9）数组转化为树形结构

林大大哟

已于 2022-12-09 15:58:36 修改

阅读量388

点赞数

分类专栏： js有趣知识算法文章标签： javascript 前端 es6

于 2021-10-28 11:00:21 首次发布

本文链接：https://blog.csdn.net/qq_39404437/article/details/121009942

版权

js有趣知识同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

算法

6 篇文章 0 订阅

订阅专栏

本文介绍了一种非递归方法来构建前端路由菜单。后端提供数组形式的路由数据，通过id和pid连接一级和二级路由。利用Map存储数据并遍历，将子菜单添加到对应的父菜单中，最终形成树形结构。这种方法避免了递归，提高了效率。

摘要由CSDN通过智能技术生成

一般用在管理系统时，路由菜单的封装，后端一般将要渲染的路由菜单通过数组的形式，返回给前端，然后一级二级路由是通过中间的id，pid来联结的，一级路由的id就是二级路由的pid，代码如下：（递归的方式我不赞成用，就只用非递归就行啦~）

function arrToTree(data) {
  let result = []
  let map = new Map()
  data.forEach(item => {
    // 存入字典集里
    map.set(item.id, item)
  })
  data.forEach(item => {
    // 判断字典集里是否有该键
    let parent = map.get(item.pid)
    if (parent) {
      // ?. 可选链操作符，常用于判断对象里是否有该属性
      // ?? 合并操作符 或等于||，但是不会对左边值进行处理
      (parent?.children??(parent.children = [])).push(item)
    } else {
      result.push(item)
    }
  })
  return result
}

// let data =[
//   {id:1,name:'部门0',pid:0},
//   {id:2,name:'部门1',pid:0},
//   {id:3,name:'部门2',pid:1},
//   {id:4,name:'部门3',pid:1},
//   {id:5,name:'部门4',pid:2},
//   {id:6,name:'部门5',pid:2},
//   {id:7,name:'部门6',pid:3},
//   {id:8,name:'部门7',pid:4}
// ]

// 调用方式
arrToTree(data)

结果截图：