使用JS递归处理树状结构数据

简介: 使用JS递归处理树状结构数据

使用递归进行处理树形数据

实现方式:

<script>
        //原始从服务器返回的数据
        const temp = [
            {"id":7, "parent":0, "name":"test0"},
            {"id":8, "parent":0, "name":"test1"},
            {"id":9, "parent":0, "name":"test2"},
            {"id":68, "parent":0, "name":"test3"},
            {"id":349, "parent":0, "name":"test4"},
            {"id":74, "parent":7, "name":"test5"},
            {"id":20, "parent":8, "name":"test6"},
            {"id":21, "parent":8, "name":"test7"},
            {"id":67, "parent":8, "name":"test8"},
            {"id":185, "parent":9, "name":"test9"},
            {"id":186, "parent":68, "name":"test10"},
            {"id":187, "parent":68, "name":"test11"},
            {"id":188, "parent":68, "name":"test12"},
            {"id":189, "parent":68, "name":"test13"},
            {"id":190, "parent":185, "name":"test14"},
            {"id":191, "parent":185, "name":"test15"},
            {"id":192, "parent":185, "name":"test16"},
            {"id":350, "parent":349, "name":"test17"},
            {"id":351, "parent":349, "name":"test18"},
        ];
        //处理好的数据
        let res = getTree(temp,0,[]);
        console.log(res);//打印观察
        //处理数据方法
        function getTree(list,pid,data){
            //获取所有一级
            for(let item of list){
                if(item.parent == pid){
                    data.push(item);
                }
            }
            //获取子级
            for(let i of data){
                i.children = [];
                getTree(list,i.id,i.children);//递归调用
                if(i.children.length == 0){
                    delete i.children;
                }
            }
            return data;
        }
</script>
相关文章
|
8月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
464 3
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1788 58
|
11月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
425 19
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
JavaScript 前端开发 测试技术
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
618 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
198 7
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
327 4