JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解
更新時(shí)間：2022年09月15日 11:55:15 作者：RealPluto
這篇文章主要為大家介紹了JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
問題描述
前端在構(gòu)建國家的省市區(qū)結(jié)構(gòu)時(shí)，接口返回的不是樹形結(jié)構(gòu)，這個(gè)時(shí)候就需要我們進(jìn)行轉(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"
}
]
}
]
}
]
實(shí)現(xiàn)步驟
① 觀察輸入的數(shù)據(jù)結(jié)構(gòu)為二維數(shù)組，每個(gè)數(shù)組中存儲(chǔ)了省市區(qū)的全部數(shù)據(jù)，此時(shí)首先需要將二維數(shù)組一維化，以取得所有的節(jié)點(diǎn)數(shù)據(jù)，用于后續(xù)構(gòu)建樹形結(jié)構(gòu)。
let arr = [].concat.apply([], data)
② 得到所有需要構(gòu)建樹形結(jié)構(gòu)的數(shù)據(jù)后，發(fā)現(xiàn)數(shù)組中存在重復(fù)數(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é)點(diǎn)數(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é)點(diǎn)
data.forEach(item =>{
if (item.parentCode === rootNode) {
list.push(item)
}
})
list.forEach(item => {
item.children = []
// 構(gòu)建子節(jié)點(diǎn)
this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
// 刪除空葉子節(jié)點(diǎn)
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)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JS二維數(shù)組樹形結(jié)構(gòu)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了JavaScript前端分頁實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要講解前端的狀態(tài)管理，狀態(tài)管理李娜就想到：Vuex、Redux、Flux、Mobx等等方案，不論哪種方案只要內(nèi)容一多起來似乎都是令人頭疼的問題，今天來聊一聊前端的狀態(tài)管理，感興趣的小伙伴可以參考參考下面文字具體內(nèi)容2021-10-10
微信小程序之?dāng)?shù)據(jù)雙向綁定與數(shù)據(jù)操作
這篇文章主要介紹了微信小程序之?dāng)?shù)據(jù)雙向綁定與數(shù)據(jù)操作的相關(guān)資料,需要的朋友可以參考下2017-05-05
JSON字符串轉(zhuǎn)換JSONObject和JSONArray的方法
這篇文章主要介紹了JSON字符串轉(zhuǎn)換JSONObject和JSONArray的方法的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了 微信小程序text組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序圖片自適應(yīng)支持多圖實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
JS前端面試數(shù)組扁平化手寫flat函數(shù)示例
這篇文章主要為大家介紹了JS前端面試數(shù)組扁平化手寫flat函數(shù)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
基于遷移學(xué)習(xí)的JS目標(biāo)檢測器構(gòu)建過程詳解
這篇文章主要為大家介紹了基于遷移學(xué)習(xí)的JS目標(biāo)檢測器構(gòu)建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實(shí)現(xiàn)
這篇文章主要介紹關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實(shí)現(xiàn)，防抖就是用戶多次觸發(fā)事件，在用戶一直觸發(fā)事件中，事件不會(huì)執(zhí)行，只有在用戶停止觸發(fā)事件一段時(shí)間之后再執(zhí)行這個(gè)事件一次，二節(jié)流是用戶多次觸發(fā)事件，具體詳情一i起來學(xué)習(xí)下面文章內(nèi)容吧2021-10-10
Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析
這篇文章主要為大家介紹了Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11