JS遍歷樹層級(jí)關(guān)系實(shí)現(xiàn)原理解析
1.遍歷樹的層級(jí)關(guān)系
1)先整理數(shù)據(jù)
2)找到id和數(shù)據(jù)的映射關(guān)系
3)然后找到父節(jié)點(diǎn)的數(shù)據(jù),進(jìn)行存儲(chǔ)
代碼如下
test() { const list = [ { id: "123", parentId: "", children: [] }, { id: "124", parentId: "123", children: [] }, { id: "125", parentId: "124", children: [] }, { id: "126", parentId: "125", children: [] }, { id: "127", parentId: "126", children: [] } ]; const mapList = []; const tree = []; list.forEach(item => { mapList[item.id] = item; }); list.forEach(item => { const parentNode = mapList[item.parentId]; if (!parentNode) { if (!item.children) { item.children = [] } tree.push(item); } else { if (!parentNode.children) { parentNode.children = [] } parentNode.children.push(item); } }); console.log("tree", tree); },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript快速實(shí)現(xiàn)一個(gè)顏色選擇器
在做前端界面開發(fā)的時(shí)候,遇到需要改變顏色的需求,就需要使用顏色選擇器。本文就來(lái)用JavaScript編寫一個(gè)簡(jiǎn)單的顏色選擇器,感興趣的可以了解一下2023-02-02JavaScript實(shí)現(xiàn)html轉(zhuǎn)pdf的三種方法詳解
近期項(xiàng)目需要實(shí)現(xiàn)將?html?頁(yè)面轉(zhuǎn)換成?pdf?報(bào)告的需求,經(jīng)過(guò)一番調(diào)研以及結(jié)合過(guò)往經(jīng)驗(yàn),發(fā)現(xiàn)了三種技術(shù)方案,下面我們就來(lái)看看它們的具體實(shí)現(xiàn)步驟吧2024-02-02JS表格組件神器bootstrap table詳解(強(qiáng)化版)
這篇文章主要以實(shí)例的方式為大家再次介紹了JS表格組件神器bootstrap table,bootstrap table界面采用扁平化的風(fēng)格,用戶體驗(yàn)比較好,更好兼容各種客戶端,需要了解更多bootstrap table的朋友可以參考下2016-05-05微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過(guò)改變opacity實(shí)現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實(shí)例形式分析了通過(guò)改變opacity實(shí)現(xiàn)透明度漸變功能相關(guān)操作技巧,需要的朋友可以參考下2019-01-01js獲取當(dāng)前年月日詳細(xì)教程(看這一篇就夠了)
這篇文章主要給大家介紹了關(guān)于js獲取當(dāng)前年月日的相關(guān)資料,JavaScript內(nèi)置的Date對(duì)象是獲取當(dāng)前日期最常用的工具之一,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12Yii2使用Bootbox插件實(shí)現(xiàn)自定義彈窗
Bootbox.js 是一個(gè)小型的 JavaScript 庫(kù)用來(lái)創(chuàng)建簡(jiǎn)單的可編程對(duì)話框,基于 Twitter 的 Bootstrap 開發(fā)。今天我們就來(lái)研究下,如何使用bootbox插件來(lái)實(shí)現(xiàn)自定義彈窗。2015-04-04