Front end rear end in several ways processing the data spanning tree

Now the front end of the development process, the use of the tree structure of the probability is very high, and now the back-end development is often a large array of direct return to your own combination of data structures you want, but you do not want to help you assemble the returned data structure, then the data processing needs of their front end, a large array of data is converted into a tree structure.

First, the needs analysis

1, the data returned by the backend

let dataList = [
    {
      name: 'f0',
      id: '1',
      pid: '0',
    },
    {
      name: 'f01',
      id: '2',
      pid: '1',
    },
    {
      name: 'f02',
      id: '3',
      pid: '1',
    },
    {
      name: 'f021',
      id: '6',
      pid: '3',
    },
    {
      name: 'f021',
      id: '7',
      pid: '6',
    },
    {
      name: 'f40',
      id: '4',
      pid: '0',
    },
    {
      name: 'f41',
      id: '5',
      pid: '4',
    }
  ];
复制代码

2, data to be handled
3, here are some common ways to help structure the front of a small partner to large arrays spanning tree

Second, a mode, used recursively

This method is more complicated, I do not write here

Third, the second approach, used `forEach`in a cyclic manner

1, to achieve code

let rootMenus = [];
  let map = {};
  dataList.sort((a, b) => a.pid - b.pid);
  dataList.forEach(resource => {
    resource.children = [];
    map[resource.id] = resource;
    if (resource.pid == 0) {
      rootMenus.push(resource);
    } else {
      if (map[resource.pid]) {
        map[resource.pid].children.push(resource)
      } else {
        throw new Error(`当前循环的数据pid=${resource.pid}有错误`);
      }
    }
  })
  console.log(rootMenus);
复制代码

2, be understood that the above code

Many local people may not understand is that map[resource.pid].children.push(resource)this line of code, in fact, a simple understanding map[resource.pid]==上面的resource,

3, the code is better to place the above
- pidIt must be 0, otherwise it will throw an exception, the limitations of relatively large

Fourth, the third approach, using a `reduce`function ( mode recommended )

1, implementation code

// 第一次是将全部的permissionId作为对象的key重组成一个对象
let formatObj = dataList.reduce((pre, cur) => {
  return {...pre, [cur['id']]: cur}
}, {});
console.log(formatObj);

let formatArray = dataList.reduce((arr, cur) => {
  let pid = cur.pid ? cur.pid : 0;
  let parent = formatObj[pid];
  if (parent) {
    parent.children ? parent.children.push(cur) : parent.children=[cur];
  } else {
    arr.push(cur)
  }
  return arr;
}, []);

console.log(formatArray);
复制代码

Five more about the `reduce`use of reference

Reproduced in: https: //juejin.im/post/5d073194f265da1b725c02c0