国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript實現無限級遞歸樹

atinosun / 1252人閱讀

摘要：需求最近遇到一個需求，平時被后臺慣著直接返回了樹形結構給到前端，前端對這種嵌套類型的數據如地區的級聯或菜單的樹形結構省掉了一層處理。當然，沒用好就相當于一堆廢鐵，甚至將導致一些不可預料的結果。相比起遞歸，我更喜歡這種方法。

需求

最近遇到一個需求，平時被后臺慣著直接返回了樹形結構給到前端，前端對這種嵌套類型的數據（如地區的級聯或菜單的樹形結構）省掉了一層處理。換了個后臺小哥哥返回了扁平化的數組數據給到前端自己去處理如下data。突然有點慌......

const data = [
    {
        "area_id": 5,
        "name": "廣東省",
        "parent_id": 0,
    },  
    {
        "area_id": 6,
        "name": "廣州市",
        "parent_id": 5,
    },
    {
        "area_id": 7,
        "name": "深圳市",
        "parent_id": 5,
    },
    {
        "area_id": 4,
        "name": "北京市",
        "parent_id": 3,
    },
    {
        "area_id": 3,
        "name": "北京",
        "parent_id": 0,
    },
    {
        "area_id": 2,
        "name": "測試子地區",
        "parent_id": 1,
    },
    {
        "area_id": 1,
        "name": "測試地區",
        "parent_id": 0,
    }
]

emmm，換個念頭想想也剛好鍛煉鍛煉，擼起袖子干吧，然后就總結了以下兩種整理方法~

方法一——遞歸

在這種那么適合遞歸的場景，怎么能少了遞歸這個角色呢？第一種方法，遞歸出場！獻上遞歸寶器~

function toTreeData(data,pid){
 
    function tree(id) {
        let arr = []
        data.filter(item => {
            return item.parent_id === id;
        }).forEach(item => {
            arr.push({
                area_id: item.area_id,
                label: item.name,
                children: tree(item.area_id)
            })
        })
        return arr
    }
    return tree(pid)  // 第一級節點的父id，是null或者0，視情況傳入
}

恩，姿勢擺好，在控制臺里執行一下

哎喲，不錯哦~后臺小哥哥再也不擔心需要返回什么數據給我了。不過，該方法有個缺點，在我使用組件的時候需要的數據結構中，如果子級沒有數據children返回[]。恩，有點問題，但是還是可以優化的，優化的代碼我會那么容易給出來嗎？你已經是個成熟的程序猿了，需要學會自己優化代碼了！！！

方法二——對象

對象在我眼里一直是倚天屠龍寶刀的存在，了解到其中的奧妙便形同有一武林秘籍傍身。當然，沒用好就相當于一堆廢鐵，甚至將導致一些不可預料的結果。

function setTreeData(arr) {
    //  刪除所有 children,以防止多次調用
    arr.forEach(function (item) {
            delete item.children;
    });
    let map = {}; // 構建map
    arr.forEach(i => {
        map[i.area_id] = i; // 構建以area_id為鍵 當前數據為值
    });

    let treeData = [];
    arr.forEach(child => {
        const mapItem = map[child.parent_id]; // 判斷當前數據的parent_id是否存在map中

        if (mapItem) { // 存在則表示當前數據不是最頂層數據
        
            // 注意: 這里的map中的數據是引用了arr的它的指向還是arr，當mapItem改變時arr也會改變,踩坑點
            (mapItem.children || ( mapItem.children = [] )).push(child); // 這里判斷mapItem中是否存在children, 存在則插入當前數據, 不存在則賦值children為[]然后再插入當前數據
        } else { // 不存在則是組頂層數據
            treeData.push(child);
        }
    });

    return treeData;
};

console.log(setTreeData(data)); // 輸出整理后的數據

結果我就不執行了，跟遞歸的結果相似。相比起遞歸，我更喜歡這種方法。不過這種方法有一種容易犯錯的地方，就是它會改變原數據，我就在這里踩了好久的坑，所以一開始采用了刪除children的初始化了一遍。 記住了嗎，沒記住自行重復說三遍！！！

總結

以上簡單介紹了兩種將扁平化數據轉化為遞歸樹的方法，學會了嗎，沒學會再回去好好擼擼碼!！目前我遇到需要將數據整理樹形結構的主要在菜單欄或分類的樹形結構上，當然還有像省市這種有從屬關系的結構。不過就算以后遇到了都唔駛驚啦~恩，繼續更新總結中....

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103094.html

相關文章

  • 在數據庫中存儲一棵樹，實現無限級分類

    摘要：第三條同樣需要遞歸，因為通過一個分類，數據庫中只存儲了其直屬父類，需要通過遞歸到頂級分類才能獲取到它們之間的所有分類信息。 原文發表于我的博客： https://blog.kaciras.net/article/36 在一些系統中，對內容進行分類是必需的功能。比如電商就需要對商品做分類處理，以便于客戶搜索；論壇也會分為很多板塊；門戶網站、也得對網站的內容做各種分類。 分類對于一個內容展...

    Airy 評論0 收藏0

  • 分層數據Hierarchical Data探索(1.遞歸)

    摘要：分層數據探索例如無限級分類多級菜單省份城市引言什么是分層數據類似于樹形結構，除了根節點和葉子節點外，所有節點都有一個父節點和一個或多個子節點。接下來我會先通過一般方法和遞歸方法來實現無限極分類，然后再通過兩種數據模型來談一談分層數據的處理。 分層數據Hierarchical Data探索（例如：無限級分類、多級菜單、省份城市） 引言 什么是分層數據？ 類似于樹形結構，除了根節點和葉子節...

    yzd 評論0 收藏0

  • 手風琴效果 遞歸組件實戰（vue）

    摘要：大家想想一想這個組件最終效果形成一個樹形結構里面有相同的模塊這個是手風琴組件中最小的組件單元。再次點擊節點就會開啟子樹。 show 效果 showImg(https://segmentfault.com/img/bV90qc?w=500&h=300); 說說我的思路 數據結構 {flag:1,data:[{id:1,name:書法類型,child:[{id:2,name:硬筆},{id...

    noONE 評論0 收藏0

  • laravel-nestedset：多級無限分類正確姿勢

    摘要：通過自定義的查詢加載和大多數情況下，你需要按層級排序祖先集合可以被預加載視圖模板中面包屑將祖先的全部取出后轉換為數組，在用拼接為字符串輸出。 原文鏈接：http://www.pilishen.com/posts...; 歡迎作客我們的php&Laravel學習群：109256050 laravel-nestedset是一個關系型數據庫遍歷樹的larvel4-5的插件包 目錄： Nes...

    pf_miles 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<