JS遍歷樹層級關(guān)系實現(xiàn)原理解析
更新時間：2020年08月31日 10:03:27 作者：FeelRose
這篇文章主要介紹了JS遍歷樹層級關(guān)系實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
1.遍歷樹的層級關(guān)系
1）先整理數(shù)據(jù)
2）找到id和數(shù)據(jù)的映射關(guān)系
3）然后找到父節(jié)點的數(shù)據(jù)，進行存儲
代碼如下
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);
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS合并兩個數(shù)組的3種方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
在做前端界面開發(fā)的時候，遇到需要改變顏色的需求，就需要使用顏色選擇器。本文就來用JavaScript編寫一個簡單的顏色選擇器，感興趣的可以了解一下2023-02-02
這篇文章主要介紹了詳解微信小程序軌跡回放實現(xiàn)及遇到的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章介紹了5分鐘理解JavaScript中this用法，有需要的朋友可以參考一下2013-11-11
JavaScript實現(xiàn)html轉(zhuǎn)pdf的三種方法詳解
近期項目需要實現(xiàn)將?html?頁面轉(zhuǎn)換成?pdf?報告的需求,經(jīng)過一番調(diào)研以及結(jié)合過往經(jīng)驗,發(fā)現(xiàn)了三種技術(shù)方案,下面我們就來看看它們的具體實現(xiàn)步驟吧2024-02-02
JS表格組件神器bootstrap table詳解（強化版）
這篇文章主要以實例的方式為大家再次介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風(fēng)格，用戶體驗比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2016-05-05
微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變opacity實現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實例形式分析了通過改變opacity實現(xiàn)透明度漸變功能相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
js獲取當(dāng)前年月日詳細(xì)教程(看這一篇就夠了)
這篇文章主要給大家介紹了關(guān)于js獲取當(dāng)前年月日的相關(guān)資料,JavaScript內(nèi)置的Date對象是獲取當(dāng)前日期最常用的工具之一,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
網(wǎng)站登錄為了更好的用戶體驗都會在輸入密碼的時候檢測是否開啟大寫。提醒用戶。2011-02-02
Bootbox.js 是一個小型的 JavaScript 庫用來創(chuàng)建簡單的可編程對話框，基于 Twitter 的 Bootstrap 開發(fā)。今天我們就來研究下，如何使用bootbox插件來實現(xiàn)自定義彈窗。2015-04-04