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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
一个js实现的所谓的滑动门
May 23 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
JS随机数产生代码分享
Feb 24 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 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
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php调用shell的方法
2014/11/05 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
求职自荐信怎么写
2014/03/06 职场文书
车辆转让协议书
2014/04/15 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
银行工作心得体会范文
2016/01/23 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
详解Python中__new__方法的作用
2022/03/31 Python