平铺的数组结构和树形结构的相互转换

(图片来源于网络,如侵删)

使用非递归的方式将数组转换成树形结构

var arr = [
  { 'id': '29', 'pid': '','name': '总裁办' },
  { 'id': '2c', 'pid': '','name': '财务部' },
  { 'id': '2d', 'pid': '2c','name': '财务核算部'},
  { 'id': '2f', 'pid': '2c','name': '薪资管理部'},
  { 'id': 'd2', 'pid': '','name': '技术部'},
  { 'id': 'd3', 'pid': 'd2','name': 'Java研发部'}
]

// 封装一个处理函数
function tranListToTreeData(arr) {
const treeList = [], // 最终要产出的树状数据的数组
      mapObj = {} // 存储映射关系
 
     arr.forEach( item => {
     if(!item.children){
     item.children = []  // 补充children：让后边的计算更方便
     }
     mapObj[item.id] = item // 映射关系: 目的是让我们能通过id快速找到对应的元素
     })
     
     arr.forEach( item => { 
     const parent = mapObj[item.pid]
     if(parent) { // 对于每一个元素来说，先找它的上级
     parent.children.push(item) // 如果能找到，说明它有上级，则要把它添加到上级的children中去
     }else {
     treeList.push( item ) // 如果找不到，说明它没有上级，直接添加到 treeList
     }
     })
     return treeList // 返回出去
}

使用递归的方式将数组转换成树形结构

var arr = [
  { 'id': '29', 'pid': '','name': '总裁办' },
  { 'id': '2c', 'pid': '','name': '财务部' },
  { 'id': '2d', 'pid': '2c','name': '财务核算部'},
  { 'id': '2f', 'pid': '2c','name': '薪资管理部'},
  { 'id': 'd2', 'pid': '', 'name': '技术部'},
  { 'id': 'd3', 'pid': 'd2','name': 'Java研发部'}
]

// 封装一个处理函数
function toTree(list,pid){
let lenNum = list.length // 获取传入参数的长度,作为for循环的循环次数
    function loop(pid){ // 定义一个递归函数
    let res = []; // 定义一个空数组,作为最后返回结果的容器
    for(let i = 0; i < lenNum; i++){
    let item = list[i]
    if(item.pid === pid){
    item.children = loop(item.id)
    res.push(item)
    }
    }
    return res
    }
    return loop(pid)
    }
    let result = toTree(arr,'')
    console.log(result);

将树形结构转换为平铺数组

var arr2 = [
{ 'id': '29', 'pid': '', 'name': '总裁办' ,'children':[]},
{ 'id': '2c', 'pid': '', 'name': '财务部' ,'children':[
{ 'id': '2d', 'pid': '2c', 'name': '财务核算部','children':[]},
{ 'id': '2f', 'pid': '2c', 'name': '薪资管理部','children':[]}
]},
{ 'id': 'd2', 'pid': '', 'name': '技术部' ,'children':[
{ 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部','children':[]}
]}
]

// 封装一个函数
const toArr = (arr) => {
    let res = [];
    let newArr = [];
    newArr = newArr.concat(arr);

    while(newArr.length){
        let first = newArr.shift();   // 每一次都取newArr的第一项出来
        if (first.children) {
            newArr = newArr.concat(first.children);     // 如果第一项有children属性，那么就把这个children放到newArr的最后一项取
            delete first.children;      // 然后再删除children属性
        }
        console.log('first', first);
        res.push(first) 
    }

    return res
}
let arr3 = toArr(arr2)
console.log('arr3', arr3)

最后

希望整理的信息对您有所帮助,如果有什么建议,欢迎在评论区留言

不足之处还请批评指教,谢谢!