JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法
一維數(shù)組轉(zhuǎn)樹結(jié)構(gòu)數(shù)組方法
1. 方法
/**
* 將一維數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)
* @param {Array} data - 輸入的一維數(shù)組
* @return {Array} 樹結(jié)構(gòu)數(shù)組
*/
function arrayToTree(data) {
// 創(chuàng)建一個id映射,用來快速查找元素
const idMap = {};
// 遍歷數(shù)組,初始化每個元素的children字段,并將其存入idMap
data.forEach(item => {
idMap[item.id] = { ...item, children: [] };
});
// 初始化一個數(shù)組,用來存儲根節(jié)點(diǎn)
const tree = [];
// 再次遍歷數(shù)組,根據(jù)parentId建立樹結(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和父級字段是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ù)組樹的方法的文章就介紹到這了,更多相關(guān)JS一維轉(zhuǎn)多維數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
bootstrap table插件的分頁與checkbox使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap table插件的分頁與checkbox使用詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
JavaScript設(shè)計(jì)模式之構(gòu)造函數(shù)模式實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之構(gòu)造函數(shù)模式,結(jié)合實(shí)例形式分析了構(gòu)造函數(shù)模式的概念、功能、定義及使用方法,需要的朋友可以參考下2018-07-07
解決mui框架中switch開關(guān)通過js控制開或者關(guān)狀態(tài)時小圓點(diǎn)不動的問題
今天小編就為大家分享一篇解決mui框架中switch開關(guān)通過js控制開或者關(guān)狀態(tài)時小圓點(diǎn)不動的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js,jQuery 排序的實(shí)現(xiàn)代碼,網(wǎng)頁標(biāo)簽排序的實(shí)現(xiàn),標(biāo)簽排序
js,jQuery 排序的實(shí)現(xiàn),網(wǎng)頁標(biāo)簽排序的實(shí)現(xiàn),標(biāo)簽排序,需要的朋友可以參考下。2011-04-04
學(xué)習(xí)JavaScript鼠標(biāo)響應(yīng)事件
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript鼠標(biāo)響應(yīng)事件,為大家分享了一個簡單的鼠標(biāo)模擬案例,感興趣的小伙伴們可以參考一下2015-12-12
js和jquery對dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
本文詳細(xì)介紹下js和jquery對dom節(jié)點(diǎn)的操作包括創(chuàng)建、追加等等,感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04
基于Bootstrap的后臺管理面板 Bootstrap Metro Dashboard
這篇文章主要介紹了基于Bootstrap的后臺管理面板:Bootstrap Metro Dashboard,對Bootstrap的后臺管理面板感興趣的小伙伴們可以參考一下2016-06-06

