扁平化數據解構轉化成樹形結構

有時候從後臺傳給前端的是扁平化的數據，可是前端爲了生成樹狀結構數據，須要進行一下轉換，下面就是一個將扁平化解構轉換成樹狀結構

/**
        * @description 將扁平化數據 轉換成 樹狀結構
        * @param {Array} arrayList 扁平化的數據
        * @param {String} pidStr parentId的key名
        * @param {String} idStr id的key名
        * @param {String} childrenStr children的key名
        */
       function fommat({arrayList, pidStr = 'pid', idStr = 'id', childrenStr = 'children'}) {
           let listOjb = {}; // 用來儲存{key: obj}格式的對象
           let treeList = []; // 用來儲存最終樹形結構數據的數組
           // 將數據變換成{key: obj}格式，方便下面處理數據
           for (let i = 0; i < arrayList.length; i++) {
               listOjb[arrayList[i][idStr]] = arrayList[i]
           }
           // 根據pid來將數據進行格式化
           for (let j = 0; j < arrayList.length; j++) {
               // 判斷父級是否存在
               let haveParent = listOjb[arrayList[j][pidStr]] 
               if (haveParent) {
                   // 若是有沒有父級children字段，就建立一個children字段
                   !haveParent[childrenStr] && (haveParent[childrenStr] = [])
                   // 在父級裏插入子項
                   haveParent[childrenStr].push(arrayList[j])
               } else {
                   // 若是沒有父級直接插入到最外層
                   treeList.push(arrayList[j])
               }
           }
           return treeList
       }
            

        // 測試數據
        var menu_list = [{
          id: '1',
          menu_name: '設置',
          menu_url: 'setting',
          parent_id: 0
        }, {
          id: '1-1',
          menu_name: '權限設置',
          menu_url: 'setting.permission',
          parent_id: '1'
        }, {
          id: '1-1-1',
          menu_name: '用戶管理列表',
          menu_url: 'setting.permission.user_list',
          parent_id: '1-1'
        }, {
          id: '1-1-2',
          menu_name: '用戶管理新增',
          menu_url: 'setting.permission.user_add',
          parent_id: '1-1'
        }, {
          id: '1-1-3',
          menu_name: '角色管理列表',
          menu_url: 'setting.permission.role_list',
          parent_id: '1-1'
        }, {
          id: '1-2',
          menu_name: '菜單設置',
          menu_url: 'setting.menu',
          parent_id: '1'
        }, {
          id: '1-2-1',
          menu_name: '菜單列表',
          menu_url: 'setting.menu.menu_list',
          parent_id: '1-2'
        }, {
          id: '1-2-2',
          menu_name: '菜單添加',
          menu_url: 'setting.menu.menu_add',
          parent_id: '1-2'
        }, {
          id: '2',
          menu_name: '訂單',
          menu_url: 'order',
          parent_id: 0
        }, {
          id: '2-1',
          menu_name: '報單審覈',
          menu_url: 'order.orderreview',
          parent_id: '2'
        }, {
          id: '2-2',
          menu_name: '退款管理',
          menu_url: 'order.refundmanagement',
          parent_id: '2'
        }, {
          id: '2-2-1',
          menu_name: '退款管理2-1',
          menu_url: 'order.refundmanagement',
          parent_id: '2-2'
        }
    ]

    // 輸出
    console.log(
           fommat({
               arrayList: menu_list,
               pidStr: 'parent_id'
           })
       )