JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹(shù)的方法
一維數(shù)組轉(zhuǎn)樹(shù)結(jié)構(gòu)數(shù)組方法
1. 方法
/** * 將一維數(shù)組轉(zhuǎn)換為樹(shù)結(jié)構(gòu) * @param {Array} data - 輸入的一維數(shù)組 * @return {Array} 樹(shù)結(jié)構(gòu)數(shù)組 */ function arrayToTree(data) { // 創(chuàng)建一個(gè)id映射,用來(lái)快速查找元素 const idMap = {}; // 遍歷數(shù)組,初始化每個(gè)元素的children字段,并將其存入idMap data.forEach(item => { idMap[item.id] = { ...item, children: [] }; }); // 初始化一個(gè)數(shù)組,用來(lái)存儲(chǔ)根節(jié)點(diǎn) const tree = []; // 再次遍歷數(shù)組,根據(jù)parentId建立樹(shù)結(jié)構(gòu) data.forEach(item => { const { id, parentId } = item; if (parentId == '' || parentId == null || parentId == undefined) { // 如果parentId為null或undefined,表示是根節(jié)點(diǎn) tree.push(idMap[id]); } else { // 否則,將當(dāng)前元素添加到其父元素的children字段中 if (idMap[parentId]) { idMap[parentId].children.push(idMap[id]); } } }); return tree; }
使用注意
- 根元素
parentId
的判定條件 - 元素的唯一字段是
id
和父級(jí)字段是parentId
2.數(shù)組結(jié)構(gòu)data
let data = [ { id: '1', parentId: '' }, { id: '1_1', parentId: '1' }, { id: '2', parentId: '' } ];
3.調(diào)用
let tree = arrayToTree(data);
打印結(jié)果
[
{
"id": "1",
"parentId": "",
"children": [
{
"id": "1_1",
"parentId": "1",
"children": []
}
]
},
{
"id": "2",
"parentId": "",
"children": []
}
]
到此這篇關(guān)于JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹(shù)的方法的文章就介紹到這了,更多相關(guān)JS一維轉(zhuǎn)多維數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS記錄用戶(hù)登錄次數(shù)實(shí)現(xiàn)代碼
當(dāng)?shù)卿洿螖?shù)達(dá)到三次,就自動(dòng)調(diào)用函數(shù),隱藏彈出框。下面是具體的實(shí)現(xiàn),感興趣的朋友可以參考下2014-01-01js鼠標(biāo)滑過(guò)彈出層的定位IE6bug解決辦法
大家在寫(xiě)div+css的時(shí)候經(jīng)常會(huì)用到彈出層,由于IE6的bug,所以當(dāng)使用多個(gè)標(biāo)簽重復(fù)寫(xiě)彈出層的時(shí)候會(huì)遇到后面的層壓在了彈出層的上面;用Jquery給彈出層的z軸依次增加高度可解決.代碼很簡(jiǎn)單,效果很顯著,需要了解的朋友可以參考下2012-12-12微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Cropper.js進(jìn)階之實(shí)現(xiàn)圓形頭像裁剪功能示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階之實(shí)現(xiàn)圓形頭像裁剪功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JS自調(diào)用匿名函數(shù)具體實(shí)現(xiàn)
定義一個(gè)函數(shù)用做臨時(shí)的命名空間,在這個(gè)命名空間內(nèi)定義的變量都不會(huì)污染到全局命名空間,需要的朋友可以參考下2014-02-02微信小程序之滑動(dòng)頁(yè)面隱藏和顯示組件功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序之滑動(dòng)頁(yè)面隱藏和顯示組件功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06Javascript中獲取瀏覽器類(lèi)型和操作系統(tǒng)版本等客戶(hù)端信息常用代碼
跟蹤一些最基本的客戶(hù)端訪問(wèn)信息,這里將一些公用的代碼總結(jié)下來(lái),需要的朋友可以參考下2016-06-06