js中将有层级关系的一维数据转换为父子级关系的二维数据菜单权限三级层级数据实现（树形结构数据）

Posted 2022-12-08 苦海123

很久没有发文了，今天发点不一样的，如下：

  <script>
    // 一维数据：
    let arrData=[
       r_id: 1, role_name: '开发商', n_id: 1, txt: '主页' ,
       r_id: 1, role_name: '开发商', n_id: 2, txt: '项目' ,
       r_id: 1, role_name: '开发商', n_id: 3, txt: '报警' ,
       r_id: 1, role_name: '开发商', n_id: 4, txt: '客户' ,
       r_id: 1, role_name: '开发商', n_id: 5, txt: '设备' ,
       r_id: 1, role_name: '开发商', n_id: 6, txt: '设置' ,
       r_id: 1, role_name: '开发商', n_id: 7, txt: '集中监控' ,
       r_id: 1, role_name: '开发商', n_id: 9, txt: '用户列表' ,
       r_id: 1, role_name: '开发商', n_id: 10, txt: '系统设置' ,
       r_id: 1, role_name: '开发商', n_id: 11, txt: '报警设置' ,
       r_id: 1, role_name: '开发商', n_id: 12, txt: '我的项目' ,
       r_id: 1, role_name: '开发商', n_id: 13, txt: '增加项目' ,
       r_id: 1, role_name: '开发商', n_id: 14, txt: '权限' ,
       r_id: 1, role_name: '开发商', n_id: 15, txt: '角色列表' ,
       r_id: 1, role_name: '开发商', n_id: 16, txt: '权限列表' ,
       r_id: 1, role_name: '开发商', n_id: 17, txt: '报警日志' ,
       r_id: 1, role_name: '开发商', n_id: 18, txt: '报警管理' ,
       r_id: 1, role_name: '开发商', n_id: 19, txt: '设备列表' ,
       r_id: 2, role_name: '厂商', n_id: 1, txt: '主页' ,
       r_id: 2, role_name: '厂商', n_id: 2, txt: '项目' ,
       r_id: 3, role_name: '用户', n_id: 2, txt: '项目' ,
       r_id: 3, role_name: '用户', n_id: 1, txt: '主页' ,
       r_id: 4, role_name: '普通员工', n_id: 3, txt: '报警' ,
       r_id: 4, role_name: '普通员工', n_id: 5, txt: '设备' 
    ]

    // 进行转换：
    let newArr = [...new Set(arrData.map(item => item.role_name))] // 找出arrData数据中的role_name的多个数据：role_name:'值',通过set去重，之后在解构成数组：[]
    let list = []
    newArr.forEach(names => 
        list.push(arrData.filter(item => item.role_name === names))
    )
    let mlist = []
    list.forEach((e,i)=>
        let arr = []
        e.forEach(its=>
            arr.push(
                n_id:its.n_id,
                txt:its.txt
            )
        )
        mlist.push(
            r_id:e[0].r_id,
            role_name:newArr[i],
            children: arr
        )
    )

    console.log(mlist)
    //转换后具有父子级关系的数据console.log(mlist)打印的结果如下：
    [
      
        r_id: 1,
        role_name: '开发商',
        children: [
           n_id: 1, txt: '主页' ,
           n_id: 2, txt: '项目' ,
           n_id: 3, txt: '报警' ,
           n_id: 4, txt: '客户' ,
           n_id: 5, txt: '设备' ,
           n_id: 6, txt: '设置' ,
           n_id: 7, txt: '集中监控' ,
           n_id: 9, txt: '用户列表' ,
           n_id: 10, txt: '系统设置' ,
           n_id: 11, txt: '报警设置' ,
           n_id: 12, txt: '我的项目' ,
           n_id: 13, txt: '增加项目' ,
           n_id: 14, txt: '权限' ,
           n_id: 15, txt: '角色列表' ,
           n_id: 16, txt: '权限列表' ,
           n_id: 17, txt: '报警日志' ,
           n_id: 18, txt: '报警管理' ,
           n_id: 19, txt: '设备列表' 
        ]
      ,
      
        r_id: 2,
        role_name: '厂商',
        children: [  n_id: 1, txt: '主页' ,  n_id: 2, txt: '项目'  ]
      ,
      
        r_id: 3,
        role_name: '用户',
        children: [  n_id: 2, txt: '项目' ,  n_id: 1, txt: '主页'  ]
      ,
      
        r_id: 4,
        role_name: '普通员工',
        children: [  n_id: 3, txt: '报警' ,  n_id: 5, txt: '设备'  ]
    ]

    // 对let newArr = [...new Set(arrData.map(item => item.role_name))]的详细解说如下：
    let obj = arrData.map(item => item.role_name) 
    console.log(obj) //['开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '厂商', '厂商', '用户', '用户', '普通员工', '普通员工']
    let res = new Set(obj)
    console.log(res) //'开发商', '厂商', '用户', '普通员工'
    let arrs = [...res]
    console.log(arrs) //['开发商', '厂商', '用户', '普通员工']






    

    // 注意：上面只是简单的实现具有层级关系的数据处理，实际工作中常常出现三级层级关系的数据，就权限功能而言，每个主菜单（一级菜单）和负极菜单（二级菜单或更多级菜单）之间应该是嵌套的父子级关系，而并非是上面的同级非嵌套关系，优化后的代码如下：
    // 注意：上面只是简单的实现具有层级关系的数据处理，实际工作中常常出现三级层级关系的数据，就权限功能而言，每个主菜单（一级菜单）和负极菜单（二级菜单或更多级菜单）之间应该是嵌套的父子级关系，而并非是上面的同级非嵌套关系，优化后的代码如下：
     let result=[
      r_id: 1,role_name: '开发商',n_id: 1,txt: '主页',pid: null,
      r_id: 1,role_name: '开发商',n_id: 2,txt: '项目',pid: null,
      r_id: 1,role_name: '开发商',n_id: 3,txt: '报警',pid: null,
      r_id: 1,role_name: '开发商',n_id: 4,txt: '客户',pid: null,
      r_id: 1,role_name: '开发商',n_id: 5,txt: '设备',pid: null,
      r_id: 1,role_name: '开发商',n_id: 6,txt: '设置',pid: null,
      r_id: 1,role_name: '开发商',n_id: 7,txt: '集中监控',pid: 1,
      r_id: 1,role_name: '开发商',n_id: 9,txt: '用户列表',pid: 4,
      r_id: 1,role_name: '开发商',n_id: 10,txt: '系统设置',pid: 6,
      r_id: 1,role_name: '开发商',n_id: 11,txt: '报警设置',pid: 6,
      r_id: 1,role_name: '开发商',n_id: 12,txt: '我的项目',pid: 2,
      r_id: 1,role_name: '开发商',n_id: 13,txt: '增加项目',pid: 2,
      r_id: 1,role_name: '开发商',n_id: 14,txt: '权限',pid: null,
      r_id: 1,role_name: '开发商',n_id: 15,txt: '角色列表',pid: 14,
      r_id: 1,role_name: '开发商',n_id: 16,txt: '权限列表',pid: 14,
      r_id: 1,role_name: '开发商',n_id: 17,txt: '报警日志',pid: 3,
      r_id: 1,role_name: '开发商',n_id: 18,txt: '报警管理',pid: 3,
      r_id: 1,role_name: '开发商',n_id: 19,txt: '设备列表',pid: 5,
      r_id: 2,role_name: '厂商',n_id: 1,txt: '主页',pid: null,
      r_id: 2,role_name: '厂商',n_id: 2,txt: '项目',pid: null,
      r_id: 3,role_name: '用户',n_id: 2,txt: '项目',pid: null,
      r_id: 3,role_name: '用户',n_id: 1,txt: '主页',pid: null,
      r_id: 4,role_name: '普通员工',n_id: 3,txt: '报警',pid: null,
      r_id: 4,role_name: '普通员工',n_id: 5,txt:
以上是关于js中将有层级关系的一维数据转换为父子级关系的二维数据菜单权限三级层级数据实现（树形结构数据）的主要内容，如果未能解决你的问题，请参考以下文章
 
 一维数据和二维数据
 js将有父子关系的数据转换成树形结构数据
 如何在Java中将二维布尔数组转换为一维字节数组？
 C 语言数组 ( 一维数组形参退化 | 二维数组形参退化 | 函数形参等价关系 )
 如何在python中将一维值列表转换为0和1的二维网格[重复]
 二维码和条形码是啥关系？