js 递归json树实现根据子id查父id的方法分析


Posted in Javascript onNovember 08, 2019

本文实例讲述了js 递归json树实现根据子id查父id的方法。分享给大家供大家参考,具体如下:

最近做了一个类似用js实现思维导图的功能,作为思维导图,一定会有树状结构的数据产生,在操作里面的节点时会经常需要查找节点 的父节点及父节点。

对于未知层级的树状数据,用for循环是无法实现的,因为不知道要循环几层,那么最合适的方法就是用js递归

界面结构:

js 递归json树实现根据子id查父id的方法分析

json数据:

"orgTreeData":{
  "nodeId":"19A5B",
  "nodeName":"预分析用户:1313.85万人",
  "nodeType":"root",
  "expand":true,
  "dataCnt":13138494,
  "children":[
    {
      "nodeId":"19A5B_19A5C",
      "nodeName":"客户状态",
      "nodeType":"tag",
      "children":[
        {
          "nodeId":"19A5B_19A5C_19A5E",
          "nodeName":"包含(实名制停机,IPBUS帐户封锁停机)",
          "dataCnt":"0人",
          "nodeType":"domain",
          "counted":2,
          "children":[
            {
              "nodeId":"19A5B_19A5C_19A5E_19A67",
              "nodeName":"积分",
              "nodeType":"tag",
              "children":[
              ],
              "expand":true,
              "counted":0,
              "condType":"1",
              "dataType":1,
              "propType":"1",
              "propSql":"",
              "labelId":"BLD00013",
              "linked":false,
              "linkedId":""
            },
            {
              "nodeId":"19A5B_19A5C_19A5E_19A68",
              "nodeName":"是否通信客户",
              "nodeType":"tag",
              "children":[
              ],
              "expand":true,
              "counted":0,
              "condType":"3",
              "dataType":1,
              "propType":"4",
              "propSql":"",
              "labelId":"BLD00010",
              "linked":false,
              "linkedId":""
            }
          ],
          "expand":true,
          "expressType":"7",
          "expressValue1":[
            "17",
            "14"
          ],
          "expressValue2":"",
          "expressValue3":"17##14",
          "expressValue4":"实名制停机##IPBUS帐户封锁停机",
          "expressValue5":"实名制停机,IPBUS帐户封锁停机",
          "linked":false,
          "linkedId":""
        },
        {
          "nodeId":"19A5B_19A5C_19A60",
          "nodeName":"包含(营业销户)",
          "dataCnt":"0人",
          "nodeType":"domain",
          "counted":2,
          "children":[
            {
              "nodeId":"19A5B_19A5C_19A60_19A69",
              "nodeName":"入网归属地域",
              "nodeType":"tag",
              "children":[
                {
                  "nodeId":"19A5B_19A5C_19A60_19A69_19A6A",
                  "nodeName":"包含(鄂尔多斯,阿盟)",
                  "dataCnt":"",
                  "nodeType":"domain",
                  "counted":0,
                  "children":[
                  ],
                  "expand":true,
                  "expressType":"7",
                  "expressValue1":[
                    "477",
                    "482"
                  ],
                  "expressValue2":"",
                  "expressValue3":"477##482",
                  "expressValue4":"鄂尔多斯##阿盟",
                  "expressValue5":"鄂尔多斯,阿盟",
                  "linked":false,
                  "linkedId":""
                }
              ],
              "expand":true,
              "counted":0,
              "condType":"2",
              "dataType":1,
              "propType":"3",
              "propSql":"1005",
              "labelId":"BLD00017",
              "linked":false,
              "linkedId":""
            }
          ],
          "expand":true,
          "expressType":"7",
          "expressValue1":[
            "40"
          ],
          "expressValue2":"",
          "expressValue3":"40",
          "expressValue4":"营业销户",
          "expressValue5":"营业销户",
          "linked":false,
          "linkedId":""
        }
      ],
      "expand":true,
      "counted":0,
      "condType":"2",
      "dataType":1,
      "propType":"3",
      "propSql":"1002",
      "labelId":"BLD00004",
      "linked":false,
      "linkedId":""
    },
    {
      "nodeId":"19A5B_19A61",
      "nodeName":"全球通级别 && 全球通级别",
      "nodeType":"tag",
      "children":[
      ],
      "expand":true,
      "counted":0,
      "condType":"2",
      "dataType":1,
      "propType":"3",
      "propSql":"1004",
      "labelId":"BLD00008",
      "linked":true,
      "linkedId":"19A5B_19A64"
    },
    {
      "nodeId":"19A5B_19A62",
      "nodeName":"同证件号码数量",
      "nodeType":"tag",
      "children":[
      ],
      "expand":true,
      "counted":0,
      "condType":"1",
      "dataType":1,
      "propType":"1",
      "propSql":"",
      "labelId":"BLD00009",
      "linked":false,
      "linkedId":""
    }
  ]
}

