摘要:當變量指向一個對象的時候,實際指向的是存儲地址測試結果數組轉樹的方式節點節點節點節點節點節點節點節點將作為鍵值方便二次遍歷做索引為的是根節點這樣只要遍歷倆次第一次遍歷將數組轉節點對象,存儲到新的對象里,為鍵值方便索引第二次遍歷根據索引插入子
當變量指向一個對象的時候,實際指向的是存儲地址
測試:
a = {val: 123} b = a b.val = 321 console.log(a) // 結果:{val: 321}
數組轉樹的方式:
arr = [ {id: 1, name: "節點1", pid: 0}, {id: 2, name: "節點2", pid: 1}, {id: 3, name: "節點3", pid: 1}, {id: 4, name: "節點4", pid: 2}, {id: 5, name: "節點5", pid: 1}, {id: 6, name: "節點6", pid: 3}, {id: 7, name: "節點7", pid: 4}, {id: 8, name: "節點8", pid: 2} ]; function node(d){ return { name: d.name, id: d.id, pid: d.pid, children: [] } } function tree(arr){ var narr = {}; for (var i in arr) { // 將id作為鍵值方便二次遍歷做索引 narr[arr[i].id] = node(arr[i]); } for (var j in narr) { if(typeof narr[narr[j].pid] != "undefined"){ narr[narr[j].pid].children.push(narr[j]) } } return narr[1] // id為1的是根節點 } console.log(tree(arr))
這樣只要遍歷倆次
第一次遍歷將數組轉節點對象,存儲到新的對象里,id為鍵值方便索引
第二次遍歷根據索引插入子節點
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103135.html
摘要:執行步驟遍歷每一個列表項,對比該項與列表內所有項的,根據對比結果做后續處理如果該項與列表中某項相等,那么把作為的孩子。這里應該還有可優化的地方,歡迎大家提供更多更好的思路,懇請在補充新的方案時,先把思路說清楚,切勿直接扔代碼上來。 背景 在前端開發中,有一種組件是每個前端都繞不過去的,樹組件。在業務中像目錄結構、組織架構、行政區域劃分這些都是典型的樹組件使用場景。一般來說,前端也就是拿...
摘要:由于目前還未開發樹形表格組件,也參閱了網絡上部分基于表格封裝的開源樹形組件,都沒有找的太理想可進行二次開發的開源項目,所以就萌生了自行開發樹形表格。 由于ElementUI目前還未開發樹形表格組件,也參閱了網絡上部分基于ElementUI表格封裝的開源樹形組件,都沒有找的太理想可進行二次開發的開源項目,所以就萌生了自行開發樹形表格。 本示例提供開發思路,移除了多余的樣式,比較適合新手入...
摘要:背景之前寫了一篇列表轉樹的文章,有列表轉樹的需求自然就會有樹轉列表的需求,這里我把樹轉列表的思路與代碼再整理一下。總結樹轉列表過程中,我這里的深度優先采用了遞歸方式,可能會對內存占用較多,使用時請自行權衡。 背景 之前寫了一篇列表轉樹的文章,有列表轉樹的需求自然就會有樹轉列表的需求,這里我把樹轉列表的思路與代碼再整理一下。 思路分析 需求是什么?老規矩,上圖showImg(https:...
摘要:調用自身的函數稱為遞歸函數缺點遞歸占用的內存和資源比較多,同時難以實現和維護。優點在處理之類的樹形結構數據時,非常適合用遞歸。案例數字的階乘通過乘以進行計算獲取存在某個字段的節點某個數或者遞歸實現數組轉樹結構調用 調用自身的函數稱為遞歸函數 缺點:遞歸占用的內存和資源比較多,同時難以實現和維護。 優點:在處理DOM之類的樹形結構數據時,非常適合用遞歸。 案例 數字 n 的階乘通過乘...
摘要:語法數組刪除數組的最后一項語法數組在數組的最末添加一項語法數組刪除數組的首項語法數組在數組的首部添加一項案例分析 1:數組的指針操作: 語法:current(數組) 當前指針指向的單元值(默認是第零個)語法 next(數組) 當前指針往下移動一幀語法 prev(數組) 當前指針往前移動一個指針語法 end(array) 將當前指針移動到最后一項語法 ...
閱讀 3684·2021-10-09 09:44
閱讀 3345·2021-09-22 15:29
閱讀 3117·2019-08-30 15:54
閱讀 3018·2019-08-29 16:19
閱讀 2142·2019-08-29 12:50
閱讀 594·2019-08-26 14:04
閱讀 1696·2019-08-23 18:39
閱讀 1344·2019-08-23 17:59