成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

列表轉(zhuǎn)樹(shù)的實(shí)現(xiàn)思路與代碼

starsfun / 3214人閱讀

摘要：執(zhí)行步驟遍歷每一個(gè)列表項(xiàng)，對(duì)比該項(xiàng)與列表內(nèi)所有項(xiàng)的，根據(jù)對(duì)比結(jié)果做后續(xù)處理如果該項(xiàng)與列表中某項(xiàng)相等，那么把作為的孩子。這里應(yīng)該還有可優(yōu)化的地方，歡迎大家提供更多更好的思路，懇請(qǐng)?jiān)谘a(bǔ)充新的方案時(shí)，先把思路說(shuō)清楚，切勿直接扔代碼上來(lái)。

背景

在前端開(kāi)發(fā)中，有一種組件是每個(gè)前端都繞不過(guò)去的，樹(shù)組件。在業(yè)務(wù)中像目錄結(jié)構(gòu)、組織架構(gòu)、行政區(qū)域劃分這些都是典型的樹(shù)組件使用場(chǎng)景。一般來(lái)說(shuō)，前端也就是拿來(lái)一個(gè)封裝好的控件，然后傳入符合要求的數(shù)據(jù)結(jié)構(gòu)就完事了。但是，有的時(shí)候我們拿到的東西可能并不完美，比如服務(wù)端給我們返回了一個(gè)列表，列表中每一項(xiàng)之間的父子關(guān)系通過(guò)id與parentId來(lái)確定，那么問(wèn)題來(lái)了，我們?nèi)绾卧谇岸税堰@樣的列表數(shù)據(jù)轉(zhuǎn)換成樹(shù)結(jié)構(gòu)的數(shù)據(jù)呢？想過(guò)么？做過(guò)么？做得出來(lái)么？
我搜索了一大圈，發(fā)現(xiàn)絕大部分都是把代碼一貼就完事，根本不講思路是什么，為了能一勞永逸的解決這個(gè)問(wèn)題，我覺(jué)得先把思路理清是最重要的，至于怎么實(shí)現(xiàn)，就是coding的問(wèn)題了，coding就看每個(gè)人心情了，每個(gè)人都有自己喜歡的方式，個(gè)人不建議把coding寫(xiě)死，僵化。

思路分析

需求是什么？

大概是這個(gè)樣子，應(yīng)該一目了然了。

先說(shuō)一下整體思路，根據(jù)parentId和id把數(shù)組中的每一項(xiàng)的父節(jié)點(diǎn)找到，并將自己作為父節(jié)點(diǎn)的children中的一項(xiàng)，所有的數(shù)據(jù)項(xiàng)都處理完畢后，其實(shí)就差不多了，最后我們把根節(jié)點(diǎn)找到并返回，轉(zhuǎn)換完成。

執(zhí)行步驟

遍歷每一個(gè)列表項(xiàng)，對(duì)比該項(xiàng)（currentItem）parentId與列表內(nèi)所有項(xiàng)的id，根據(jù)對(duì)比結(jié)果做后續(xù)處理

如果該項(xiàng)parentId與列表中某項(xiàng)（parentItem）id相等，那么把currentItem作為parentItem的孩子。也就是把currentItem作為parentItem的children中的一項(xiàng)。

執(zhí)行完上述過(guò)程后，列表中對(duì)應(yīng)的父子關(guān)系就已經(jīng)處理完畢了，此時(shí)我們需要找出根節(jié)點(diǎn)就可以了，判斷根節(jié)點(diǎn)的方法很簡(jiǎn)單，就是parentId為null的項(xiàng)。

代碼 
const List = [
    {id: 1, name: "child1", parentId: 0},
    {id: 2, name: "child2", parentId: 0},
    {id: 6, name: "child2_1", parentId: 2},
    {id: 0, name: "root", parentId: null},
    {id: 5, name: "child1_2", parentId: 1},
    {id: 4, name: "child1_1", parentId: 1},
    {id: 3, name: "child3", parentId: 0},
    {id: 7, name: "child3_1", parentId: 3}
]

