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 相关文章推荐
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
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中的串行化变量和序列化对象
2006/09/05 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Python提取网页中超链接的方法
2016/09/18 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
如何写一封打动人心的求职信
2014/02/17 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
通用员工手册范本
2015/05/14 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
DIY胆机必读:各国电子管评价
2022/04/06 无线电
MySQL 字符集 character
2022/05/04 MySQL