数组和树形结构转换

在JavaScript中如何将有父子关系的一维数组转换成树形结构：
1：首先创建一个有父子结构关系的数组

let arrList = [
      {id:"1",name:"parentNode1",age:"60",parentKey:'0'},
      {id:"2",name:"parentNode2",age:"60",parentKey:'0'},
      {id:"1_1",name:"Node_1",age:"40",parentKey:'1'},
      {id:"1_2",name:"Node_2",age:"41",parentKey:'1'},
      {id:"1_3",name:"Node_3",age:"42",parentKey:'1'},
      {id:"1_4",name:"Node_4",age:"43",parentKey:'1'},
      {id:"1_1_1",name:"childNode_1",age:"20",parentKey:'1_1'},
      {id:"1_1_2",name:"childNode_2",age:"21",parentKey:'1_1'},
      {id:"1_1_3",name:"childNode_3",age:"22",parentKey:'1_1'},
      {id:"1_2_1",name:"childNode_4",age:"20",parentKey:'1_2'},
      {id:"1_2_2",name:"childNode_5",age:"21",parentKey:'1_2'},
      {id:"1_2_3",name:"childNode_6",age:"22",parentKey:'1_2'},
      {id:"1_3_1",name:"childNode_7",age:"20",parentKey:'1_3'},
      {id:"1_3_2",name:"childNode_8",age:"21",parentKey:'1_3'},
      {id:"1_3_3",name:"childNode_9",age:"22",parentKey:'1_3'},
 ];

2：将数组传入格式化的方法(这里要注意parentKey,id,children三个属性)

 function formatArrToTree(arrList){
    //  将没有父节点的元素分离
    const parentsList = arrList.filter(value => value?.parent_sales_team_id === 0);
    const childrens = arrList.filter(value => value?.parent_sales_team_id !== 0);
    //  定义遍历的方法
    const translator = (parents: any[], children: any[]) => {
      //  遍历父节点的数组
      parents.forEach((parent: { sales_team_id: any; children: any[]; }) => {
      //  遍历子节点的数组
        children.forEach((current: any, index: number) => {
          //  找到父节点对应的子节点
          if (current?.parent_sales_team_id === parent?.sales_team_id) {
             // 对子节点数据进行深复制，这里只支持部分类型的数据深复制
            const temp = JSON.parse(JSON.stringify(children));
            //  从temp中移除当前节点，减少递归
            temp.splice(index, 1);
            //  让当前子节点作为唯一的父节点，去递归查找其对应的子节点
            translator([current], temp);
            //  把找到子节点放入父节点的children属性中
            if (typeof parent?.children !== 'undefined') {
                parent?.children.push(current)
            } else {
                parent.children = [current]
            }
            // typeof parent?.children !== 'undefined' ? parent?.children.push(current) : parent.children = [current];
          }
        })
      })
    }
    //  调用转换方法
    translator(parentsList, childrens);
    return parentsList;
      }
      console.log(formatArrToTree(arrList));

树状结构转数组方法

// key代表子节点的对象名
function treeTransArray(tree, key) {
      return tree.reduce(function (con, item) {
        var callee = arguments.callee;
        con.push(item);
        if (item[key] && item[key].length > 0){
          item[key].reduce(callee, con);
        }
        return con;
      }, []).map(function (item) {
        item[key] = [];
        return item;
      })
    }

声明树状对象

let obj = [{
      id:'1',
      name:'顶级父组件',
      parentKey:'0',
      children:[{
        id:'1-1',            
        name:'第1层第1个子组件',
        parentKey:'1',
        children:[{
          id:'1-1-1',
          name:'第2层第1个子组件',
          parentKey:'1-1',
          children:[],            
        },{
          id:'1-1-2',
          name:'第1层第2个子组件',
          parentKey:'1-1',
          children:[],
        },{
          id:'1-1-3',
          name:'第1层第3个子组件',
          parentKey:'1-1',
          children:[],
        }]
      },{
        id:'1-2',
        name:'第1层第2个子组件',
        parentKey:'1-1',
        children:[],
      }],
    }];

    var arr = treeTransArray(obj,'children'); //输出转换后数组
    console.log(arr)