JS遍歷樹(shù)層級(jí)關(guān)系實(shí)現(xiàn)原理解析
更新時(shí)間：2020年08月31日 10:03:27 作者：FeelRose
這篇文章主要介紹了JS遍歷樹(shù)層級(jí)關(guān)系實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
1.遍歷樹(shù)的層級(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)文章
這篇文章主要介紹了JS合并兩個(gè)數(shù)組的3種方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
JavaScript快速實(shí)現(xiàn)一個(gè)顏色選擇器
在做前端界面開(kāi)發(fā)的時(shí)候，遇到需要改變顏色的需求，就需要使用顏色選擇器。本文就來(lái)用JavaScript編寫(xiě)一個(gè)簡(jiǎn)單的顏色選擇器，感興趣的可以了解一下2023-02-02
這篇文章主要介紹了詳解微信小程序軌跡回放實(shí)現(xiàn)及遇到的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章介紹了5分鐘理解JavaScript中this用法，有需要的朋友可以參考一下2013-11-11
JavaScript實(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-02
JS表格組件神器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-01
js獲取當(dāng)前年月日詳細(xì)教程(看這一篇就夠了)
這篇文章主要給大家介紹了關(guān)于js獲取當(dāng)前年月日的相關(guān)資料,JavaScript內(nèi)置的Date對(duì)象是獲取當(dāng)前日期最常用的工具之一,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
輸入密碼時(shí)檢測(cè)大寫(xiě)是否鎖定的js代碼
網(wǎng)站登錄為了更好的用戶體驗(yàn)都會(huì)在輸入密碼的時(shí)候檢測(cè)是否開(kāi)啟大寫(xiě)。提醒用戶。2011-02-02
Yii2使用Bootbox插件實(shí)現(xiàn)自定義彈窗
Bootbox.js 是一個(gè)小型的 JavaScript 庫(kù)用來(lái)創(chuàng)建簡(jiǎn)單的可編程對(duì)話框，基于 Twitter 的 Bootstrap 開(kāi)發(fā)。今天我們就來(lái)研究下，如何使用bootbox插件來(lái)實(shí)現(xiàn)自定義彈窗。2015-04-04