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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
vue 数据操作相关总结
Dec 17 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通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
javascript事件问题
2009/09/05 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
js实现随机点名功能
2020/12/23 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
python批量图片处理简单示例
2019/08/06 Python
Keras设置以及获取权重的实现
2020/06/19 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
教师实习的自我鉴定
2013/10/26 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
投标授权委托书范文
2014/08/02 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
关于保护环境的建议书
2019/06/24 职场文书