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 动态改变图片大小
Jun 11 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
javascript 中模板方法单例的实现方法
Oct 17 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
express 项目分层实践详解
Dec 10 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
JS函数进阶之继承用法实例分析
Jan 15 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
Phpbean路由转发的php代码
2008/01/10 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js图片预加载示例
2014/04/30 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
python简单文本处理的方法
2015/07/10 Python
理解Python垃圾回收机制
2016/02/12 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python实现梯度下降算法
2020/03/24 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
Django中的静态文件管理过程解析
2019/08/01 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
初三学习决心书
2014/03/11 职场文书
会议室标语
2014/06/21 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL