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 相关文章推荐
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
node.js超时timeout详解
Nov 26 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
vue-ajax小封装实例
Sep 18 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
Jquery Fade用法详解
Nov 06 jQuery
Vue的过滤器你真了解吗
Feb 24 Vue.js
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
php $_ENV为空的原因分析
2009/06/01 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
js实现产品缩略图效果
2017/03/10 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
介绍一下linux文件系统分配策略
2012/11/17 面试题
治超工作实施方案
2014/05/04 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
保安2014年终工作总结
2014/12/06 职场文书
学历证明样本
2015/06/16 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
OpenCV 图像梯度的实现方法
2021/07/25 Python
MySQL的存储过程和相关函数
2022/04/26 MySQL