javascript实现扁平数组构建树形结构（多级菜单应用）-优化

来源：互联网发布：查考试成绩的软件编辑：程序博客网时间：2024/06/05 19:08

/**     * 将扁平的结构转换为树形结构     * １将节点分类，分别装到数组的对应层中     * 2 从最后一层向上遍历，将节点赛到上一层他父节点的chilren中     * 　使用限制：     * 　节点必须标有层数表示它在哪一层     *   传入数组中对象必要参数：id, menu_level, parent_id     */    function buildMenu(menuList){        console.time('buildMenu')        let levels = new Array();        for(let i in menuList){            //将每个menuList[i]转成对象，装到levels数组中，在第i层装到level[i-1]中            if(!levels[menuList[i].menu_level]){                levels[menuList[i].menu_level] = new Object();            }            levels[menuList[i].menu_level][menuList[i].id] =　menuList[i];        }        for(let i =  levels.length -1; i > 0; i--){            for(let obj in levels[i]){                //向这个节点的父节点的children里加她自己                if(levels[i - 1][levels[i][obj].parent_id ].children == undefined){                    levels[i - 1][levels[i][obj].parent_id ].children = new Object();                }                levels[i - 1][levels[i][obj].parent_id ].children[levels[i][obj].id] = levels[i][obj];            }        }        console.timeEnd('buildMenu');        return levels[0];    }console.log(buildMenu(menu_list));

实现方式二：

将数组中元素转换为对象，直接查找其父亲节点

function build(menuList){      console.time('build')      let temp = {};      let ans = {};      for(let i in menuList){        temp[menuList[i].id] = menuList[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 {          ans[temp[i].id] =  temp[i];        }      }      console.timeEnd('build');      return ans;    }

下面是测试数据：

var menu_list = [{      id: '1',      menu_icon: '',      menu_name: '设置',      menu_url: 'setting',      menu_level: 0,      parent_id: 0,      isAuth: true    }, {      id: '1-1',      menu_icon: '',      menu_name: '权限设置',      menu_url: 'setting.permission',      menu_level: 1,      parent_id: '1',      isAuth: true    }, {      id: '1-1-1',      menu_icon: '',      menu_name: '用户管理列表',      menu_url: 'setting.permission.user_list',      menu_level: 2,      parent_id: '1-1',      isAuth: true    }, {      id: '1-1-2',      menu_icon: '',      menu_name: '用户管理新增',      menu_url: 'setting.permission.user_add',      menu_level: 2,      parent_id: '1-1',      isAuth: true    }, {      id: '1-1-3',      menu_icon: '',      menu_name: '角色管理列表',      menu_url: 'setting.permission.role_list',      menu_level: 2,      parent_id: '1-1',      isAuth: true    }, {      id: '1-1-4',      menu_icon: '',      menu_name: '角色管理新增',      menu_url: 'setting.permission.role_add',      menu_level: 2,      parent_id: '1-1',      isAuth: true    }, {      id: '1-2',      menu_icon: '',      menu_name: '菜单设置',      menu_url: 'setting.menu',      menu_level: 1,      parent_id: '1',      isAuth: true    }, {      id: '1-2-1',      menu_icon: '',      menu_name: '菜单列表',      menu_url: 'setting.menu.menu_list',      menu_level: 2,      parent_id: '1-2',      isAuth: true    }, {      id: '1-2-2',      menu_icon: '',      menu_name: '菜单添加',      menu_url: 'setting.menu.menu_add',      menu_level: 2,      parent_id: '1-2',      isAuth: true    }, {      id: '2',      menu_icon: '',      menu_name: '订单',      menu_url: 'order',      menu_level: 0,      parent_id: 0,      isAuth: true    }, {      id: '2-1',      menu_icon: '',      menu_name: '报单审核',      menu_url: 'order.orderreview',      menu_level: 1,      parent_id: '2',      isAuth: true    }, {      id: '2-2',      menu_icon: '',      menu_name: '退款管理',      menu_url: 'order.refundmanagement',      menu_level: 1,      parent_id: '2',      isAuth: true    }, {      id: '2-3',      menu_icon: '',      menu_name: '实物订单',      menu_url: 'order.realorder',      menu_level: 1,      parent_id: '2',      isAuth: true    }, {      id: '2-1-1',      menu_icon: '',      menu_name: '全部报单',      menu_url: 'order.orderreview.all',      menu_level: 2,      parent_id: '2-1',      isAuth: true    }, {      id: '2-2-1',      menu_icon: '',      menu_name: '所有记录',      menu_url: 'order.refundmanagement.all',      menu_level: 2,      parent_id: '2-2',      isAuth: true    }, {      id: '2-2-2',      menu_icon: '',      menu_name: '待处理',      menu_url: 'order.refundmanagement.wait',      menu_level: 2,      parent_id: '2-2',      isAuth: true    }, {      id: '2-2-3',      menu_icon: '',      menu_name: '退款原因',      menu_url: 'order.refundmanagement.result',      menu_level: 2,      parent_id: '2-2',      isAuth: true    }, {      id: '2-3-1',      menu_icon: '',      menu_name: '实物订单管理',      menu_url: 'order.realorder.list',      menu_level: 2,      parent_id: '2-3',      isAuth: true    }, {      id: '3',      menu_icon: '',      menu_name: '商品',      menu_url: 'commodity',      menu_level: 0,      parent_id: 0,      isAuth: true    }, {      id: '3-1',      menu_icon: '',      menu_name: '分类管理',      menu_url: 'commodity.classifieldmanagement',      menu_level: 1,      parent_id: '3',      isAuth: true    }, {      id: '3-1-1',      menu_icon: '',      menu_name: '管理',      menu_url: 'commodity.classifieldmanagement.management',      menu_level: 2,      parent_id: '3-1',      isAuth: true    }, {      id: '3-1-2',      menu_icon: '',      menu_name: '编辑或新增',      menu_url: 'commodity.classifieldmanagement.edit',      menu_level: 2,      parent_id: '3-1',      isAuth: true    }, {      id: '3-2',      menu_icon: '',      menu_name: '品牌管理',      menu_url: 'commodity.brandmanagement',      menu_level: 1,      parent_id: '3',      isAuth: true    }, {      id: '3-2-1',      menu_icon: '',      menu_name: '管理',      menu_url: 'commodity.brandmanagement.management',      menu_level: 2,      parent_id: '3-2',      isAuth: true    }, {      id: '3-2-2',      menu_icon: '',      menu_name: '编辑或新增',      menu_url: 'commodity.brandmanagement.edit',      menu_level: 2,      parent_id: '3-2',      isAuth: true    }, {      id: '3-3',      menu_icon: '',      menu_name: '商品管理',      menu_url: 'commodity.commoditymanagement',      menu_level: 1,      parent_id: '3',      isAuth: true    }, {      id: '3-3-1',      menu_icon: '',      menu_name: '管理',      menu_url: 'commodity.commoditymanagement.management',      menu_level: 2,      parent_id: '3-3',      isAuth: true    }, {      id: '3-3-2',      menu_icon: '',      menu_name: '编辑或新增',      menu_url: 'commodity.commoditymanagement.edit',      menu_level: 2,      parent_id: '3-3',      isAuth: true    }, {      id: '3-4',      menu_icon: '',      menu_name: '类型管理',      menu_url: 'commodity.typeManagement',      menu_level: 1,      parent_id: '3',      isAuth: true    }, {      id: '3-4-1',      menu_icon: '',      menu_name: '管理',      menu_url: 'commodity.typeManagement.management',      menu_level: 2,      parent_id: '3-4',      isAuth: true    }, {      id: '3-4-2',      menu_icon: '',      menu_name: '编辑或新增',      menu_url: 'commodity.typeManagement.edit',      menu_level: 2,      parent_id: '3-4',      isAuth: true    }];

阅读全文

0 0