1.遍历树的层级关系

1)先整理数据

2)找到id和数据的映射关系

3)然后找到父节点的数据,进行存储

  test() {
const list = [
{ id: "", parentId: "", children: [] },
{ id: "", parentId: "", children: [] },
{ id: "", parentId: "", children: [] },
{ id: "", parentId: "", children: [] },
{ id: "", parentId: "", children: [] }
];
const mapList = [];
const tree = [];
list.forEach(item => { mapList[item.id] = item;
});
list.forEach(item => {
const parentNode = mapList[item.parentId];
if (!parentNode) {
       if (!item.children) {
         item.children = []
       }
          tree.push(item);
} else {
      if (!parentNode.children) {
        parentNode.children = []
      }
          parentNode.children.push(item);
}
});
console.log("tree", tree);
},

js 遍历树的层级关系的实现的更多相关文章

  1. Web中树形数据(层级关系数据)的实现—以行政区树为例

    在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...

  2. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

  3. Vue 使用Spread.js没有层级关系(隐藏与显示)

    Vue 使用Spread.js没有层级关系(隐藏与显示) 1.vue会给元素加一个监控属性.去掉 spread.js没有层级关系过半是column中值的问题

  4. HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  5. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  6. 【吐血分享】SQL Server With As 递归获取层级关系数据

    纯洁的一周又开始了,今天看到一则新闻,笑尿了,和袁友们一起娱乐下 最近两月在做基于Saas模式的人力资源管理产品,平常数据库设计我经常会遇到如下需求场景: 以前商城类网站在设计类型表的时候,设计成单表 ...

  7. java遍历树(深度遍历和广度遍历

    java遍历树如现有以下一颗树:A     B          B1               B11          B2               B22     C          C ...

  8. 路径字符串数据转化为树型层级对象,path to json tree

    由于项目中使用了react 及 ant-design ,在使用tree树型控件时,需要 类似下面的数据, const treeData = [{ title: '0-0', key: '0-0', c ...

  9. 探索未知种族之osg类生物---状态树与渲染树以及节点树之间的关系

    节点树 首先我们来看一个场景构建的实例,并通过它来了解一下“状态节点”StateGraph 和“渲染叶”RenderLeaf 所构成的状态树,“渲染台”RenderStage 和“渲染元”Render ...

随机推荐

  1. ByteBuffer: 图解ByteBuffer(转)

    ByteBuffer前前后后看过好几次了,实际使用也用了一些,总觉得条理不够清晰. <程序员的思维修炼>一本书讲过,主动学习,要比单纯看资料效果来的好,所以干脆写个详细点的文章来记录一下. ...

  2. 小D课堂 - 零基础入门SpringBoot2.X到实战_第1节零基础快速入门SpringBoot2.0_1、SpringBoot2.x课程介绍和高手系列知识点

    1 ======================1.零基础快速入门SpringBoot2.0 5节课 =========================== 1.SpringBoot2.x课程全套介绍 ...

  3. PHP7 serialize_precision 配置不当导致 json_encode() 浮点小数溢出错误

    https://blog.csdn.net/moliyiran/article/details/81179825 感谢 @地狱星星:原因已找到, 该现象只出现在PHP 7.1+版本上建议使用默认值 s ...

  4. openresty开发系列20--lua的时间操作

    openresty开发系列20--lua的时间操作 在 Lua 中,函数 time.date 和 difftime 提供了所有的日期和时间功能.在 OpenResty 的世界里,不推荐使用这里的标准时 ...

  5. openresty开发系列17--lua中的正则表达式

    与其他脚本语言不同的是,Lua并不使用POSIX规范的正则表达式[4](也写作regexp)来进行模式匹配.主要的原因出于程序大小方面的考虑:实现一个典型的符合POSIX标准的regexp大概需要40 ...

  6. shell编程系列20--文本处理三剑客之awk常用选项

    shell编程系列20--文本处理三剑客之awk常用选项 awk选项总结 选项 解释 -v 参数传递 -f 指定脚本文件 -F 指定分隔符 -V 查看awk的版本号 [root@localhost s ...

  7. Python3基础 函数 多值参数 元组与字典形式(使用星号对列表与字典进行拆包)

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  8. linux部署php网页

    liunx环境下运行php和传统的Java web程序不一样.我直接放在tomcat下竟然不行. 安装了php的一些环境,还是访问不了,原因是不支持https访问.没办法,还是得用tomcat,同时我 ...

  9. php环境选择

    第一个    PHPStudy 推荐这个.简单好用. 链接:https://pan.baidu.com/s/1yWRDjfnadkkUE-JX5pqZmg 提取码:4imw 第二个 PHPnow 第三 ...

  10. java使用Sonic 算法对音频变速不变声、变调、调整音量

    依赖库:https://github.com/waywardgeek/sonic 基础库:Sonic.java /* Sonic library Copyright 2010, 2011 Bill C ...