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 相关文章推荐
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
js实现div弹出层的方法
Nov 20 Javascript
Bootstrap插件全集
Jul 18 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
详解js删除数组中的指定元素
Oct 31 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python制作Windows系统服务
2017/03/25 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python开头的coding设置方法
2019/08/08 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python3如何判断三角形的类型
2020/04/12 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
校园门卫岗位职责
2013/12/09 职场文书
二手房买卖协议书
2014/04/10 职场文书
工程材料采购方案
2014/05/18 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
八月迷情观后感
2015/06/11 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android