js 数组对象有多层数据，只保留两层的解决办法

最新推荐文章于 2023-10-11 02:38:24 发布

黄香香

最新推荐文章于 2023-10-11 02:38:24 发布

阅读量3k

点赞数 5

分类专栏： JavaScript vue 文章标签： js javascript vue.js

本文链接：https://blog.csdn.net/qq_42292873/article/details/109306573

版权

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

模拟数据：

let nav_list = [{
        name: "权限管理",
        code: "AuthorityManagement",
        url: "",
        component: "",
        children: [{
                name: "角色组管理",
                code: "userRole",
                url: "",
                component: "",
                children: [{
                    name: "添加角色组",
                    code: "addUserRole"
                }]
            },
            {
                name: "用户管理",
                code: "userList",
                url: "",
                component: "",
                children: [{
                    name: "编辑",
                    code: "edit"
                }]
            }
        ]
    },
    {
        name: "系统管理",
        code: "systemManagement",
        url: "",
        component: "",
        children: [{
            name: "应用管理",
            code: "system",
            url: "",
            component: "",
            children: [{
                name: "应用详情",
                code: "systemDetails"
            }]
        }]
    }
]

用JavaScript Array map() 方法遍历：

const result = nav_list.map(item => {
    const children = item.children.map(every => {
        return {
            name: every.name,
            code: every.code,
            url: every.url,
            component: every.component,
        };
    })
    return {
        ...item,
        children: children
    };
})

最后得到的结果：

[{
        name: "权限管理",
        code: "AuthorityManagement",
        url: "",
        component: "",
        children: [{
                name: "角色组管理",
                code: "userRole",
                url: "",
                component: ""
            },
            {
                name: "用户管理",
                code: "userList",
                url: "",
                component: ""
            }
        ]
    },
    {
        name: "系统管理",
        code: "systemManagement",
        url: "",
        component: "",
        children: [{
            name: "应用管理",
            code: "system",
            url: "",
            component: ""
        }]
    }
]