javascript將扁平的資料轉為樹形結構 O(n)級演算法_huyao的部落格-CSDN部落格 https://blog.csdn.net/qq_37746973/article/details/78664079

當我們需要將一個一維陣列轉換成一個多層結構的時候，最簡單但是最慢的就是多個for迴圈巢狀，但是這樣做有一些缺點，那就是效率太低、而且有多少層就需要巢狀幾個for迴圈，不好用。

我實現了用O(n)級演算法將 一個扁平的陣列即一維陣列代表的選單結構轉換成一個多層級的選單結構。

一位陣列中每一個元素必須要包含以下屬性：

擁有一個唯一的id
擁有一個parent_id, 這個id指向它父級的id
其他則為每一個元素中的一些資訊，我這裡是選單，就有選單的名稱和url資訊。

注：

在層級結構中，第一層的parent_id需要為0.
扁平陣列例：

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'
}
]

實現演算法buildTree

演算法思想：

先將陣列中的每一個節點放到temp物件中（建立map）
即陣列中有{id: '2-3', parent_id: '2',...}這樣一個節點，需要將他放到temp中變成 '2-3': {id: '2-3', parent_id: '2',...}這種JSON結構
直接遍歷整個temp物件，通過這句程式碼 temp[temp[i].parent_id].children[temp[i].id] = temp[i]; 將當前子節點與父節點建立連線。是因為我們保證了父節點一定在子節點前，那麼當子節點出現的時候就直接可以用temp[temp[i].parent_id]來查詢到父節點這個時候先父節點的children物件中新增一個引用即可。

/**
* 將一維的扁平陣列轉換為多層級物件
* @param {[type]} list 一維陣列，陣列中每一個元素需包含id和parent_id兩個屬性 
* @return {[type]} tree 多層級樹狀結構
*/
function buildTree(list) {
  let temp = {};
  let tree = {};
  for (let i in list) {
    temp[list[i].id] = list[i];
  }
  for (let i in temp) {
    if (temp[i].parent_id) {
      if (!temp[temp[i].parent_id].children) {
        temp[temp[i].parent_id].children = new Object();
      }
      temp[temp[i].parent_id].children[temp[i].id] = temp[i];
    } else {
      tree[temp[i].id] = temp[i];
    }
  }
  return tree;
}

測試結果：

可以看到函式成功地構建了多級的樹狀結構

這個演算法的效率是極高的，比多重for迴圈來的好得多。

以下是測試資料，用時只需5毫秒左右：

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-1-4',
  menu_name: '角色管理新增',
  menu_url: 'setting.permission.role_add',
  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-3',
  menu_name: '實物訂單',
  menu_url: 'order.realorder',
  parent_id: '2'
}, {
  id: '2-1-1',
  menu_name: '全部報單',
  menu_url: 'order.orderreview.all',
  parent_id: '2-1'
}, {
  id: '2-2-1',
  menu_name: '所有記錄',
  menu_url: 'order.refundmanagement.all',
  parent_id: '2-2'
}, {
  id: '2-2-2',
  menu_name: '待處理',
  menu_url: 'order.refundmanagement.wait',
  parent_id: '2-2'
}, {
  id: '2-2-3',
  menu_name: '退款原因',
  menu_url: 'order.refundmanagement.result',
  parent_id: '2-2'
}, {
  id: '2-3-1',
  menu_name: '實物訂單管理',
  menu_url: 'order.realorder.list',
  parent_id: '2-3'
}, {
  id: '3',
  menu_name: '商品',
  menu_url: 'commodity',
  parent_id: 0
}, {
  id: '3-1',
  menu_name: '分類管理',
  menu_url: 'commodity.classifieldmanagement',
  parent_id: '3'
}, {
  id: '3-1-1',
  menu_name: '管理',
  menu_url: 'commodity.classifieldmanagement.management',
  parent_id: '3-1'
}, {
  id: '3-1-2',
  menu_name: '編輯或新增',
  menu_url: 'commodity.classifieldmanagement.edit',
  parent_id: '3-1'
}, {
  id: '3-2',
  menu_name: '品牌管理',
  menu_url: 'commodity.brandmanagement',
  parent_id: '3'
}, {
  id: '3-2-1',
  menu_name: '管理',
  menu_url: 'commodity.brandmanagement.management',
  parent_id: '3-2'
}, {
  id: '3-2-2',
  menu_name: '編輯或新增',
  menu_url: 'commodity.brandmanagement.edit',
  parent_id: '3-2'
}, {
  id: '3-3',
  menu_name: '商品管理',
  menu_url: 'commodity.commoditymanagement',
  parent_id: '3'
}, {
  id: '3-3-1',
  menu_name: '管理',
  menu_url: 'commodity.commoditymanagement.management',
  parent_id: '3-3'
}, {
  id: '3-3-2',
  menu_name: '編輯或新增',
  menu_url: 'commodity.commoditymanagement.edit',
  parent_id: '3-3'
}, {
  id: '3-4',
  menu_name: '型別管理',
  menu_url: 'commodity.typeManagement',
  parent_id: '3'
}, {
  id: '3-4-1',
  menu_name: '管理',
  menu_url: 'commodity.typeManagement.management',
  parent_id: '3-4'
}, {
  id: '3-4-2',
  menu_name: '編輯或新增',
  menu_url: 'commodity.typeManagement.edit',
  parent_id: '3-4'
}];

這是我一個大二學生想出來的，挺開心的，因為當時看到老師用的3個for迴圈巢狀。
————————————————