js 实现无限分级_将数组格式化为树型结构

Naive_Jam

已于 2022-02-26 15:08:05 修改

阅读量401

点赞数

分类专栏： js 文章标签： json 前端 javascript vscode

于 2022-02-26 15:06:55 首次发布

本文链接：https://blog.csdn.net/qq_58340302/article/details/123121881

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

原始数据：

// 原始数据
let dataSource = [
    { id: 1, pid: 0, name: '一级菜单A' },
    { id: 2, pid: 0, name: '一级菜单B' },
    { id: 3, pid: 0, name: '一级菜单C' },
    { id: 4, pid: 1, name: '二级菜单A-A' },
    { id: 5, pid: 1, name: '二级菜单A-B' },
    { id: 6, pid: 2, name: '二级菜单B-B' },
    { id: 7, pid: 2, name: '二级菜单B-C' },
    { id: 8, pid: 6, name: '三级菜单B-B-A' },
    { id: 9, pid: 6, name: '三级菜单B-B-B' },
];

目标数据：

// 目标数据
treeDataRes[
    {
        "id": 1,
        "pid": 0,
        "name": "一级菜单A",
        "children": [
            {
                "id": 4,
                "pid": 1,
                "name": "二级菜单A-A"
            },
            {
                "id": 5,
                "pid": 1,
                "name": "二级菜单A-B"
            }
        ]
    },
    {
        "id": 2,
        "pid": 0,
        "name": "一级菜单B",
        "children": [
            {
                "id": 6,
                "pid": 2,
                "name": "二级菜单B-B",
                "children": [
                    {
                        "id": 8,
                        "pid": 6,
                        "name": "三级菜单B-B-A"
                    },
                    {
                        "id": 9,
                        "pid": 6,
                        "name": "三级菜单B-B-B"
                    }
                ]
            },
            {
                "id": 7,
                "pid": 2,
                "name": "二级菜单B-C"
            }
        ]
    },
    {
        "id": 3,
        "pid": 0,
        "name": "一级菜单C"
    }
]

实现代码：

// js实现代码
// 生成树型结构函数
function treeData(source, id, parentId, children) {
    // 深拷贝 
    // 利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；
    // 序列化的作用是存储和传输
    let cloneData = JSON.parse(JSON.stringify(source))
    // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
    return cloneData.filter(father => {
        let branchArr = cloneData.filter(child => father[id] == child[parentId]);
        branchArr.length > 0 ? father[children] = branchArr : ''
        return father[parentId] == 0 // 表示第一层的parentId是0
    })
}
// 调用，字段名以字符串的形式传参
let treeDataRes = treeData(dataSource, 'id', 'pid', 'children');
console.log(treeDataRes);