JavaScript实现无限级递归树

atinosun 发布于2019-08-23 16:30 / 1250人阅读

摘要：需求最近遇到一个需求，平时被后台惯着直接返回了树形结构给到前端，前端对这种嵌套类型的数据如地区的级联或菜单的树形结构省掉了一层处理。当然，没用好就相当于一堆废铁，甚至将导致一些不可预料的结果。相比起递归，我更喜欢这种方法。

需求

最近遇到一个需求，平时被后台惯着直接返回了树形结构给到前端，前端对这种嵌套类型的数据（如地区的级联或菜单的树形结构）省掉了一层处理。换了个后台小哥哥返回了扁平化的数组数据给到前端自己去处理如下data。突然有点慌......

const data = [
    {
        "area_id": 5,
        "name": "广东省",
        "parent_id": 0,
    },  
    {
        "area_id": 6,
        "name": "广州市",
        "parent_id": 5,
    },
    {
        "area_id": 7,
        "name": "深圳市",
        "parent_id": 5,
    },
    {
        "area_id": 4,
        "name": "北京市",
        "parent_id": 3,
    },
    {
        "area_id": 3,
        "name": "北京",
        "parent_id": 0,
    },
    {
        "area_id": 2,
        "name": "测试子地区",
        "parent_id": 1,
    },
    {
        "area_id": 1,
        "name": "测试地区",
        "parent_id": 0,
    }
]

emmm，换个念头想想也刚好锻炼锻炼，撸起袖子干吧，然后就总结了以下两种整理方法~

方法一——递归

在这种那么适合递归的场景，怎么能少了递归这个角色呢？第一种方法，递归出场！献上递归宝器~

function toTreeData(data,pid){
 
    function tree(id) {
        let arr = []
        data.filter(item => {
            return item.parent_id === id;
        }).forEach(item => {
            arr.push({
                area_id: item.area_id,
                label: item.name,
                children: tree(item.area_id)
            })
        })
        return arr
    }
    return tree(pid)  // 第一级节点的父id，是null或者0，视情况传入
}

恩，姿势摆好，在控制台里执行一下

哎哟，不错哦~后台小哥哥再也不担心需要返回什么数据给我了。不过，该方法有个缺点，在我使用组件的时候需要的数据结构中，如果子级没有数据children返回[]。恩，有点问题，但是还是可以优化的，优化的代码我会那么容易给出来吗？你已经是个成熟的程序猿了，需要学会自己优化代码了！！！

方法二——对象

对象在我眼里一直是倚天屠龙宝刀的存在，了解到其中的奥妙便形同有一武林秘籍傍身。当然，没用好就相当于一堆废铁，甚至将导致一些不可预料的结果。

function setTreeData(arr) {
    //  删除所有 children,以防止多次调用
    arr.forEach(function (item) {
            delete item.children;
    });
    let map = {}; // 构建map
    arr.forEach(i => {
        map[i.area_id] = i; // 构建以area_id为键 当前数据为值
    });

    let treeData = [];
    arr.forEach(child => {
        const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中

        if (mapItem) { // 存在则表示当前数据不是最顶层数据
        
            // 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
            (mapItem.children || ( mapItem.children = [] )).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
        } else { // 不存在则是组顶层数据
            treeData.push(child);
        }
    });

    return treeData;
};

console.log(setTreeData(data)); // 输出整理后的数据

结果我就不执行了，跟递归的结果相似。相比起递归，我更喜欢这种方法。不过这种方法有一种容易犯错的地方，就是它会改变原数据，我就在这里踩了好久的坑，所以一开始采用了删除children的初始化了一遍。记住了吗，没记住自行重复说三遍！！！

总结

以上简单介绍了两种将扁平化数据转化为递归树的方法，学会了吗，没学会再回去好好撸撸码!！目前我遇到需要将数据整理树形结构的主要在菜单栏或分类的树形结构上，当然还有像省市这种有从属关系的结构。不过就算以后遇到了都唔驶惊啦~恩，继续更新总结中....

GPU云服务器云服务器 java的递归树 java递归遍历树 java递归算法树 php 递归遍历树

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103094.html

在数据库中存储一棵树，实现无限级分类

摘要：第三条同样需要递归，因为通过一个分类，数据库中只存储了其直属父类，需要通过递归到顶级分类才能获取到它们之间的所有分类信息。原文发表于我的博客： https://blog.kaciras.net/article/36 在一些系统中，对内容进行分类是必需的功能。比如电商就需要对商品做分类处理，以便于客户搜索；论坛也会分为很多板块；门户网站、也得对网站的内容做各种分类。分类对于一个内容展...

Airy 2019-08-15 15:21 评论0 收藏0
分层数据Hierarchical Data探索(1.递归)

摘要：分层数据探索例如无限级分类多级菜单省份城市引言什么是分层数据类似于树形结构，除了根节点和叶子节点外，所有节点都有一个父节点和一个或多个子节点。接下来我会先通过一般方法和递归方法来实现无限极分类，然后再通过两种数据模型来谈一谈分层数据的处理。分层数据Hierarchical Data探索（例如：无限级分类、多级菜单、省份城市）引言什么是分层数据？类似于树形结构，除了根节点和叶子节...

yzd 2019-07-01 12:47 评论0 收藏0
手风琴效果递归组件实战（vue）

摘要：大家想想一想这个组件最终效果形成一个树形结构里面有相同的模块这个是手风琴组件中最小的组件单元。再次点击节点就会开启子树。 show 效果 showImg(https://segmentfault.com/img/bV90qc?w=500&h=300); 说说我的思路数据结构 {flag:1,data:[{id:1,name:书法类型,child:[{id:2,name:硬笔},{id...

noONE 2019-08-22 16:58 评论0 收藏0
laravel-nestedset：多级无限分类正确姿势

摘要：通过自定义的查询加载和大多数情况下，你需要按层级排序祖先集合可以被预加载视图模板中面包屑将祖先的全部取出后转换为数组，在用拼接为字符串输出。原文链接：http://www.pilishen.com/posts...; 欢迎作客我们的php&Laravel学习群：109256050 laravel-nestedset是一个关系型数据库遍历树的larvel4-5的插件包目录： Nes...

pf_miles 2019-06-28 18:20 评论0 收藏0