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 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
详解使用React制作一个模态框
Mar 14 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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
通达OA公共代码 php常用检测函数
2011/12/14 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
php curl_init函数用法
2014/01/31 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
python 链接和操作 memcache方法
2017/03/04 Python
Python将string转换到float的实例方法
2019/07/29 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python 列表的清空方式
2020/01/13 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
幼师自荐信范文
2013/10/06 职场文书
高中自我鉴定
2013/12/20 职场文书
结婚典礼证婚词
2014/01/11 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
详解Laravel制作API接口
2021/05/31 PHP
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Python学习之时间包使用教程详解
2022/03/21 Python
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL