1.      /**
    2.         * @description 将扁平化数据 转换成 树状结构
    3.         * @param {Array} arrayList 扁平化的数据
    4.         * @param {String} pidStr parentId的key名
    5.         * @param {String} idStr id的key名
    6.         * @param {String} childrenStr children的key名
    7.         */
    8.        function fommat({arrayList, pidStr = 'pid', idStr = 'id', childrenStr = 'children'}) {
    9.            let listOjb = {}; // 用来储存{key: obj}格式的对象
    10.            let treeList = []; // 用来储存最终树形结构数据的数组
    11.            // 将数据变换成{key: obj}格式，方便下面处理数据
    12.            for (let i = 0; i < arrayList.length; i++) {
    13.                listOjb[arrayList[i][idStr]] = arrayList[i]
    14.            }
    15.            // 根据pid来将数据进行格式化
    16.            for (let j = 0; j < arrayList.length; j++) {
    17.                // 判断父级是否存在
    18.                let haveParent = listOjb[arrayList[j][pidStr]] 
    19.                if (haveParent) {
    20.                    // 如果有没有父级children字段，就创建一个children字段
    21.                    !haveParent[childrenStr] && (haveParent[childrenStr] = [])
    22.                    // 在父级里插入子项
    23.                    haveParent[childrenStr].push(arrayList[j])
    24.                } else {
    25.                    // 如果没有父级直接插入到最外层
    26.                    treeList.push(arrayList[j])
    27.                }
    28.            }
    29.            return treeList
    30.        }
    33.         // 测试数据
    34.         var menu_list = [{
    35.           id: '1',
    36.           menu_name: '设置',
    37.           menu_url: 'setting',
    38.           parent_id: 0
    39.         }, {
    40.           id: '1-1',
    41.           menu_name: '权限设置',
    42.           menu_url: 'setting.permission',
    43.           parent_id: '1'
    44.         }, {
    45.           id: '1-1-1',
    46.           menu_name: '用户管理列表',
    47.           menu_url: 'setting.permission.user_list',
    48.           parent_id: '1-1'
    49.         }, {
    50.           id: '1-1-2',
    51.           menu_name: '用户管理新增',
    52.           menu_url: 'setting.permission.user_add',
    53.           parent_id: '1-1'
    54.         }, {
    55.           id: '1-1-3',
    56.           menu_name: '角色管理列表',
    57.           menu_url: 'setting.permission.role_list',
    58.           parent_id: '1-1'
    59.         }, {
    60.           id: '1-2',
    61.           menu_name: '菜单设置',
    62.           menu_url: 'setting.menu',
    63.           parent_id: '1'
    64.         }, {
    65.           id: '1-2-1',
    66.           menu_name: '菜单列表',
    67.           menu_url: 'setting.menu.menu_list',
    68.           parent_id: '1-2'
    69.         }, {
    70.           id: '1-2-2',
    71.           menu_name: '菜单添加',
    72.           menu_url: 'setting.menu.menu_add',
    73.           parent_id: '1-2'
    74.         }, {
    75.           id: '2',
    76.           menu_name: '订单',
    77.           menu_url: 'order',
    78.           parent_id: 0
    79.         }, {
    80.           id: '2-1',
    81.           menu_name: '报单审核',
    82.           menu_url: 'order.orderreview',
    83.           parent_id: '2'
    84.         }, {
    85.           id: '2-2',
    86.           menu_name: '退款管理',
    87.           menu_url: 'order.refundmanagement',
    88.           parent_id: '2'
    89.         }, {
    90.           id: '2-2-1',
    91.           menu_name: '退款管理2-1',
    92.           menu_url: 'order.refundmanagement',
    93.           parent_id: '2-2'
    94.         }
    95.     ]
    97.     // 输出
    98.     console.log(
    99.            fommat({
    100.                arrayList: menu_list,
    101.                pidStr: 'parent_id'
    102.            })
    103.        )
    1. const arr = [
    2.     {id: 2, name: '部门2', pid: 1},
    3.     {id: 3, name: '部门3', pid: 1},
    4.     {id: 4, name: '部门4', pid: 3},
    5.     {id: 5, name: '部门5', pid: 4},
    6.     {id: 6, name: '部门', pid: 0},
    7.     {id: 1, name: '部门1', pid: 0}
    8. ]
    11. function arrayToTree(items) {
    12.   const result = [];   // 存放结果集
    13.   const itemMap = {};  // 
    15.   // 先转成map存储
    16.   for (const item of items) {
    17.     itemMap[item.id] = {...item, children: []}
    18.   }
    21.   items.forEach(item => {
    22.     const id = item.id;
    23.     const pid = item.pid;
    24.     const treeItem = itemMap[id];
    27.     if (pid === 0) {
    28.         result.push(treeItem);
    29.     } else {
    30.         if (!itemMap[pid]) {
    31.             itemMap[pid] = {
    32.                 children: [],
    33.             }
    34.         }
    35.         itemMap[pid].children.push(treeItem)
    36.     }
    37.   })
    40.   return result;
    41. }
    43. console.log(arrayToTree(arr))
    44. // const arr = [
    45.     {id: 2, name: '部门2', pid: 1},
    46.     {id: 3, name: '部门3', pid: 1},
    47.     {id: 4, name: '部门4', pid: 3},
    48.     {id: 5, name: '部门5', pid: 4},
    49.     {id: 6, name: '部门', pid: 0},
    50.     {id: 1, name: '部门1', pid: 0}
    51. ]
    54. function arrayToTree(items) {
    55.   const result = [];   // 存放结果集
    56.   const itemMap = {};  // 
    58.   // 先转成map存储
    59.   for (const item of items) {
    60.     itemMap[item.id] = {...item, children: []}
    61.   }
    64.   items.forEach(item => {
    65.     const id = item.id;
    66.     const pid = item.pid;
    67.     const treeItem = itemMap[id];
    70.     if (pid === 0) {
    71.         result.push(treeItem);
    72.     } else {
    73.         if (!itemMap[pid]) {
    74.             itemMap[pid] = {
    75.                 children: [],
    76.             }
    77.         }
    78.         itemMap[pid].children.push(treeItem)
    79.     }
    80.   })
    83.   return result;
    84. }
    86. console.log(arrayToTree(arr))