javascript將扁平的數據轉爲樹形結構的幾種方法

扁平菜單示例以下：
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'
}];

一、 O(n)級算法

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;
}

二、let array = [
{

id: 1,
parent_id: 0,
name: "四川省"

},
{

id: 2,
parent_id: 0,
name: "廣東省"

},
{

id: 3,
parent_id: 0,
name: "江西省"

},
{

id: 5,
parent_id: 1,
name: "成都市"

},
{

id: 6,
parent_id: 5,
name: "錦江區"

},
{

id: 7,
parent_id: 6,
name: "九眼橋"

},
{

id: 8,
parent_id: 6,
name: "蘭桂坊"

},
{

id: 9,
parent_id: 2,
name: "東莞市"

},
{

id: 10,
parent_id: 9,
name: "長安鎮"

},
{

id: 11,
parent_id: 3,
name: "南昌市"

}
]

將扁平的數據轉爲樹形結構的幾種方法
function listToTree(list) {
  let map = {};
  list.forEach(item => {
    if (! map[item.id]) {
      map[item.id] = item;
    }
  });
 
  list.forEach(item => {
    if (item.parent_id !== 0) {
      map[item.parent_id].children ? map[item.parent_id].children.push(item) : 
      map[item.parent_id].children = [item];
    }
  });
   
  return list.filter(item => {
    if (item.parent_id === 0) {
      return item;
    }
  })
}
console.log(listToTree(array));

思路：一、先將數組中的全部元素都複製到 map 中(注意：這裏是引用複製哦，這個細節很重要)
二、時候遍歷 parent_id 不等於 0 的元素，根據當前item的id去和map對象中的引用id進行對比，若是一致就說明該對象就是他的children，而後判斷了是否存在 children，若是不存在則直接給它賦值，不然將值 push 到 children 中。
三、過濾parentid=0的數據