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 base64编码实现代码
Dec 02 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
JS回调函数深入理解
Oct 16 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 连接mysql连接被重置的解决方法
2011/02/15 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python简单贪吃蛇开发
2019/01/28 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python异常处理和日志处理方式
2019/12/24 Python
python Tensor和Array对比分析
2020/01/08 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
python实现126邮箱发送邮件
2020/05/20 Python
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
电子专业毕业生自荐信
2014/05/25 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
python 离散点图画法的实现
2022/04/01 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android