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 相关文章推荐
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
详解Document.Cookie
Dec 25 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
vue实现购物车结算功能
Jun 18 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
星际中的相关伤害
2020/03/04 星际争霸
PHP环境搭建最新方法
2006/09/05 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
Vue实现购物车功能
2017/04/27 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
浅谈React碰到v-if
2018/11/04 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
在Python中使用元类的教程
2015/04/28 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
python如何制作英文字典
2019/06/25 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python简单实现区域生长方式
2020/01/16 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
《鸿门宴》教学反思
2014/04/22 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
文艺演出主持词
2015/07/01 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
导游词之河北野三坡
2019/12/11 职场文书