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选择器(常用选择器说明)
Sep 28 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
原生JS生成指定位数的验证码
Oct 28 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
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
javascript history对象详解
2017/02/09 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
一份创业计划书范文
2014/02/08 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
活动总结报告格式
2014/05/09 职场文书
2016年清明节寄语
2015/12/04 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
python实现会员信息管理系统(List)
2022/03/18 Python