js使用reduce實現扁平化數組轉換為樹形數據

關於reduce

  arr.reduce(callback,init)
  reduce為遍歷數組，為每一個元素執行回調函數，回調函數中接收四個參數
    prev：上一次回調返回的值，或者是提供的初始值init（如果Init存在，不存在回調函數會從下標為1的元素開始執行）;
    cur：當前被處理的元素;
    index：當前元素在數組中的索引;
    arr：調用reduce方法的原數組

示例數據

let Arr=[
    {
       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'
    }
 ]

邏輯代碼

    let treeList = Arr.reduce((prev,cur)=>{
      prev[cur['id']] = cur;
      return prev
    },{})
    // console.log(treeList)
    let result = Arr.reduce((prev,cur)=>{
      let pid = cur.parent_id;
      // pid為0的就找不到父對象，找到當前cur的父對象
      // 對象的淺拷貝，引用關系存在，在后面處理parent的時候也會導致cur的改變，達到遞歸的效果
      let parent = treeList[pid]
      // console.log(parent,1)
      // 如果父對象存在，就將cur壓到父對象的children屬性中
      if(parent){
        // parent和cur存在引用關系
        parent.children? parent.children.push(cur) : parent.children = [cur]
      } else if(pid === 0){
        // 沒有父對象，則此cur為樹的根元素
        prev.push(cur)
      }
      return prev
    },[])
    // console.log(result)