js数据转换 -树形结构转平铺结构，平铺结构转树形结构

树形转平铺

html部分

var text = [
    {name:"鹅鹅",redre:{
        name:"滴滴"
    }},
    {name:"问问",redre:{
        name:"方法"
    }},
    {name:"任天",redre:{
        name:"树形"
    }},
    {name:"鹅鹅",redre:{
        name:"头条"
    }}
]

js的部分

 function arrToTree(arr, pid=null) {

      const res = [];
      arr.forEach(item => {
        if(item.pid === pid) {
          const children = arrToTree(arr.filter(v => v.pid !== pid), item.id);
          if(children.length) {
            res.push({ ...item, children })
          }else {
            res.push({ ...item })
          }
        }
      });
      return res;
    };
    
    const tree = arrToTree(arr);
    console.log(JSON.stringify(arr, null, 2));

平铺转树形

html的部分

 const arr = [
    { pid: null, id: 1, name: '北京' },
    { pid: 1, id: 11, name: '朝阳' },
    { pid: 11, id: 111, name: '朝阳1号' },
    { pid: 1, id: 12, name: '海淀' },
    { pid: 12, id: 121, name: '海淀1号' },
    { pid: null, id: 2, name: '上海' },
    { pid: 2, id: 21, name: '浦东' },
    { pid: 21, id: 211, name: '浦东1号' },
    { pid: 2, id: 22, name: '虹口' },
    { pid: 22, id: 221, name: '虹口1号' }
  ]

js的部分

function arrToTree(arr, pid = null) {
    const res = [];
    arr.forEach(item => {
      if (item.pid === pid) {
        // 这样每次都需要遍历整个数组，因此时间复杂度为 n*n
        // const children = arrToTree(arr, item.id)   
 
        // 往下递归时，每次数组的大小都在减小，每次都筛选掉父代元素，最终的时间复杂度为 n*logn
        const children = arrToTree(arr.filter(v => v.pid !== pid), item.id);
        if (children.length) {
          res.push({ ...item, children })
        } else {
          res.push({ ...item })
        }
      }
    });
    return res;
  };
 
  const tree = arrToTree(arr);
  console.log(JSON.stringify(tree, null, 2))

这样就好了