js递归遍历树形json结构 根据最后一个节点找到整个家族,根据父节点找到所有的子节点,根据层级关系写成树形结构

前端算法:递归算法+案例【使用递归将平级结构转化成树形结构(2套注释分析)】 递归算法+案例【使用递归将平级结构转化成树形结构(2套注释清晰)】 阅读详情
dataTree: [
        { id: 1, address: "安徽", pid: 0 },
        { id: 6, address: "安徽a", pid: 1 },
        { id: 12, address: "安徽aa", pid: 6 },
        { id: 14, address: "安徽aaa", pid: 12 },
        { id: 15, address: "安徽aaaa", pid: 14 },
        { id: 7, address: "安徽b", pid: 1 },
        { id: 13, address: "安徽bb", pid: 7 },
        { id: 2, address: "江苏", pid: 0 },
        { id: 8, address: "江苏a", pid: 2 },
        { id: 9, address: "江苏b", pid: 2 },
        { id: 3, address: "合肥", pid: 0 },
        { id: 10, address: "合肥a", pid: 3 },
        { id: 11, address: "合肥b", pid: 3 }
      ]

定义好层级关系的数组

//根据最后一个找到整个家族
    familyTree(arr, pid) {
      var temp = [];
      var forFn = function(arr, pid) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i];
          if (item.id == pid) {
            temp.push(item);
            forFn(arr, item.pid);
          }
        }
      };
      forFn(arr, pid);
      return temp;
    },
//找到某一父节点下的所有子节点
    sonsTree(arr, id) {
      var temp = [],
        lev = 0;
      var forFn = function(arr, id, lev) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i];
          if (item.pid == id) {
            item.lev = lev;
            temp.push(item);
            forFn(arr, item.id, lev + 1);
          }
        }
      };
      forFn(arr, id, lev);
      return temp;
    },
//将数据写成树结构
    toTree(data) {
      // 删除 所有 children,以防止多次调用
      data.forEach(function(item) {
        delete item.children;
      });

      // 将数据存储为 以 id 为 KEY 的 map 索引数据列
      var map = {};
      data.forEach(function(item) {
        map[item.id] = item;
      });
      //        console.log(map);

      var val = [];
      data.forEach(function(item) {
        // 以当前遍历项,的pid,去map对象中找到索引的id
        var parent = map[item.pid];

        // 如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
          val.push(item);
        }
      });
      return val;
    },

 

