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(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
老生常谈的跨域处理
Jan 11 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 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 中的输出缓冲
2006/12/21 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
PHP7修改的函数
2021/03/09 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python向excel中写入数据的方法
2019/05/05 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
python PIL模块的基本使用
2020/09/29 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
干部作风建设心得体会
2014/10/22 职场文书
士兵突击观后感
2015/06/16 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
生日宴会祝酒词
2015/08/10 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript