美文网首页
JS----使用归递获取多维数组中的某列值

JS----使用归递获取多维数组中的某列值

作者: JuMinggniMuJ | 来源:发表于2020-10-22 10:33 被阅读0次

需求:在做后台管理系统的时候,后端传过来的侧边栏信息是一个多维嵌套的数组,我想获取嵌套数组中的某一项值组成的新数组

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)
}
6.多次调用,不再重复!

相关文章

网友评论

      本文标题:JS----使用归递获取多维数组中的某列值

      本文链接:https://www.haomeiwen.com/subject/vurumktx.html