function ListToTree (list) {
    const copyList = list.slice(0)
    const tree = []
    for (let i = 0;i < copyList.length;i++) {
        // 找出每一項(xiàng)的父節(jié)點(diǎn)，并將其作為父節(jié)點(diǎn)的children
        for (let j = 0;j < copyList.length;j++) {
            if (copyList[i].parentId === copyList[j].id) {
                if (copyList[j].children === undefined) {
                    copyList[j].children = []
                }
                copyList[j].children.push(copyList[i])
            }
        }
        // 把根節(jié)點(diǎn)提取出來(lái)，parentId為null的就是根節(jié)點(diǎn)
        if (copyList[i].parentId === null) {
            tree.push(copyList[i])
        }
    }
    return tree
}

const tree = ListToTree(List)
console.log(JSON.stringify(tree))

上面代碼直接扔到瀏覽器中即可運(yùn)行，可自行看看結(jié)果。這里先把結(jié)果放在下面，供參考。
[{"id":0,"name":"root","parentId":null,"children":[{"id":1,"name":"child1","parentId":0,"children":[{"id":5,"name":"child1_2","parentId":1},{"id":4,"name":"child1_1","parentId":1}]},{"id":2,"name":"child2","parentId":0,"children":[{"id":6,"name":"child2_1","parentId":2}]},{"id":3,"name":"child3","parentId":0,"children":[{"id":7,"name":"child3_1","parentId":3}]}]}]
以上結(jié)果放到https://www.bejson.com/jsoned...中查看，效果更佳。

總結(jié)

列表轉(zhuǎn)樹(shù)的過(guò)程，我這里用了兩層循環(huán)，然后利用了js的對(duì)象引用機(jī)制，將列表轉(zhuǎn)成了樹(shù)，其實(shí)這個(gè)過(guò)程中已經(jīng)改變了原有的列表數(shù)據(jù)結(jié)構(gòu)（循環(huán)結(jié)束后打印copyList即可看到結(jié)果），所以在第一步的時(shí)候才先復(fù)制了一個(gè)列表進(jìn)來(lái)。這里應(yīng)該還有可優(yōu)化的地方，歡迎大家提供更多更好的思路，懇請(qǐng)?jiān)谘a(bǔ)充新的方案時(shí)，先把思路說(shuō)清楚，切勿直接扔代碼上來(lái)。交流、溝通、理解效果才好。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95383.html

