js 递归json树根据子id 查父id

忘是亡心i 2023-06-08 10:55 156阅读 0赞

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

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

界面结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70][]

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

![2019101811550887.png][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 1][]

如果下一层方法 进入循环第一次依然没有找到 符合的值 ，如果还有子集，则会继续向更下一层进发；就像上图中的红线，直到没有子集才结束，所以千万不让直接 在递归 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，依然无法递归

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70]: /images/20230531/056facfc639b4a47bfc88cb2eb488ecf.png
[2019101811550887.png]: /images/20230531/d4c4e70e4c874ae6b9b9852b8dbfa614.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/a8d94f1101424e4db6ebdb46e2329e22.png