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

有時候從后台傳給前端的是扁平化的數據，但是前端為了生成樹狀結構數據，需要進行一下轉換，下面就是一個將扁平化解構轉換成樹狀結構

     /** * @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' }) )