相關(guān)文章

  • 樹(shù)轉(zhuǎn)列表的實(shí)現(xiàn)思路與代碼

    摘要：背景之前寫(xiě)了一篇列表轉(zhuǎn)樹(shù)的文章，有列表轉(zhuǎn)樹(shù)的需求自然就會(huì)有樹(shù)轉(zhuǎn)列表的需求，這里我把樹(shù)轉(zhuǎn)列表的思路與代碼再整理一下?？偨Y(jié)樹(shù)轉(zhuǎn)列表過(guò)程中，我這里的深度優(yōu)先采用了遞歸方式，可能會(huì)對(duì)內(nèi)存占用較多，使用時(shí)請(qǐng)自行權(quán)衡。 背景 之前寫(xiě)了一篇列表轉(zhuǎn)樹(shù)的文章，有列表轉(zhuǎn)樹(shù)的需求自然就會(huì)有樹(shù)轉(zhuǎn)列表的需求，這里我把樹(shù)轉(zhuǎn)列表的思路與代碼再整理一下。 思路分析 需求是什么？老規(guī)矩，上圖showImg(https:...

    denson 評(píng)論0 收藏0

  • js “指針”：數(shù)組轉(zhuǎn)樹(shù)

    摘要：當(dāng)變量指向一個(gè)對(duì)象的時(shí)候，實(shí)際指向的是存儲(chǔ)地址測(cè)試結(jié)果數(shù)組轉(zhuǎn)樹(shù)的方式節(jié)點(diǎn)節(jié)點(diǎn)節(jié)點(diǎn)節(jié)點(diǎn)節(jié)點(diǎn)節(jié)點(diǎn)節(jié)點(diǎn)節(jié)點(diǎn)將作為鍵值方便二次遍歷做索引為的是根節(jié)點(diǎn)這樣只要遍歷倆次第一次遍歷將數(shù)組轉(zhuǎn)節(jié)點(diǎn)對(duì)象，存儲(chǔ)到新的對(duì)象里，為鍵值方便索引第二次遍歷根據(jù)索引插入子 當(dāng)變量指向一個(gè)對(duì)象的時(shí)候，實(shí)際指向的是存儲(chǔ)地址測(cè)試： a = {val: 123} b = a b.val = 321 ...

    mikyou 評(píng)論0 收藏0

  • 輕松實(shí)現(xiàn)可擴(kuò)展的樹(shù)形表格

    摘要：由于目前還未開(kāi)發(fā)樹(shù)形表格組件，也參閱了網(wǎng)絡(luò)上部分基于表格封裝的開(kāi)源樹(shù)形組件，都沒(méi)有找的太理想可進(jìn)行二次開(kāi)發(fā)的開(kāi)源項(xiàng)目，所以就萌生了自行開(kāi)發(fā)樹(shù)形表格。 由于ElementUI目前還未開(kāi)發(fā)樹(shù)形表格組件，也參閱了網(wǎng)絡(luò)上部分基于ElementUI表格封裝的開(kāi)源樹(shù)形組件，都沒(méi)有找的太理想可進(jìn)行二次開(kāi)發(fā)的開(kāi)源項(xiàng)目，所以就萌生了自行開(kāi)發(fā)樹(shù)形表格。 本示例提供開(kāi)發(fā)思路，移除了多余的樣式，比較適合新手入...

    harryhappy 評(píng)論0 收藏0

  • js 中二叉樹(shù)的深度遍歷與廣度遍歷(遞歸實(shí)現(xiàn)與非遞歸實(shí)現(xiàn))

    摘要：樹(shù)中結(jié)點(diǎn)的最大層次稱為樹(shù)的深度或高度。二叉樹(shù)有深度遍歷和廣度遍歷，深度遍歷有前序中序和后序三種遍歷方法。二叉樹(shù)的前序遍歷可以用來(lái)顯示目錄結(jié)構(gòu)等中序遍歷可以實(shí)現(xiàn)表達(dá)式樹(shù)，在編譯器底層很有用后序遍歷可以用來(lái)實(shí)現(xiàn)計(jì)算目錄內(nèi)的文件及其信息等。 樹(shù)的簡(jiǎn)介 棧、隊(duì)列、鏈表等數(shù)據(jù)結(jié)構(gòu)，都是順序數(shù)據(jù)結(jié)構(gòu)。而樹(shù)是非順序數(shù)據(jù)結(jié)構(gòu)。樹(shù)型結(jié)構(gòu)是一類(lèi)非常重要的非線性結(jié)構(gòu)。直觀地，樹(shù)型結(jié)構(gòu)是以分支關(guān)系定義的層次結(jié)...

    Yuanf 評(píng)論0 收藏0

  • Python數(shù)據(jù)結(jié)構(gòu)——樹(shù)的實(shí)現(xiàn)

    摘要：列表的第二個(gè)元素的本身是一個(gè)表示左子樹(shù)的列表。子樹(shù)具有根節(jié)點(diǎn)和兩個(gè)表示葉節(jié)點(diǎn)的空列表。重要的是要記住這種表示的是左右子樹(shù)引用的是其他二叉樹(shù)的實(shí)例。為了完成一個(gè)簡(jiǎn)單的二叉樹(shù)數(shù)據(jù)結(jié)構(gòu)的定義，我們寫(xiě)出訪問(wèn)參見(jiàn)左右子節(jié)點(diǎn)和根值的方法。 嵌套列表表示樹(shù) 在用嵌套列表表示樹(shù)時(shí)，我們使用 Python 的列表來(lái)編寫(xiě)這些函數(shù)。雖然把界面寫(xiě)成列表的一系列方法與我們已實(shí)現(xiàn)其他的抽象數(shù)據(jù)類(lèi)型有些不同，但這樣...

    tain335 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<