前端之數據結構（六）圖

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

上一章介紹了樹的另外一種形態二叉樹，並說了遞歸版的先中後序遍歷。

這一章就來介紹一下圖這種數據結構。

圖

• 圖是網絡結構的抽象模型，是一組由邊鏈接的節點。

• 圖能夠表示任何二元關係，好比道路、航班......

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

• 圖的表示法： 鄰接矩陣、鄰接表、關聯矩陣......

圖的表示法

以下圖：

鄰接矩陣

用鄰接矩陣能夠以下表示：

每兩個交叉點爲 1 的，就表明這兩個點連接。

鄰接表

用鄰接表能夠以下表示：

每一個點表明相應的 key ，而每一個 key 所包含的點，就是它們相連的點。

圖的經常使用操做

• 深度優先遍歷：儘量深的搜索圖的分支。

• 廣度優先遍歷：先訪問離根節點最近的節點。

下圖

經過代碼表示以下：

const graph = {
    0: [1, 2],
    1: [2],
    2: [0, 3],
    3: [3]
}
複製代碼

深度優先遍歷

• 訪問根節點
• 對根節點的 挨個進行深度優先遍歷。

經過以下代碼進行深度優先遍歷：

const visited = new Set()
const dfs = (node) => {
    console.log(node);
    visited.add(node)
    graph[node].forEach(c => {
        if (!visited.has(c)) {
            dfs(c)
        }
    })
}
dfs(2)
// 2 0 1 3

複製代碼

廣度優先遍歷

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

• 把隊頭出隊並訪問。

• 把對頭的沒訪問過的相鄰節點入隊。

• 重複第二三步，直到隊列爲空。

經過以下代碼進行廣度優先遍歷：

const visited = new Set()
const q = [2]
visited.add(2)
while (q.length) {
    const node = q.shift()
    console.log(node);
    graph[node].forEach(c => {
        if (!visited.has(c)) {
            q.push(c)
            visited.add(c)
        }
    })
}

// 2 0 3 1
複製代碼

End~~~