我这个对象结构是按nodeId匹配的,每个下级为children数组。

如果我想点击任何一个节点根据节点nodeId得到它的父节点nodeId,就得把整个json树递归遍历一遍,知道找到这个节点,从而得到它的父节点

关于递归,一定要掌握好结束条件,懂得何时return,不然会出现返回不出值或者循环提前结束的情况。

js代码:

//传入参数:需要遍历的json,需要匹配的id
findPnodeId(data,nodeId){
    //设置结果
    let result;
    if (!data) {
        return;//如果data传空,直接返回
    }
    for (var i = 0; i < data.children.length; i++) {
        let item = data.children[i];
        if (item.nodeId == nodeId) {
            result=data.nodeId;
        //找到id相等的则返回父id
            return result;
        } else if (item.children && item.children.length > 0) {
        //如果有子集,则把子集作为参数重新执行本方法
            result= findPnodeId(item, nodeId);
        //关键,千万不要直接return本方法,不然即使没有返回值也会将返回return,导致最外层循环中断,直接返回undefined,要有返回值才return才对
            if(result){
                return result;
            }
        }
    }
    //如果执行循环中都没有return,则在此return
    return result;
}

js 递归json树实现根据子id查父id的方法分析

总之,递归相当于上图中的轨迹查找。

条件执行到 需要 重新执行 findPnodeId 方法的地方开始一头扎进去,如果第下一次执行找到了符合条件的值,则return出来,返回上一层,下一层的 findPnodeId 方法结束,返回值,上一层的findPnodeId方法也就直接return结束了。

js 递归json树实现根据子id查父id的方法分析

如果下一层方法 进入循环第一次依然没有找到 符合的值 ,如果还有子集,则会继续向更下一层进发;就像上图中的红线,直到没有子集才结束,所以千万不让直接 在递归 findPnodeId 方法前直接return,也就是这样:

else if (item.children && item.children.length > 0) {
    return findPnodeId(item, nodeId);
}

这样会使 json在第一条树轨迹结束时(上图中的红色轨迹)如果找不到值 强制 retrun undefined,因为没一个方法都向上return,for循环中,一旦return,会直接打断循环,使方法结束,结果是最底层 的undefined 直接return到顶层,顶层直接将undefined return出来,根本没有走第234条线,所以一定要先判断一下是否返回值再return,像这样:

} else if (item.children && item.children.length > 0) {
    result= this.findPnodeId(item, nodeId);
    if(result){
        return result;
    }
}

那么如果方法前不写return会怎样?

是方法无法return,依然无法递归

Javascript 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 #Javascript
微信小程序在text文本实现多种字体样式
Nov 08 #Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 #Javascript
微信小程序select下拉框实现源码
Nov 08 #Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 #Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 #Javascript
vue中在vuex的actions中请求数据实例
Nov 08 #Javascript
You might like
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python 备份程序代码实现
2017/03/06 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
五好家庭事迹材料
2014/12/20 职场文书
观后感开头
2015/06/19 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL