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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
jquery实现提示语淡入效果
May 05 jQuery
hammer.js实现图片手势放大效果
Aug 29 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
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的性能
2013/10/30 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
原生JS实现天气预报
2020/06/16 Javascript
Python入门篇之面向对象
2014/10/20 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
在校生党员自我评价
2013/09/25 职场文书
高二化学教学反思
2014/01/30 职场文书
小学庆六一活动总结
2014/08/28 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Python实现为PDF去除水印的示例代码
2022/04/03 Python