需求:在做后台管理系统的时候,后端传过来的侧边栏信息是一个多维嵌套的数组,我想获取嵌套数组中的某一项值组成的新数组
1.后端示例数据:
[
{
id:'1',
title:'权限管理',
path:'/admin/sys',
remark:'这是权限管理',
children:[
{
id:'2',
title:'账户管理',
path:'/admin/sys/account',
remark:'这是账户管理',
children:[
{
id:'5',
title:'新增账户',
path:'/admin/sys/addcount',
remark:'这是新增账户',
},
{
id:'6',
title:'编辑账户',
path:'/admin/sys/editcount',
remark:'这是编辑账户',
},
{
id:'7',
title:'删除账户',
path:'/admin/sys/delcount',
remark:'这是删除账户',
}
]
},
{
id:'3',
title:'分组管理',
path:'/admin/sys/group',
remark:'这是分组管理',
children:[
{
id:'8',
title:'新增分组',
path:'/admin/sys/addgroup',
remark:'这是新增分组',
},
{
id:'9',
title:'编辑分组',
path:'/admin/sys/editgroup',
remark:'这是编辑分组',
},
{
id:'10',
title:'授权',
path:'/admin/sys/givegroup',
remark:'这是授权',
},
{
id:'11',
title:'删除分组',
path:'/admin/sys/delgroup',
remark:'这是删除分组',
}
]
},
{
id:'4',
title:'权限列表',
path:'/admin/sys/power',
remark:'这是权限列表',
children:[
{
id:'12',
title:'新增菜单',
path:'/admin/sys/addpower',
remark:'这是新增菜单',
},
{
id:'13',
title:'编辑菜单',
path:'/admin/sys/editpower',
remark:'这是编辑菜单',
},
{
id:'14',
title:'删除菜单',
path:'/admin/sys/delpower',
remark:'这是删除菜单',
}
]
},
]
}
]
2.需求数据:
我想要上面数据中的所有path组成一个新的数组,需求样式:
[
"/admin/sys", "/admin/sys/account", "/admin/sys/addcount",
"/admin/sys/editcount", "/admin/sys/delcount", "/admin/sys/group",
"/admin/sys/addgroup", "/admin/sys/editgroup", "/admin/sys/givegroup",
"/admin/sys/delgroup", "/admin/sys/power", "/admin/sys/addpower",
"/admin/sys/editpower", "/admin/sys/delpower"
]
3.初步封装:
//示例代码:
const keyArr = []
export function getMenu(menuData){
menuData.forEach(item=>{
keyArr.push(item.path)
if(item.hasOwnProperty("children")){
getMenu(item.children)
}
})
return keyArr
}
4.引用js文件并调用:
import {getMenuPath} from 'your_path/getMenuPath.js'
const prepareArr = ['后端传递过来的数组']
let data = getMenuPath(prepareArr )
会发现第一次调用完美!但是连续调用就会一直追加重复的相同数据
5.优化代码:
在每次调用之前重置一下keyArr
const keyArr = []
function getMenu(menuData){
menuData.forEach(item=>{
keyArr.push(item.path)
if(item.hasOwnProperty("children")){
getMenu(item.children)
}
})
return keyArr
}
export function getMenuPath(menuData){
//重置keyArr..
keyArr.splice(0,keyArr.length);
return getMenu(menuData)
}
网友评论