前端之數據結構（四）樹

這是我參與8月更文挑戰的第五天，活動詳情查看：8月更文挑戰」

前文已經介紹了，棧、隊列、鏈表、集合和字典。今天就該介紹樹這一數據結構，接下來且聽我娓娓道來。

樹

樹是什麼呢？在生活中，你們對樹確定不陌生，不就是一種植物嘛。像楊樹、柳樹、榆樹等等。

但在計算機科學中就不同了。

• 一種 分層 數據的抽象模型，在前端應用普遍。

• 前端工做中常見的樹包括： DOM樹、級聯選擇、樹形控件...

• JS中沒有樹，可是能夠用 Object和Array 構建樹。

• 像這樣知足分層數據結構的均可以說是樹。

• 樹的經常使用操做： 深度/廣度優先遍歷、先中後序遍歷。

深度優先遍歷

• 儘量深的搜索樹的分支。

1. 訪問根節點。

2. 對根節點的 children 挨個進行深度優先遍歷。

const tree = {
    val: 'a',
    children: [
        {
            val: 'b',
            children: [
                {
                    val: 'd',
                    children: []
                }, {
                    val: 'e',
                    children: []
                }]
        },
        {
            val: 'c',
            children: [{
                val: 'f',
                children: []
            }, {
                val: 'g',
                children: []
            }]
        }
    ]
}

const dfs = (root) => {
    console.log(root.val);
    root.children.forEach(dfs)
}

dfs(tree)

// a b d e c f g

複製代碼

廣度優先遍歷

• 先訪問離根節點最近的節點。

1. 新建一個隊列，把根節點入隊。

2. 把隊頭出隊並訪問。

3. 把對頭的 children 挨個入隊。

4. 重複第2、第三， 直到隊列爲空。

const tree = {
    val: 'a',
    children: [
        {
            val: 'b',
            children: [
                {
                    val: 'd',
                    children: []
                }, {
                    val: 'e',
                    children: []
                }]
        },
        {
            val: 'c',
            children: [{
                val: 'f',
                children: []
            }, {
                val: 'g',
                children: []
            }]
        }
    ]
}

const dfs = (root) => {
    console.log(root.val);
    root.children.forEach(dfs)
}

const bfs = (root) => {
    const q = [root];
    while (q.length > 0) {
        const n = q.shift()
        console.log(n.val);
        n.children.forEach(child => q.push(child))
    }
}

bfs(tree)

// a b c d e f g

複製代碼

今天先分享到這裏啦，拜拜~~~