JS 将有父子关系的数组转换成树形结构数据 将类似如下数据转换成树形的数据 [{ id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1', parentId: 2 }, { ... 阅读详情

相关推荐

用DTree实现对所有树形结构的增删改查

不管是组织机构,还是功能路径,都是树形结构的展示效果,用ajax技术通过DTree来实现对所有树形结构对象的增删改查

zhuangyangoal的专栏 9976

前端递归循环部门树,根据pid找下级,无限遍历。

今天遇到一个奇葩事请,需要获取部门树,按道理因该是后端直接返回一个树状直接给我的,但是他只返回一个Array数组,让我根据pid找下级,自己组一个树状的,来就来,谁怕谁,直接上代码: 这是后端返回的数据格式: [ {id: 1, organizationId: 1, name: "有限公司", pid: 0} {id: 2, organizationId: 1, name: "键管部", pid: 1} {id: 3, organizationId: 1, name: "技术部", pid:

海贼王某人的博客 1767

js树形数据结构转换,菜单树形数据结构转换,可无限嵌套

var list = [ { "parent_id" : "a", "id" : "a_1", "name" : "a_1" }, { "id":"a", "name": "a" }, { "parent_id" : "a", "id" : "a_2", "name" : "a_2" }, { "parent_id" : "a", "id" : "a_3", "name" : "a_3" }, { "parent_id" : "b", "id":'b_1', "name": .

sun2331的专栏 1676

树状层级json转换数组的尾递归写法

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34148340的博客 362

实现交互式JSON树形特效

随着Web应用的复杂性增加,数据展示方式需要更为直观和层次化。在众多数据可视化技术中,树形结构因其清晰的层级关系和直观的视觉效果脱颖而出。JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,与树形结构的结合使用,为动态生成丰富的用户界面提供了可能。树形特效不仅仅是指视觉上的效果,更关键的是其背后数据结构的逻辑表示和交互方式。

weixin_33759613的博客 834

Unity URP项目里Post Processing死活没效果?别急,这5个坑我帮你踩过了

本文详细解析了Unity URP项目中Post Processing效果不显示的5个常见问题及解决方案,包括管线配置、Volume设置、摄像机选项、Layer冲突和Shader兼容性。通过专业排查步骤和实用代码片段,帮助开发者快速定位并修复后处理效果失效问题,提升项目开发效率。

weixin_28693309的博客 234

js递归查找子节点的方法

表示要查找的节点id。函数首先判断当前节点的id是否与目标id相匹配,如果匹配,则返回当前节点的内容;如果不匹配,则递归遍历当前节点的子节点,直到找到目标id或遍历完所有子节点。表示根节点,"yourId"表示要查找的节点id。函数,可以获取到n级子节点中具有指定id的节点的内容。上述代码定义了一个名为。

u013932564的专栏 2280

Badcase归因分析“四部曲”

badcase是业内的专业名词,简单解释一下。bad是坏,case是案例,说白了就是模型或者具体规则无法很好预测的那些案例。以分类模型为例,本来一个样本应该是负类的,结果预测为正类,那这个样本就能被称为bad case。那相对应的就是good case就是优秀案例。

qq_25438419的博客 3523

js如何获取树状结构某一个节点对应的id或者名称(使用递归)

js 递归 方法 el-cascader 根据id 获取 name, 回显 级联选择器

qq_42174597的博客 3066

手机摄影新宠:In-line Hardware EIS如何让你的4K视频稳如鸡头(附实测对比)

本文深入解析了手机摄影中的In-line Hardware EIS(硬件级行内电子图像稳定)技术。通过对比传统软件EIS,阐述了其通过硬件管道实时处理实现极低延迟、减少画面裁切和有效抑制果冻效应的核心优势,并结合4K视频的日夜间实测,展示了该技术如何让手持拍摄的视频“稳如鸡头”,显著提升创作体验与成片质量。

tree的博客 995

openEuler 22.03 LTS SP4离线安装UKUI桌面全攻略(附依赖包下载)

本文提供openEuler 22.03 LTS SP4系统离线安装UKUI桌面环境的完整实战指南。针对无网络环境,详细解析了利用dnf工具下载依赖包、配置离线软件源、处理依赖冲突及安装后优化的全流程,并附带了关键依赖包资源,帮助运维人员高效完成图形化部署。

c7d8e9的博客 482

树形结构数据递归找出符合条件的第一个叶子节点

最近遇到一个需求,使用ele-tree组件,需要默认选中第一个子节点。 数据结构如下,需要找到第一个isLeaf == true的叶子节点对象,此处即闸站21 const test = [ { name: '泵站', id: 'bengzhan', isLeaf: false, children: [] }, { name: '泵站',

zongmaomx的博客 3993

HPE磁盘阵列管理04——MSA事件

本文介绍了HPE MSA存储系统的事件处理机制,重点分析了常见磁盘故障事件及其解决方案。文章首先定义了MSA事件的五个严重级别(严重、错误、警告、信息和解决),然后详细列举了多个典型事件案例(如事件1、3、6、8、172等),包括每种事件的触发条件、对系统的影响以及具体修复步骤。针对磁盘故障场景,文章提供了更换磁盘、重建磁盘组、取消隔离等操作建议,并强调应及时配置备用磁盘以降低数据风险。最后指出更详细的事件说明可参考《MSA事件描述参考指南》,并提供了HPE官方手册下载链接。全文为技术人员处理MSA存储故障

istrangeboy&begin zero的博客 1121

JavaScript 实现普通数组数据转化为树形数据结构

这个buildTree函数使用了递归的方式来构建树形数据结构。通过过滤、映射和递归调用,它逐层构建每个节点的子节点,直到所有节点的children属性都被正确填充。这种方法简洁且高效,适合处理层级数据。

疯狂假前端的博客 3147

GPU运维工程师入门指南 (第九篇): 高性能网络 - InfiniBand与RDMA技术

本文介绍了支撑AI分布式训练的高性能网络技术InfiniBand和RDMA。传统TCP/IP网络因内核开销和内存拷贝成为性能瓶颈,而InfiniBand提供高带宽、低延迟的专用网络,RDMA则通过内核旁路和零拷贝技术实现节点间内存直接访问,显著提升通信效率。特别介绍了GPUDirect RDMA技术,使GPU显存可直接通信。文章还列举了运维人员在部署这些技术时需要考虑的硬件、驱动、配置和监控等关键点。这些技术共同构成了支撑大规模AI集群的"数据高速公路",为后续讨论存储性能瓶颈奠定了基础

weixin_42587823的博客 1098

Cadence PCB仿真使用Allegro PCB SI S参数配置方法图文教程

S参数即S-Parameter是指散射参数,描述信号在传输线中的正反向传输和正反向反射的情况。本文讲述在使用Allegro PCB SI进行信号完整性仿真前,S参数的配置方法。

fydar的博客 2177

JSON树形结构搜索功能实现

搜索效果如下图所示,左图为搜索前树的内容,右图为搜索后树的内容 树形结构数据如下所示,如果根节点只有一个,最外层数组下只存一个Node对象即可: [ { id: 1, name: 'Node1', children: [ { id: 3, name: 'Node1_1', children: [ { id: ...

Saladbobo的专栏 5441

DeiT详解:知识蒸馏的Transformer

DeiT模型(8600万参数)仅用一台 GPU 服务器在 53 hours train,20 hours finetune,仅使用 ImageNet 就达到了 84.2 top-1 准确性,而无需使用任何外部数据进行训练,性能与最先进的卷积神经网络(CNN)可以抗衡。其核心是提出了针对 ViT 的教师-学生蒸馏训练策略,并提出了方法,使得在视觉领域训练得又快又好。

走在深度学习前沿的小宋 2637

JS数据处理——扁平化数组转换为树形结构

本文介绍了将扁平数组转换为树形结构的三种方法:递归实现、数组高阶方法优化和非递归哈希表实现。递归方法代码简洁但存在性能瓶颈,高阶函数优化可读性更好,而非递归方法通过哈希表提升处理效率,适合大数据场景。文章对比了各方法的时间/空间复杂度,提出性能优化建议,并列举了省市区选择器、组织架构管理等典型应用场景。开发者可根据数据量、层级深度和性能需求选择合适方案,其中非递归方法在处理大规模层次数据时最具优势。

菜喵的博客 2261

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

JavaScript中树形结构扁平化处理的两种方法

本篇博客介绍了JavaScript中树形结构扁平化处理的两种方法:递归处理和非递归处理。根据实际需求和数据规模,您可以选择合适的方法来处理树形结构的数据,以便更好地应用于前端开发中。在本篇博客中,我们将介绍JavaScript中树形结构扁平化处理的两种方法:递归处理和非递归处理。递归处理是一种常见的处理树形结构的方法。它的基本思想是从根节点开始,逐层遍历树的每个节点,将子节点添加到对应的父节点的。首先,我们给出一个示例数据,它表示一个树形结构的数据,每个节点都有id、parentId和name属性。

weixin_60895836的博客 2533

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

递归实现部门树形数据结构

今儿个给大伙来一篇干货,直接上数据结构 构建算法

Roy的博客 1万+

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

java根据父节点递归创建ztree树对象

方法可以自己改动 ,可能有的需要父节点id,有的不用 public List&lt;zTree&gt; treeList(List&lt;zTree&gt; zist , String  zpId) {                 //创建集合接受结果 List&lt;zTree&gt;  list  = new ArrayList&lt;&gt;();                //循...

杨大力的博客 3130

js递归生成树形结构、

后端获取json数组,成树结构,下面直接上代码。 首先集合的数据格式是这样的。 数据: [ { "id": 1, "name": "11111111楼", "parentId": 0 }, { "id": 2, "name": "2楼", "parentId": 0 ...

u013675978的博客 1万+

layui树形组件源数据 ——递归添加

上一篇博客记录了用ztree插件写的树形结构,这篇文章主要是记录使用layui写的树形结构所踩的坑,在写layui中写到了动态的向源数据中添加数据,用到了递归来添加。使用layui写树形结构每一次加载后会折叠结构,体验不好,记录也是为了记录自己的实现过程吧 引入layui <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}"> <script type="text/javascript" th:src="@{/j.

clear-dream 3183

使用js将后台返回的数据转换成树形结构

将类似如下数据转换成树形的数据: [ { id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1', parentId: 2 }, { id: 4, name: '1-2', parentId: 1 }, { id: 5, name: '1-2-2', par...

weixin_30484739的博客 775
上一篇: JavaScript_基本数据类型及转换
下一篇: 解决qq内置浏览器不能改变title的问题
攻城狮狮
博客等级 码龄9年 727粉丝 78原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值