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 相关文章推荐
javascript StringBuilder类实现
Dec 22 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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
多文件上传的例子
2006/10/09 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP中SESSION过期设置
2021/03/09 PHP
htm调用JS代码
2007/03/15 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
python动态加载变量示例分享
2014/02/17 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python随机读取文件实现实例
2017/05/25 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
工艺员岗位职责
2014/02/11 职场文书
质量承诺书怎么写
2014/05/24 职场文书
大学英语专业求职信
2014/06/21 职场文书
大学生找工作求职信
2014/07/09 职场文书
大学生学习计划书
2014/09/15 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
清明节寄语2015
2015/03/23 职场文书
大学生实习介绍信
2015/05/05 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
500字作文之周记
2019/12/13 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书