這篇文章主要介紹了js中如何使用遞歸json樹實現(xiàn)根據(jù)子id查父id的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)專注于曲江企業(yè)網(wǎng)站建設,響應式網(wǎng)站,商城開發(fā)。曲江網(wǎng)站建設公司,為曲江等地區(qū)提供建站服務。全流程按需網(wǎng)站建設，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務最近做了一個類似用js實現(xiàn)思維導圖的功能，作為思維導圖，一定會有樹狀結(jié)構(gòu)的數(shù)據(jù)產(chǎn)生，在操作里面的節(jié)點時會經(jīng)常需要查找節(jié)點 的父節(jié)點及父節(jié)點。
對于未知層級的樹狀數(shù)據(jù)，用for循環(huán)是無法實現(xiàn)的，因為不知道要循環(huán)幾層，那么最合適的方法就是用js遞歸
界面結(jié)構(gòu)：
json數(shù)據(jù)：
重慶分公司
重慶分公司
"orgTreeData":{
"nodeId":"19A5B",
"nodeName":"預分析用戶：1313.85萬人",
"nodeType":"root",
"expand":true,
"dataCnt":13138494,
"children":[
{
"nodeId":"19A5B_19A5C",
"nodeName":"客戶狀態(tài)",
"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":"包含(營業(yè)銷戶)",
"dataCnt":"0人",
"nodeType":"domain",
"counted":2,
"children":[
{
"nodeId":"19A5B_19A5C_19A60_19A69",
"nodeName":"入網(wǎng)歸屬地域",
"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":"營業(yè)銷戶",
"expressValue5":"營業(yè)銷戶",
"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":"同證件號碼數(shù)量",
"nodeType":"tag",
"children":[
],
"expand":true,
"counted":0,
"condType":"1",
"dataType":1,
"propType":"1",
"propSql":"",
"labelId":"BLD00009",
"linked":false,
"linkedId":""
}
]
}我這個對象結(jié)構(gòu)是按nodeId匹配的，每個下級為children數(shù)組。
如果我想點擊任何一個節(jié)點根據(jù)節(jié)點nodeId得到它的父節(jié)點nodeId，就得把整個json樹遞歸遍歷一遍，知道找到這個節(jié)點，從而得到它的父節(jié)點
關(guān)于遞歸，一定要掌握好結(jié)束條件，懂得何時return，不然會出現(xiàn)返回不出值或者循環(huán)提前結(jié)束的情況。
js代碼：
//傳入?yún)?shù)：需要遍歷的json，需要匹配的id
findPnodeId(data,nodeId){
//設置結(jié)果
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) {
//如果有子集，則把子集作為參數(shù)重新執(zhí)行本方法
result= findPnodeId(item, nodeId);
//關(guān)鍵，千萬不要直接return本方法，不然即使沒有返回值也會將返回return，導致最外層循環(huán)中斷，直接返回undefined,要有返回值才return才對
if(result){
return result;
}
}
}
//如果執(zhí)行循環(huán)中都沒有return，則在此return
return result;
}
總之，遞歸相當于上圖中的軌跡查找。
條件執(zhí)行到 需要 重新執(zhí)行 findPnodeId 方法的地方開始一頭扎進去，如果第下一次執(zhí)行找到了符合條件的值，則return出來，返回上一層，下一層的 findPnodeId 方法結(jié)束，返回值，上一層的findPnodeId方法也就直接return結(jié)束了。
如果下一層方法 進入循環(huán)第一次依然沒有找到 符合的值 ，如果還有子集，則會繼續(xù)向更下一層進發(fā)；就像上圖中的紅線，直到?jīng)]有子集才結(jié)束，所以千萬不讓直接 在遞歸 findPnodeId 方法前直接return，也就是這樣：
else if (item.children && item.children.length > 0) {
return findPnodeId(item, nodeId);
}這樣會使 json在第一條樹軌跡結(jié)束時（上圖中的紅色軌跡）如果找不到值 強制 retrun undefined，因為沒一個方法都向上return，for循環(huán)中，一旦return，會直接打斷循環(huán)，使方法結(jié)束，結(jié)果是最底層 的undefined 直接return到頂層，頂層直接將undefined return出來，根本沒有走第234條線，所以一定要先判斷一下是否返回值再return，像這樣：
} else if (item.children && item.children.length > 0) {
result= this.findPnodeId(item, nodeId);
if(result){
return result;
}
}感謝你能夠認真閱讀完這篇文章，希望小編分享的“js中如何使用遞歸json樹實現(xiàn)根據(jù)子id查父id的方法”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!
