用递归解析一个嵌套多层的数组

有如下一个数组:

let menuBean = [
   ['images/1.png','页面1','router1','index1'],
   ['images/2.png','页面2',null,'index2',
       ['images/2.png','页面2-1','router2','index3'],
       ['images/2.png','页面2-2','router3','index4']],
   ['images/3.png','页面3',null,'index5',
       ['images/3.png','页面3-1',null,'index6',
           ['images/3.png','页面3-1-1','router4','index7']],
       ['images/.png','页面3-2',null,'index8',
           ['images/3.png','页面3-2-1','router5','index9'],
           ['images/3.png','页面3-2-2','router6','index10']]],
   ['images/4.png','页面4',null,'index11',
       ['images/4.png','页面4-1',null,'index12',
           ['images/4.png','页面4-1-1',null,'index13',
               ['images/4.png','页面4-1-1-1','router7','index14'],
               ['images/4.png','页面4-1-1-2','router8','index15']
           ]],           
       ['images/4.png','页面4-2',null,'index16',
           ['images/4.png','页面4-2-1','router9','index17']]],
];
( 第一项是img,第二项是title,第三项是path,第四项是index,第五项是childs)

要把这个数组构造成如下的数据格式:

在这里插入图片描述

代码:

let menuBean = [
     ['images/1.png','页面1','router1','index1'],
     ['images/2.png','页面2',null,'index2',
         ['images/2.png','页面2-1','router2','index3'],
         ['images/2.png','页面2-2','router3','index4']],
     ['images/3.png','页面3',null,'index5',
         ['images/3.png','页面3-1',null,'index6',
             ['images/3.png','页面3-1-1','router4','index7']],
         ['images/.png','页面3-2',null,'index8',
             ['images/3.png','页面3-2-1','router5','index9'],
             ['images/3.png','页面3-2-2','router6','index10']]],
     ['images/4.png','页面4',null,'index11',
         ['images/4.png','页面4-1',null,'index12',
             ['images/4.png','页面4-1-1',null,'index13',
                 ['images/4.png','页面4-1-1-1','router7','index14'],
                 ['images/4.png','页面4-1-1-2','router8','index15']
             ]],           
         ['images/4.png','页面4-2',null,'index16',
             ['images/4.png','页面4-2-1','router9','index17']]],
 ];
 let menuData = [];
 var id = 0;
 for(var i = 0;i < menuBean.length;i++){
     var obj = {};
     obj.id = id++;    
     obj.img = menuBean[i][0];
     obj.title = menuBean[i][1];
     obj.path = menuBean[i][2];
     obj.index = menuBean[i][3];
     menuData.push(obj);

     obj.childs = [];
     if(menuBean[i].length > 4){
     	obj.hasChildren = true;
     	obj.type = "submenu";//有二级菜单的项
     }else{
    	obj.hasChildren = false;
     	obj.type = "item";//没有二级菜单的项
     }
     for(var j = 4;j < menuBean[i].length;j++){
     	obj.childs.push(generatesubMenu(obj,menuBean[i][j])); 
     }
 }
 //创建二级菜单
 function generatesubMenu(parent,subMenuBean){
     var obj = {};
     obj.id = id++;
     obj.img = subMenuBean[0];
     obj.title = subMenuBean[1];
     obj.path = subMenuBean[2];
     obj.index = subMenuBean[3];
     obj.parent = parent;
     obj.childs = []; 
     if (subMenuBean.length > 4) {//有childs
         obj.hasChildren = true;
         obj.type = "submenu";
         for (var i = 4;i < subMenuBean.length;i++) {
             var item = subMenuBean[i];
             obj.childs.push(generatesubMenu(obj,item));
         }     
     }else{            
         obj.hasChildren = false;
         obj.type = "item";
     }
     return obj;
 }
 console.log('****menuData=',menuData) 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值