本文介绍在JavaScript中如何利用递归算法遍历未知层级的JSON树状数据结构，以根据子节点ID查找其父节点ID。文章通过思维导图场景示例，详细解析了递归函数的编写要点、结束条件的判断以及返回值处理逻辑，并指出了常见错误如直接return导致循环中断的问题，提供了正确的代码实现与调试建议。
递归查找父节点ID概述
本文通过具体实例，详细解析了使用JavaScript递归算法遍历JSON树结构，从而实现根据子节点ID查找父节点ID的方法。内容旨在为开发者提供清晰的参考与实现思路。
在开发类似思维导图的功能时，系统必然会产生树状结构的数据。在实际操作节点的过程中，频繁需要定位当前节点的父节点及其更上层的祖先节点。
面对层级未知的树状数据，传统的for循环难以应对，因为无法预先确定需要嵌套循环的层数。因此，采用JavaScript递归是解决此类问题的最佳方案。
界面结构如下：
对应的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对应的父节点ID，则必须对整个JSON树进行递归遍历，直至找到目标节点，进而提取其父节点的nodeId。
编写递归函数时，必须严格掌握结束条件，明确何时执行return语句。否则，可能导致无法返回预期值或循环提前终止等错误。
JavaScript递归代码实现
具体的JavaScript代码实现如下：
//传入参数：需要遍历的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;
}
递归执行逻辑与注意事项
从逻辑上看，递归过程类似于在树结构中追踪查找路径。
当执行流到达需要重新调用findPnodeId方法的位置时，函数会深入下一层。若在某一层找到了符合条件的值，则通过return返回该值。随后，当前层的findPnodeId方法结束并向上层返回结果，上层方法接收到返回值后直接return结束执行。
若下一层方法进入循环后首次未找到符合的值，且该节点仍存在子集，则递归将继续向更深层级推进。这类似于图中红色轨迹所示的路径，直到确认无子集时才结束。因此，严禁在递归调用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语句会发生什么？
这会导致方法无法正确返回结果，递归逻辑依然无法生效。
PS：关于JSON数据的处理，这里推荐几款实用的在线工具供参考：
在线JSON代码检验、格式化与美化工具： http://tools.jb51.net/code/json
JSON在线格式化工具： http://tools.jb51.net/code/jsonformat
在线XML与JSON互相转换工具： http://tools.jb51.net/code/xmljson
JSON代码在线格式化、美化、压缩、编辑及转换工具： http://tools.jb51.net/code/jsoncodeformat
在线JSON压缩与转义工具： http://tools.jb51.net/code/json_yasuo_trans
如需了解更多JavaScript相关内容，可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文所述的实现方法对大家的JavaScript程序设计工作有所帮助。