JavaScript如何實現(xiàn)無限級遞歸樹

JavaScript如何實現(xiàn)無限級遞歸樹？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

需求：最近遇到一個需求，平時被后臺慣著直接返回了樹形結(jié)構(gòu)給到前端，前端對這種嵌套類型的數(shù)據(jù)（如地區(qū)的級聯(lián)或菜單的樹形結(jié)構(gòu)）省掉了一層處理。換了個后臺開發(fā)返回了扁平化的數(shù)組數(shù)據(jù)給到前端自己去處理如下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": "測試子地區(qū)",
        "parent_id": 1,
    },
    {
        "area_id": 1,
        "name": "測試地區(qū)",
        "parent_id": 0,
    }
]

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

方法一——遞歸

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

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)  // 第一級節(jié)點的父id，是null或者0，視情況傳入
}

恩，姿勢擺好，在控制臺里執(zhí)行一下

哎喲，不錯哦~后臺小哥哥再也不擔(dān)心需要返回什么數(shù)據(jù)給我了。不過，該方法有個缺點，在我使用組件的時候需要的數(shù)據(jù)結(jié)構(gòu)中，如果子級沒有數(shù)據(jù)children返回[]。恩，有點問題，但是還是可以優(yōu)化的，優(yōu)化的代碼我會那么容易給出來嗎？你已經(jīng)是個成熟的程序猿了，需要學(xué)會自己優(yōu)化代碼了?。。?/p>

方法二——對象

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

function setTreeData(arr) {
    //  刪除所有 children,以防止多次調(diào)用
    arr.forEach(function (item) {
            delete item.children;
    });
    let map = {}; // 構(gòu)建map
    arr.forEach(i => {
        map[i.area_id] = i; // 構(gòu)建以area_id為鍵 當(dāng)前數(shù)據(jù)為值
    });

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

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

    return treeData;
};

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

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

總結(jié)

以上簡單介紹了兩種將扁平化數(shù)據(jù)轉(zhuǎn)化為遞歸樹的方法，學(xué)會了嗎，沒學(xué)會再回去好好擼擼碼!！目前我遇到需要將數(shù)據(jù)整理樹形結(jié)構(gòu)的主要在菜單欄或分類的樹形結(jié)構(gòu)上，當(dāng)然還有像省市這種有從屬關(guān)系的結(jié)構(gòu)。

關(guān)于JavaScript如何實現(xiàn)無限級遞歸樹問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。