js list to tree

在JavaScript中,將列表轉換為樹結構是一種常見的操作,尤其是在處理需要層級展示的數據,如菜單、分類等。這通常涉及到遞歸函數和對象的引用。以下是一個簡單的例子,展示了如何將一個扁平化的列表轉換為多層級樹結構。
假設我們有以下這樣的列表,每個節點有一個 `id` 和一個 `parentId`,表示它的父節點的ID:

const list = [{ id: 1, parentId: null },{ id: 2, parentId: 1 },{ id: 3, parentId: 1 },{ id: 4, parentId: 2 },{ id: 5, parentId: 2 },{ id: 6, parentId: 3 },
];


我們的目標是將這個列表轉換成如下所示的樹結構:

const tree = [{id: 1,parentId: null,children: [{id: 2,parentId: 1,children: [{ id: 4, parentId: 2 },{ id: 5, parentId: 2 }]},{id: 3,parentId: 1,children: [{ id: 6, parentId: 3 }]}]}
];


以下是將列表轉換為樹的JavaScript函數:

function listToTree(items) {const rootItems = [];const lookup = {};for (const item of items) {const itemId = item['id'];const parentId = item['parentId'];if (!lookup[itemId]) lookup[itemId] = { ['children']: [] };lookup[itemId] = { ...item, children: lookup[itemId]['children'] };if (parentId === null) {rootItems.push(lookup[itemId]);} else {if (!lookup[parentId]) lookup[parentId] = { ['children']: [] };lookup[parentId]['children'].push(lookup[itemId]);}}return rootItems;
}
const tree = listToTree(list);
console.log(JSON.stringify(tree, null, 2));


這個函數首先創建一個空的對象 `lookup` 來存儲列表中每個元素的引用,并最終用它來構建樹。然后,它遍歷列表,對于每個元素,將其添加到 `lookup` 對象中,并根據其 `parentId` 將其作為子元素添加到相應的父元素中。最后,函數返回根元素數組 `rootItems`,它包含了整個樹結構。
?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/43162.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/43162.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/43162.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【圖像處理】Krita 一款開源免費專業圖像處理軟件分享

軟件介紹 Krita 是一款專業級的圖像處理軟件,適合數字繪畫和創作。它不僅支持柵格圖像的細致編輯,還提供了強大的矢量圖形工具,使得用戶可以在同一個平臺上完成多種類型的創作工作。同時具備一定的矢量圖形編輯功能。Krita 的首要用途是繪畫…

黑馬點評商戶緩存查詢作業——Redis中查詢商戶類型

記錄下自己在gpt幫助下完成的第一個需求~~~ 1. ShopTypeController 2. IShopTypeService 3. ShopTypeServiceImpl(模仿ShopServiceImpl來寫的) 一共分為“1.redis中查詢緩存”→“2.判斷緩存是否存在,存在直接返回”→“3.緩存不存在則去查數…

2-28 基于matlab提取出頻域和時域信號的29個特征

基于matlab提取出頻域和時域信號的29個特征,主運行文件feature_extraction,fre_statistical_compute和time_statistical_compute分別提取頻域和時域的特征,生成的29個特征保存在生成的feature矩陣中。程序已調通,可直接運行。 2-2…

C語言 printf 函數多種輸出格式以及占位輸出

一、輸出格式 在C語言中,printf 函數提供了多種輸出格式,用于控制不同類型數據的輸出方式。 1.整數輸出格式 %d:以十進制形式輸出整數。 %o:以八進制形式輸出整數(無前導0)。 %x 或 %X:以十六進…

JavaScript里方括號[]的使用

我們知道可用方括號來表示數組或者JSON對象的屬性值,其實在特定場合,方括號還有妙用的。 比如我有數據源是一組JSON,其中有一個屬性是時間字符串,我想對時間的小時、星期、日、月分別進行處理。每條JSON都各自生成一條新的JSON&am…

代碼隨想三刷動態規劃篇9

