JS遍历树层级关系实现原理解析

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);
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS数组及对象遍历方法代码汇总

    文中的范例基于以下数组和对象. var arrTmp = ["value1","value2","value3"]; var objTmp = { aa:"value1", bb:"value2", cc:function(){ console.log("value3") } } 一.JS原生方法 1. javascript遍历的常用的遍历方法是for循环和for-in,ES5的时候加上

  • Javascript如何递归遍历本地文件夹

    打印本地temp folder所有的文件及最后修改时间: <html> <head> <script language="javascript"> var s = ""; var result = []; function FileInfo(path, name,time) { this.path = path; this.name = name; this.time = time; } function showFolderFi

  • JS 遍历 json 和 JQuery 遍历json操作完整示例

    JS 遍历 json 和 JQuery 遍历json操作完整示例

    本文实例讲述了JS 遍历 json 和 JQuery 遍历json操作.分享给大家供大家参考,具体如下: json 遍历 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>demo data</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j

  • JavaScript遍历数组的方法代码实例

    这篇文章主要介绍了JavaScript遍历数组的方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 for循环 let arr=["A","B","C","D","E","F"]; for(let i=0;i<arr.length;i++){ console.log(arr[i]); } for...of 遍历出数组中的每

  • java JSONArray 遍历方式(2种)

    第一种(java8):遍历JSONArray 拼接字符串 public static void main(String[] args) { JSONArray jSONArray = new JSONArray(); JSONObject jb = new JSONObject(); jb.put("id", 1); jb.put("name", "s"); jSONArray.add(jb); JSONObject j1 = new JSONO

  • JS中数组实现代码(倒序遍历数组,数组连接字符串)

    Js中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性. 具体代码如下所示: // =================== 求最大值===================================== <script> var arr = [10,35,765,21345,678,89]; var max = arr [0]; for (var i=0;i< arr.length;i++) { if (max<arr[i]){ max = arr [i]; } }

  • JS 5种遍历对象的方式

    几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的 平时还真没有使用到这个方法,一时不知如何回答 从方法名称来分析,应该是返回的是对象自身属性名组成的数组 那和 Object.keys() 方法不就一样了吗 感觉事情并不这么简单,于是我仔细看了一下这几种遍历对象的方法的区别 for in for in 循环是最基础的遍历对象的方式,它还会得到对象原型链上的属性 // 创建一个对象并指定其原型,bar 为原型上的属性 const obj = Object.

  • JS中如何轻松遍历对象属性的方式总结

    自身可枚举属性 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 .如果对象的键-值都不可枚举,那么将返回由键组成的数组. 这是合理的,因为大多数时候只需要关注对象自身的属性. 来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回自己的属性键: let simpleColors = { colorA: 'white', colorB: 'black' }; let

  • js遍历详解(forEach, map, for, for...in, for...of)

    forEach es5出来的方法,这是我在react中用的最多的遍历方法之一,用法如下: models.forEach(model => app.model(model)); dva里面经常这么写. 写法很简单,经常用于通过这个数组内的数据创造新的结构,但是forEach的问题在于它不能跳出循环. map 也是用的最多的方法之一,用法如下 {data.map(d => ( <div className="balance-row"> <div classNa

  • JS遍历树层级关系实现原理解析

    1.遍历树的层级关系 1)先整理数据 2)找到id和数据的映射关系 3)然后找到父节点的数据,进行存储 代码如下 test() { const list = [ { id: "123", parentId: "", children: [] }, { id: "124", parentId: "123", children: [] }, { id: "125", parentId: "124&qu

  • JS实现微信摇一摇原理解析

    本文为大家分享了JS实现微信摇一摇的原理,供大家参考,具体内容如下 实现原理: 1.微信摇一摇事件需要有硬件支撑,必须要求手机中有陀螺仪 2.在JS中给window添加ondevectionmotion事件.该事件在手机晃动,即手机中的陀螺仪发生旋转,该事件会触发 3.触发ondevectionmotion事件,会产生一个事件对象,通过该对象中的键值(accelerationIncludingGravity)来获得该重力加速器对象 4.重力加速器对象中含有陀螺仪的坐标,通过重力加速器对象.x -

  • JS常用跨域方法实现原理解析

    JS常用跨域方法实现原理解析

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上

  • JS PHP字符串截取函数实现原理解析

    js有三个:slice() substring() substr() 一般都用substr(start,length),第一个参数是开始位置的下标 必须,可以为负数,下标-1 是指字符串中最后一个字符,下标-2 是指倒数第二个字符,以此类推:第二个参数是要截取子串的长度 可选,截取的方向都是从左往右,不会改变. 截取出来的子串包含起始位置自己 PS:字符串的索引都从0开始计起 . 空格都是字符 substring(from,until) slice(from,until)都是从一个索引截取到另一

  • vue.js数据响应式原理解析

    vue.js数据响应式原理解析

    目录 Object.defineProperty() 定义 defineReactive 函数 递归侦测对象的全部属性 流程分析 observe 函数 Observer 类 完善 defineReactive 函数 One More Thing Object.defineProperty() 得力于 Object.defineProperty() 的特性,vue 的数据变化有别于 react 和小程序,是非侵入式的.详细介绍可以看 MDN 文档,这里特别说明几点: get / set 属性是函数

  • 深入解析JS实现3D标签云的原理与方法

    本文实例讲述了深入解析JS实现3D标签云的原理与方法.分享给大家供大家参考,具体如下: 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时也确实不知道怎么在平面上模拟3D,所以也就没去搞了.现在刚好用了canvas搞3D,也发现,好像3D标签云也差不多,然后就写了一下. 具体怎么做呢,先说一下原理,3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标赋给标签,再根据抽象出来的Z轴大小来改变标签的字体

  • JS遍历DOM文档树的方法实例详解

    JS遍历DOM文档树的方法实例详解

    本文实例讲述了JS遍历DOM文档树的方法.分享给大家供大家参考,具体如下: 一 介绍 遍历文档树通过使用parentNode属性.firstChild属性.lastChild属性.previousSibling属性和nextSibling属性来实现. 1.parentNode属性 该属性返回当前节点的父节点. [pNode=]obj.parentNode pNode:该参数用来存储父节点,如果不存在父节点将返回"null". 2.firstChild属性 该属性返回当前节点的第一个子节

  • JS前端广告拦截实现原理解析

    这篇文章主要介绍了JS前端广告拦截实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 主流的浏览器,默认都开启了广告过滤,这对于用户(浏览者)来说,不但加快了访问网页的速度,而且也避免了勿点一些垃圾色情的东西,可以说绿色了网络环境. 第一.对于正常的广告拦截前端开发需要注意的是: 在请求图片与js文件.接口.文件内容最好不要包含ad.guanggao等关键词,可能被拦截 我们可以用一个请求来判断浏览器有没有开启广告拦截,如果我们需要插入

  • js中闭包结合递归等于柯里化原理解析

    引言 我们不妨以两数相加为例子,递进说明. 我们通常是这样写一个函数来求得 两数相加 的值: function sum(a,b){ console.log(a+b) } sum(1,2) 这样写一点毛病没有! 不过呢?问题总会在发展中产生,产品经理又要加一个值,需求:三数相加: 咱通常来说,第一时间,就在原基础上,直接再加一个参数就是了: 于是,修改后像是这样: function sum(a,b,c){ console.log(a+b+c) } sum(1,2,3) 问:这样写,有毛病吗?? 答

  • 阿里面试Nacos配置中心交互模型是push还是pull原理解析

    阿里面试Nacos配置中心交互模型是push还是pull原理解析

    目录 引言 配置中心 长轮询 Nacos初识 几个概念 客户端源码分析 结束语 引言 对于Nacos大家应该都不太陌生,出身阿里名声在外,能做动态服务发现.配置管理,非常好用的一个工具.然而这样的技术用的人越多面试被问的概率也就越大,如果只停留在使用层面,那面试可能要吃大亏. 比如我们今天要讨论的话题,Nacos在做配置中心的时候,配置数据的交互模式是服务端推过来还是客户端主动拉的? 这里我先抛出答案:客户端主动拉的! 接下来咱们扒一扒Nacos的源码,来看看它具体是如何实现的? 配置中心 聊N

随机推荐