數組遍歷區分父子級重排遍歷多維數組

背景：在開發實戰中，後臺傳給前臺的數據是一個數組，數組根據id和pId一一對應具有父子級關係，

如：第一個對象 a.id='1' ;a.pid='0';

第二個對象 b.id='5'; b.pid='1';

第三個對象 c.id='7'; c.pid='5';

這樣，a.pid='0'; a就是爲第一級父元素，b.pid=a.id 則對象a就是對象b的父級， 以此類推，對象b就是對象c的父級。

實戰：先看後臺返回數據

rows: [,…]
0: {id: "1", name: "系統管理", pId: "0", istype: "0", code: "system", page: "/", icon: "", zindex: "999",…}
1: {id: "2", name: "用戶管理", pId: "1", istype: "0", code: "usermanage", page: "/user/userList", icon: "",…}
2: {id: "3", name: "角色管理", pId: "1", istype: "0", code: "rolemanage", page: "/auth/roleManage", icon: "",…}
3: {id: "4", name: "權限管理", pId: "1", istype: "0", code: "permmanage", page: "/auth/permList", icon: null,…}
4: {id: "5", name: "CDN管理", pId: "0", istype: "0", code: "nginx", page: "/", icon: null, zindex: "300",…}
5: {id: "13", name: "節點列表", pId: "5", istype: "0", code: "nginx", page: "/nginx/nodeList", icon: null,…}
6: {id: "14", name: "站點管理", pId: "5", istype: "0", code: "nginx", page: "/nginx/nginxList", icon: null,…}
7: {id: "15", name: "訪問記錄", pId: "5", istype: "0", code: "nginx", page: "/visitor/visitorList",…}
8: {id: "17", name: "nginx統計", pId: "5", istype: "0", code: "nginx", page: "/statis/toNginxStatistic",…}
9: {id: "18", name: "產品管理", pId: "5", istype: "0", code: "nginx", page: "/product/productList",…}
10: {id: "19", name: "安全管理", pId: "5", istype: "0", code: "nginx", page: "/safe/safeManagement",…}
11: {id: "20", name: "站點檢測", pId: "5", istype: "0", code: "nginx", page: "/website/websiteDetection",…}
12: {id: "21", name: "DNS管理", pId: "5", istype: "0", code: "nginx", page: "/dns/dnsManagement", icon: null,…}
13: {id: "22", name: "節點更新", pId: "1", istype: "0", code: "nginx", page: "/sys/sysUpdate", icon: null,…}
14: {id: "23", name: "版本更新", pId: "1", istype: "0", code: "nginx", page: "/version/versionManage",…}
15: {id: "24", name: "操作日誌", pId: "1", istype: "0", code: "system", page: "/sys/toOperateLog", icon: null,…}
16: {id: "25", name: "轉移記錄", pId: "5", istype: "0", code: "nginx", page: "/transfer/transferList",…}
17: {id: "27", name: "1101", pId: "0", istype: "0", code: "2113", page: "211", icon: null, zindex: "1131",…}
18: {id: "29", name: "日誌封禁記錄", pId: "5", istype: "0", code: "nginx", page: "/logBan/logBanList",…}
19: {id: "43", name: "22", pId: "27", istype: "0", code: "22", page: "22", icon: null, zindex: "22",…}
20: {id: "44", name: "23", pId: "43", istype: "0", code: "23", page: "23", icon: null, zindex: "23",…}
21: {id: "45", name: "24", pId: "44", istype: "0", code: "24", page: "24", icon: null, zindex: "24",…}
22: {id: "47", name: "25", pId: "45", istype: "0", code: "", page: "25", icon: null, zindex: null,…}
23: {id: "48", name: "11", pId: "27", istype: "0", code: "", page: "11", icon: null, zindex: null,…}

再看前臺需要展示的樣式

如上圖所示：父級包含子級，層層包含，摺疊展示；

吐槽：由於後臺並沒有最數據處理，需要前臺做處理排序然後按要求展示； 

思路：第一步

數組深度複製，變成兩個相同的數組，然後遍歷去重處理。

//遍歷數組 
circleArray(arr) {
       // 1.根據id個pid建立兩個去重數組
      let pIds = new Set()   
      let ids = new Set()
        // 2.遍歷數組
      for (let item of arr) {
        item.children = []
        pIds.add(item.pId)
        ids.add(item.id)
      }
         //3. 得到兩個去重數組
      pIds = Array.from(pIds)
      ids = Array.from(ids)
         //4.數組深拷貝得到新數組arr2 調用下面遞歸函數
      let arr2 = this.deepCopy(arr)
        //5.再次遍歷數組並調用函數
      for (let ele of arr) {
        this.circleSleep(ele, arr, arr2, pIds)
      }
    },
// 遞歸函數 用於深拷貝
deepCopy(obj) {
      let result = Array.isArray(obj) ? [] : {}
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === 'object') {
            result[key] = this.deepCopy(obj[key]) // 遞歸複製
          } else {
            result[key] = obj[key]
          }
        }
      }
      return result
    },

思路：第二步

根據得到的新數組進行雙重遍歷，重排和刪除多餘元素

// 根據新得到的數組重排篩選數組
circleSleep(ele, arr, arr2, pIds) {
        // 1.遍歷arr2
      for (let item of arr2) {
        // 2.如果arr2的父級pid 等於 arr的id
        if (item.pId === ele.id) {
        // 3.就把arr2的對象push到對應的arr.children[]中
          ele.children.push(item)
        // 4.根據對象的pid相同取出對應下標
          let index3 = arr.findIndex(cur => {
            return cur.pId === item.pId
          })
        // 5.再來判斷pIds數組中是否包含這個元素
          if (pIds.includes(item.id)) {
        // 6.如果有則函數自調用
            this.circleSleep(item, arr, arr2, pIds)
          }
        // 7.根據對應下邊刪除arr中的對象
          arr.splice(index3, 1)
        }
      }
    },

這樣就可以了，你可以得到一個數組對象裏面包含多級數組對象的數組，哈哈有點繞，希望大家可以看懂。