js递归地遍历多维数组并在更改数组键后返回新的多维数组

我们公司目前正在使用VUE作为后台管理系统，该系统根据用户权限显示不同的左菜单. 界面将根据用户权限返回不同的菜单名称和URL. 前端将动态添加这些菜单名称和URL. 在系统左侧，此处使用vue-router2.2添加的router.addRouter（routes）方法. 但是接口返回给我的只是键值对的普通数组js遍历多维数组，而vue-router需要固定格式的路由js遍历多维数组，因此我只能自己将普通数组转换为路由. 具体代码如下:

let json = [
            {
              "id": 64,
              "code": "565",
              "name": "共和国",
              "label": "共和国",
              "parentId": 0,
              "type": 2,
              "seq": 0,
              "url": "/public",
              "description": "同意",
              "children": []
            },
            {
              "id": 1,
              "code": "sys_mgnt",
              "name": "系统管理",
              "label": "系统管理",
              "parentId": 0,
              "type": 1,
              "url": "/system",
              "seq": 1,
              "description": "aaa",
              "children": [
                {
                  "id": 28,
                  "name": "测试二级菜单1",
                  "label": "测试二级菜单1",
                  "parentId": 1,
                  "type": 1,
                  "url": "/add",
                  "seq": 1,
                  "description": "测试二级菜单的描述",
                  "children": [
                      {
                        "id": 288,
                        "name": "三级菜单1",
                        "label": "三级菜单1",
                        "parentId": 11,
                        "type": 1,
                        "url": "/add1",
                        "seq": 1,
                        "description": "三级菜单1的描述",
                        "children": []
                      }                 
                  ]
                },
                {
                  "id": 30,
                  "name": "新增角色管理",
                  "label": "新增角色管理",
                  "parentId": 1,
                  "type": 2,
                  "seq": 1,
                  "description": "新增角色管理的描述",
                  "children": []
                },
                {
                  "id": 31,
                  "name": "add角色管理",
                  "label": "add角色管理",
                  "parentId": 1,
                  "type": 1,
                  "seq": 1,
                  "description": "add角色管理的描述",
                  "children": []
                },
                {
                  "id": 3,
                  "code": "ro_mgnt",
                  "name": "角色管理",
                  "label": "角色管理",
                  "parentId": 1,
                  "type": 1,
                  "url": "",
                  "seq": 2,
                  "children": [
                    {
                      "id": 32,
                      "name": "可以成功",
                      "label": "可以成功",
                      "parentId": 3,
                      "type": 2,
                      "url": "/ctrl",
                      "seq": 1,
                      "description": "能成功吗的描述",
                      "children": []
                    }
                  ]
                }
              ]
            }
          ]
        let routerArr = JSON.parse(JSON.stringify(json));
        function formatRoutes(routerArr){
            const arr = [];
            let obj = {};           
            routerArr.forEach(router => {       
                const tmp = { ...router };
                if(tmp.type == 1){  //只筛选出type=1的项
                    if (tmp.children) {
                        tmp.children = formatRoutes(tmp.children);
                        const {url, children, type} = router;
                        obj = {
                            path: tmp.url,
                            name: tmp.name,
                            meta: {title: tmp.name},
                            children: tmp.children
                        }                       
                    }
                    arr.push(obj);
                }
            })
            return arr;
        }
        let routers = formatRoutes(routerArr);
        console.log(routers);

输出为:

显然，这已经符合基本的路由方式，但是在每个路由配置中仅缺少一个组件，因此即使我们通过递归遍历生成了所需的数组，数组也返回给了我们，但仍然无法满足前端的配置要求，个人建议接口返回固定的路由配置格式，返回的路由应该是已经预先配置好的前端，否则我们组件的路径是什么？否则，我们要跳转到哪里？但这不是本文的重点！

js递归地遍历多维数组，并在修改数组键后返回新的多维数组DEMO（返回的结果可以在浏览器控制台中查看）

本文来自本站，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-253006-1.html