JS遍历树层级关系实现原理解析


Posted in Javascript onAugust 31, 2020

1.遍历树的层级关系

1)先整理数据

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

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

代码如下

test() {
   const list = [
    { id: "123", parentId: "", children: [] },
    { id: "124", parentId: "123", children: [] },
    { id: "125", parentId: "124", children: [] },
    { id: "126", parentId: "125", children: [] },
    { id: "127", parentId: "126", 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);
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
js post提交调用方法
Feb 12 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
JavaScript模块详解
Dec 18 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
js实现删除json中指定的元素
Sep 22 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 #Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 #Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 #Javascript
vue中v-model对select的绑定操作
Aug 31 #Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 #Javascript
vue绑定数字类型 value为数字的实例
Aug 31 #Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 #Javascript
You might like
php强制运行广告的方法
2014/12/01 PHP
试用php中oci8扩展
2015/06/18 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
php服务器的系统详解
2019/10/12 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
javascript事件模型介绍
2016/05/31 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
中国跨境电商:Tomtop
2017/03/16 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
动态密码技术
2012/10/18 面试题
就业协议书怎么填
2014/04/11 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
开展警示教育活动总结
2015/05/09 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis