JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解
更新時間：2022年09月15日 11:55:15 作者：RealPluto
這篇文章主要為大家介紹了JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
問題描述
前端在構(gòu)建國家的省市區(qū)結(jié)構(gòu)時，接口返回的不是樹形結(jié)構(gòu)，這個時候就需要我們進行轉(zhuǎn)化。以下數(shù)據(jù)為例
[
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872940,
"parentCode": "000001001",
"nodeCode": "000001001001",
"name": "上城區(qū)",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872961,
"parentCode": "000001001",
"nodeCode": "000001001002",
"name": "下城區(qū)",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872980,
"parentCode": "000001001",
"nodeCode": "000001001003",
"name": "臨安區(qū)",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873196,
"parentCode": "000001",
"nodeCode": "000001002",
"name": "寧波市",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"name": "溫州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873468,
"parentCode": "000001003",
"nodeCode": "000001003002",
"name": "平陽縣",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"name": "溫州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873486,
"parentCode": "000001003",
"nodeCode": "000001003003",
"name": "文成縣",
"districtType": "HUADONG",
"districtTypeName": null
}
]
]
[
{
"label": "浙江省",
"value": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"children": [
{
"label": "杭州市",
"value": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"children": [
{
"label": "上城區(qū)",
"value": 1586533872940,
"parentCode": "000001001",
"nodeCode": "000001001001"
},
{
"label": "下城區(qū)",
"value": 1586533872961,
"parentCode": "000001001",
"nodeCode": "000001001002"
},
{
"label": "臨安區(qū)",
"value": 1586533872980,
"parentCode": "000001001",
"nodeCode": "000001001003"
}
]
},
{
"label": "寧波市",
"value": 1586533873196,
"parentCode": "000001",
"nodeCode": "000001002"
},
{
"label": "溫州市",
"value": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"children": [
{
"label": "平陽縣",
"value": 1586533873468,
"parentCode": "000001003",
"nodeCode": "000001003002"
},
{
"label": "文成縣",
"value": 1586533873486,
"parentCode": "000001003",
"nodeCode": "000001003003"
}
]
}
]
}
]
實現(xiàn)步驟
① 觀察輸入的數(shù)據(jù)結(jié)構(gòu)為二維數(shù)組，每個數(shù)組中存儲了省市區(qū)的全部數(shù)據(jù)，此時首先需要將二維數(shù)組一維化，以取得所有的節(jié)點數(shù)據(jù)，用于后續(xù)構(gòu)建樹形結(jié)構(gòu)。
let arr = [].concat.apply([], data)
② 得到所有需要構(gòu)建樹形結(jié)構(gòu)的數(shù)據(jù)后，發(fā)現(xiàn)數(shù)組中存在重復數(shù)據(jù)
arrayToTree(data, rootNode) {
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
}
③ 數(shù)據(jù)規(guī)范化處理，把所有的數(shù)據(jù)處理成需要的節(jié)點數(shù)據(jù)
arrayToTree(data, rootNode) {
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
// 2.數(shù)組規(guī)范化
let result = []
reduceArr.forEach(item => {
result.push({
label:item.name,
value:item.districtId,
parentCode:item.parentCode,
nodeCode:item.nodeCode,
children: []
})
})
}
④ 采用遞歸的方式構(gòu)建樹形結(jié)構(gòu)
getTreeList(data, rootNode, list,{label, value,parentCode, nodeCode, children}) {
// 構(gòu)建父節(jié)點
data.forEach(item =>{
if (item.parentCode === rootNode) {
list.push(item)
}
})
list.forEach(item => {
item.children = []
// 構(gòu)建子節(jié)點
this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
// 刪除空葉子節(jié)點
if (item.children.length === 0) {
delete item.children;
}
})
return list;
}
完整代碼
arrayToTree(data, rootNode, {label = 'label', value = 'value',parentCode = 'parentCode', nodeCode = 'nodeCode', children = ''} = {}) {
// 1.數(shù)組去重
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
// 2.數(shù)組規(guī)范化
let result = []
reduceArr.forEach(item => {
result.push({
label:item.name,
value:item.districtId,
parentCode:item.parentCode,
nodeCode:item.nodeCode,
children: []
})
})
// 3.構(gòu)建樹形結(jié)構(gòu)
return this.getTreeList(result,rootNode,[],{
label,value,parentCode,nodeCode,children
});
},
// 遞歸構(gòu)建樹形結(jié)構(gòu)
getTreeList(data, rootNode, list,{label, value,parentCode, nodeCode, children}) {
data.forEach(item =>{
if (item.parentCode === rootNode) {
list.push(item)
}
})
list.forEach(item => {
item.children = []
this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
if (item.children.length === 0) {
delete item.children;
}
})
return list;
},以上就是JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解的詳細內(nèi)容，更多關于JS二維數(shù)組樹形結(jié)構(gòu)的資料請關注腳本之家其它相關文章！
相關文章
JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 action-sheet底部菜單詳解的相關資料,并附實例代碼，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序獲取用戶openId的實現(xiàn)方法的相關資料,需要的朋友可以參考下2017-05-05
動態(tài)引入DynamicImport實現(xiàn)原理
這篇文章主要為大家介紹了動態(tài)引入DynamicImport實現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
本文主要介紹Google 地圖類型,這里整理了Google 地圖類型的基本知識資料，并附簡單的示例代碼便于大家學習參考，希望能幫助有需要的小伙伴2016-08-08
微信小程序 加載 app-service.js 錯誤解決方法
這篇文章主要介紹了微信小程序 加載 app-service.js 錯誤詳解的相關資料,在開發(fā)微信小程序過程中出現(xiàn)了app-services.js的錯誤，并解決此問題，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序中用WebStorm使用LESS的相關資料,需要的朋友可以參考下2017-03-03
Flutter?WebView性能優(yōu)化使h5像原生頁面一樣優(yōu)秀
這篇文章主要為大家介紹了Flutter?WebView性能優(yōu)化使h5像原生頁面一樣優(yōu)秀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序與php 實現(xiàn)微信支付的簡單實例的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序 歡迎界面開發(fā)的實例詳解的相關資料,這里實現(xiàn)歡迎界面的簡單實例和實現(xiàn)代碼及實現(xiàn)效果圖，需要的朋友可以參考下2016-11-11