前端處理後端數據生成樹數據的幾種方式

時間 2019-12-04

標籤前端處理後端數據生成樹幾種方式简体版

原文原文鏈接

如今前端開發過程當中,使用到樹結構的機率仍是很高的,如今的後端開發每每是直接返回一個大的數組給你自己組合你想要的數據結構,而不會幫你組裝你想要到數據結構返回的,那麼就需求前端本身處理數據, 將一個大的數組改裝成一個樹結構的數據。前端

1、需求分析

一、後端返回的數據後端

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、方式1、使用遞歸的方式

這種方法比較複雜,此處就不寫了函數

3、方式2、使用`forEach`循環的方式

一、實現的代碼post

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);
複製代碼

二、理解上面的代碼ui

不少人不能理解的地方可能就是map[resource.pid].children.push(resource)這行代碼了, 其實簡單的理解是map[resource.pid]==上面的resource,spa

三、上面的代碼不如之處
- pid必須是0,否則就會拋出異常,侷限性比較大

4、方式3、使用`reduce`函數(推薦使用的方式)

一、代碼的實現3d

// 第一次是將所有的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);
複製代碼