代碼隨想三刷動態規劃篇9 714. 買賣股票的最佳時機含手續費題目代碼 714. 買賣股票的最佳時機含手續費 題目 鏈接 代碼 class Solution {public int maxProfit(int[] prices, int fee) {//賣的時候-feeif(prices.length1){return 0;}int[][] dp new int[prices.length][2]…

EAI四個層次服務-系統架構師(二十六)

1、(重點)系統應用集成提供了4個不同層次服務,最上層服務是()服務。 解析: EAI(Enterprise Application Integration)系統應用集成,相關概念。 實施EAI必須保證:應用程…

星間鏈路與星地鏈路

目錄 一、星間鏈路 1.1 層內星間鏈路(Intra-layer ISLs) 1.2 層間星間鏈路(Inter-layer ISLs) 1.3 實現方式 1.3.1 微波鏈路 1.3.2 激光鏈路 二、星地鏈路 2.1 星地鏈路的關鍵特性 2.1.2 Ka信關站 2.1.2 Q/V信關站 2.1…

JavaScript中,正則表達式所涉及的api,解析、實例和總結

JS中正則的api包括以下: String#searchString#splitString#matchString#replaceRegExp#testRegExp#exec 1. String#search 查找輸入串中第一個匹配正則的index,如果沒有匹配的則返回-1。g修飾符對結果無影響 var string "abbbcbc"; var r…

react根據后端返回數據動態添加路由

以下代碼都為部分核心代碼 一.根據不同的登錄用戶,返回不同的權限列表 ,以下是三種不同用戶限權列表 const pression { //超級管理員BigAdmin: [{key: "screen",icon: "FileOutlined",label: "數據圖表",},{key: "…

谷粒商城學習筆記-使用renren-fast-vue框架時安裝依賴包遇到的問題及解決策略

文章目錄 1,npm error Class extends value undefined is not a constuctor or null2,npm warn cli npm v10.8.1 does not support Node.js v16.20.2.3,npm error code CERT_HAS_EXPIRED學習心得 這篇文章記錄下使用renren-fast-vue&#xff…

QT學習(6)——QT中的定時器事件,兩種實現方式;事件的分發event,事件過濾器

目錄 引出定時器事件QTimerEventQTimer 事件的分發事件過濾器 總結QT中的鼠標事件定義QLable的鼠標進入離開事件提升為myLabel重寫QLabel的函數鼠標的事件鼠標的左中右鍵枚舉鼠標多事件獲取和鼠標移動鼠標追蹤 QT中的信號和槽自定義信號和槽1.自定義信號2.自定義槽3.建立連接4.…

C++ 類和對象 拷貝構造函數

一 拷貝構造函數的概念: 拷貝構造函數是一種特殊的構造函數,用于創建一個對象是另一個對象的副本。當需要用一個已存在的對象來初始化一個新對象時,或者將對象傳遞給函數或從函數返回對象時,會調用拷貝構造函數。 二 拷貝構造函…

打卡第6天----哈希表

每天進步一點點,滴水石穿,日積月累,不斷提升。 數組和鏈表章節告一段落。開啟哈希表相關的。 哈希表能解決什么問題呢,一般哈希表都是用來快速判斷一個元素是否出現集合里 一、有效的字母異位詞 leetcode題目編號:242 題目描述: 給定兩個字符串 s 和 t ,編寫一個函數…

安裝和配置 MSYS2

MSYS2(Minimal SYStem 2)是一個為Windows平臺提供的輕量級Linux類系統,它集成了大量的GNU工具鏈、工具和庫,為開發者提供了一個類似于Linux的shell環境和完整的開發環境。以下是關于MSYS2的詳細介紹: 一、定義與特點 …

深入理解Java中的泛型編程

深入理解Java中的泛型編程 大家好,我是微賺淘客系統3.0的小編,也是冬天不穿秋褲,天冷也要風度的程序猿! 1. 泛型的基礎概念 在Java中,泛型編程是一種強大的編程范式,它允許我們編寫可以操作各種類型的代…

vagrant遠程連接不上問題

如果使用的是vbox虛擬機的host_only的默認ip為56.1開頭如果使用這個1作為地址,只能使用轉發的形式連接,宿主機使用ssh -p 22222 name127.0.0.1 連接,如果配置的主機位大于1則可以使用虛擬機的ip地址連接。 1使用網絡地址轉換(ant…

Linux忘記密碼重置root密碼、重置普通用戶密碼

重啟看到選項按e reboot 或 init 62、移動到Linux開頭的行在末尾添加 rw init/bin/bash3、按下Ctrlx引導啟動 mount -o remount,rw /輸入命令回車更改密碼,輸入新密碼,別用小鍵盤,容易出錯 passwd輸入兩次校驗,出現updated successfully就…

OceanBase 配置項系統變量實現及應用詳解(1):配置項的定義及使用方法

《OceanBase 配置項&系統變量實現及應用詳解》專題導讀 在使用OceanBase的過程中,看到大家經常會遇到“參數”、“配置項”、“系統變量”等概念,卻不太清楚它們是不是同一個東西,以及應該如何使用。一些對數據庫開發感興趣的朋友&#…

開源大模型對比

隨著chatgpt誕生,開源大模型的也獲得了突飛猛進的進展,值得關注的是國內本地私有大模型已經在很多真實的場景中落地,比如智能客服。美國的技術研發能力遙遙領先,但是不得不說落地應用這塊是我們的強項。企業使用大模型一般需要考慮…