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 相关文章推荐
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 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
smarty简单入门实例
2014/11/28 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
大专自我鉴定范文
2013/10/23 职场文书
人力资源专业推荐信
2013/11/29 职场文书
演讲稿怎么写
2014/01/07 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
个人校本研修方案
2014/05/26 职场文书
排查整治工作方案
2014/06/09 职场文书
社团活动总结报告
2014/06/27 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
中学教代会开幕词
2016/03/04 职场文书