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 29 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
js实现动态显示时间效果
Mar 06 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
vue开发移动端底部导航条功能
Apr 08 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中如何调用用户自定义函数
2013/08/06 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
Django csrf 两种方法设置form的实例
2019/02/03 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
python字符串查找函数的用法详解
2019/07/08 Python
Python画图高斯分布的示例
2019/07/10 Python
PyTorch中permute的用法详解
2019/12/30 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
费用会计岗位职责
2014/01/01 职场文书
自荐信如何制作?
2014/02/21 职场文书
工作岗位说明书模板
2014/05/09 职场文书
大学生见习报告范文
2014/11/03 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL