js 一维数组转成多维数组 根据pid 生成菜单树

一维数组转成多维数组 根据pid对应关系 生成菜单树 

思路1:

function convertToMultiDimensionalArray(arr, pid = 0) {
        let result = [];
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].pid === pid) {
                let children = convertToMultiDimensionalArray(arr, arr[i].id);
                if (children.length > 0) {
                    arr[i].children = children;
                }
                result.push(arr[i]);
            }
        }
        return result;
    }

    // 示例数据
    let flatArray = [
        { id: 1, pid: 0, name: 'Root' },
        { id: 2, pid: 1, name: 'Child 1' },
        { id: 3, pid: 1, name: 'Child 2' },
        { id: 4, pid: 2, name: 'Grandchild 1' },
        { id: 5, pid: 2, name: 'Grandchild 2' },
        { id: 6, pid: 3, name: 'Grandchild 3' },
        { id: 7, pid: 6, name: 'Grandchild 7' },
    ];
    let multiDimensionalArray = convertToMultiDimensionalArray(flatArray);
    console.log(JSON.stringify(multiDimensionalArray, null, 2));

思路2:

const transform = (data) => {
  const map = {}
  const tree = []
  //将每个节点存入map
  data.forEach(item => {
    map[item.id] = item
  })

  data.forEach(item =>{
      if(item.pid === 0)return tree.push(item)// 处理根节点
      const parent = map[item.pid]//处理子节点
      if(!parent)return
      if(!parent.children)parent.children = []
      parent.children.push(item)
  })
    return tree
}

let arr=[
 
   {id:2,pid:1},
  {id:3,pid:1},
  {id:4,pid:2},
  {id:5,pid:2},
  {id:6,pid:3},
  {id:1,pid:0},
  
]
console.log('arr',transform(arr))

思路3:

1.先找到pid是0的生成第一层数组,然后剩下的元素生成一个临时数组

2.循环剩下的数组,找到父元素就push进新数组,并在剩下数组中删除该元素,直到剩下数组为空,停止循环

3.循环里用递归找到所有children,直到找到该元素的父元素

 let oldArr=[
        {id:1,pid:0},
        {id:2,pid:5},
        {id:3,pid:0},
        {id:4,pid:1},
        {id:5,pid:1},
        {id:6,pid:2},
        {id:7,pid:3},
        {id:8,pid:7},
        {id:9,pid:11},
        {id:10,pid:5},
        {id:11,pid:10},
        {id:12,pid:11},
        {id:13,pid:12},
        {id:14,pid:13},
        {id:15,pid:14},
    ]
    let newArr=[]//新的多维数组
    //先找到pid是0的生成第一层数组,然后剩下的元素生成一个临时数组tempArr
    let tempArr=oldArr.filter(item=>{
        if(item.pid===0){newArr.push(item)}
        else{return item}
    })

    //递归循环所有children
    function toDeep(arr,i){
        if(tempArr&&tempArr.length){
            let pid=tempArr[i].pid
            for(let iNew=0;iNew<arr.length;iNew++){
                if(arr[iNew].id==pid){
                    if(arr[iNew].children){
                        arr[iNew].children.push(tempArr[i])
                    }else{
                        arr[iNew].children=[tempArr[i]]
                    }
                    tempArr.splice(i,1)
                    break;
                }else{
                    if(arr[iNew].children){
                        toDeep(arr[iNew].children,i)
                    }
                }
            }
        }
    }
    //循环剩下的数组,找到父元素就push进新数组,并在剩下数组中删除该元素,直到剩下数组为空,停止循环
    while(tempArr.length){
        for(let i=tempArr.length-1;i>=0;i--){
            toDeep(newArr,i)
        }
    }
    console.log(newArr,tempArr);