js 一维数组转成多维数组（菜单列表生成菜单树）

最新推荐文章于 2024-06-04 16:20:21 发布

原创

最新推荐文章于 2024-06-04 16:20:21 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

博客围绕列表中id、p_id关联及嵌套问题展开，给出实现思路。先过滤数据找出一级菜单，将非一级菜单数据存于tmpArr；对tmpArr进行死循环，合格数据从数组删除；循环tmpArr与一级菜单对比id、p_id，不一致时对一级菜单嵌套菜单递归操作。

例子：列表里面有id、p_id进行做关联，可能是嵌套的嵌套.....如何实现？

let arr = [
    {
        id: 1,
        p_id: 0,
        name: '首页'
    },
    {
        id: 2,
        p_id: 0,
        name: '菜单管理'
    },
    {
        id: 3,
        p_id: 0,
        name: '菜单列表'
    },
    {
        id: 4,
        p_id: 1,
        name: '权限管理'
    },
    {
        id: 5,
        p_id: 6,
        name: '管理员列表'
    },
    {
        id: 6,
        p_id: 4,
        name: '角色列表'
    },
];
let treeData = [];


// 过滤一级菜单
let tmpArr = arr.filter(item => {
    if (item.p_id === 0) {
        treeData.push(item);
    } else {
        return item;
    }
});

console.log(treeData);
console.log(tmpArr);


const test = (routes, item, i) => {
    console.log('---test---');
    routes.forEach(routesItem => {
      if (routesItem.id === item.p_id) {
        if