JavaScript實現圖結構
阿新 • • 發佈：2020-04-05
## JavaScript實現圖結構
### 一、圖論
#### 1.1.圖的簡介
**什麼是圖？**
* **圖結構**是一種與**樹結構**有些相似的資料結構；
* **圖論**是數學的一個分支，並且，在數學中，樹是圖的一種；
* 圖論以圖為研究物件，研究**頂點**和**邊**組成的**圖形**的數學理論和方法；
* 主要的研究目的為：**事物之間的聯絡**，**頂點**代表**事物**，**邊**代表兩個事物間的**關係**；
**圖的特點：**
* **一組頂點**：通常用 **V** （Vertex）表示頂點的集合；
* **一組邊**：通常用 **E** （Edge）表示邊的集合；
* 邊是頂點和頂點之間的連線；
* 邊可以是有向的，也可以是無向的。比如A----B表示無向，A ---> B 表示有向；
**圖的常用術語：**
* **頂點：**表示圖中的一個**節點**；
* **邊：**表示**頂點和頂點**給之間的**連線**；
* **相鄰頂點：**由一條邊連線在一起的頂點稱為**相鄰頂點**；
* **度：**一個頂點的**度**是**相鄰頂點的數量**；
* **路徑：**
* **簡單路徑：**簡單路徑要求不包含重複的頂點；
* **迴路：**第一個頂點和最後一個頂點**相同**的路徑稱為迴路；
* **無向圖：**圖中的所有邊都是**沒有**方向的；
* **有向圖：**圖中的所有邊都是**有**方向的；
* **無權圖：**無權圖中的邊沒有任何權重意義；
* **帶權圖：**帶權圖中的邊有一定的權重含義；
#### 1.2.圖的表示
##### 鄰接矩陣
表示圖的常用方式為：**鄰接矩陣**。
* 可以使用二維陣列來表示鄰接矩陣；
* 鄰接矩陣讓**每個節點和一個整數相關聯**，該**整數作為陣列的下標值**；
* 使用一個**二維陣列**來表示頂點之間的**連線**；
如上圖所示：
* 二維陣列中的**0**表示沒有連線，**1**表示有連線；
* 如：A[ 0 ] [ 3 ] = 1，表示 A 和 C 之間有連線；
* 鄰接矩陣的對角線上的值都為0，表示A - A ，B - B，等自迴路都沒有連線（自己與自己之間沒有連線）；
* 若為無向圖，則鄰接矩陣應為對角線上元素全為0的對稱矩陣；
**鄰接矩陣的問題：**
* 如果圖是一個**稀疏圖**，那麼鄰接矩陣中將存在**大量的 0**，造成儲存空間的浪費；
##### 鄰接表
另外一種表示圖的常用方式為：**鄰接表**。
* 鄰接表由圖中**每個頂點**以及**和頂點相鄰的頂點列表**組成；
* 這個列表可用多種方式儲存，比如：**陣列/連結串列/字典（雜湊表）**等都可以；
如上圖所示：
* 圖中可清楚看到**A與B、C、D相鄰**，假如要表示這些與A頂點相鄰的頂點（邊），可以通過將它們作為A的值（value）存入到對應的**陣列/連結串列/字典**中。
* 之後，通過鍵（key）A可以十分方便地取出對應的資料；
**鄰接表的問題：**
* 鄰接表可以簡單地得出**出度**，即某一頂點指向其他頂點的個數；
* 但是，鄰接表計算**入度**（指向某一頂點的其他頂點的個數稱為該頂點的入度）十分困難。此時需要構造**逆鄰接表**才能有效計算入度；
### 二、封裝圖結構
在實現過程中採用**鄰接表**的方式來表示邊，使用**字典類**來儲存鄰接表。
#### 2.1.新增字典類和佇列類
首先需要引入之前實現的，之後會用到的字典類和佇列類：
```
//封裝字典類
function Dictionary(){
//字典屬性
this.items = {}
//字典操作方法
//一.在字典中新增鍵值對
Dictionary.prototype.set = function(key, value){
this.items[key] = value
}
//二.判斷字典中是否有某個key
Dictionary.prototype.has = function(key){
return this.items.hasOwnProperty(key)
}
//三.從字典中移除元素
Dictionary.prototype.remove = function(key){
//1.判斷字典中是否有這個key
if(!this.has(key)) return false
//2.從字典中刪除key
delete this.items[key]
return true
}
//四.根據key獲取value
Dictionary.prototype.get = function(key){
return this.has(key) ? this.items[key] : undefined
}
//五.獲取所有keys
Dictionary.prototype.keys = function(){
return Object.keys(this.items)
}
//六.size方法
Dictionary.prototype.keys = function(){
return this.keys().length
}
//七.clear方法
Dictionary.prototype.clear = function(){
this.items = {}
}
}
// 基於陣列封裝佇列類
function Queue() {
// 屬性
this.items = []
// 方法
// 1.將元素加入到佇列中
Queue.prototype.enqueue = element => {
this.items.push(element)
}
// 2.從佇列中刪除前端元素
Queue.prototype.dequeue = () => {
return this.items.shift()
}
// 3.檢視前端的元素
Queue.prototype.front = () => {
return this.items[0]
}
// 4.檢視佇列是否為空
Queue.prototype.isEmpty = () => {
return this.items.length == 0;
}
// 5.檢視佇列中元素的個數
Queue.prototype.size = () => {
return this.items.length
}
// 6.toString方法
Queue.prototype.toString = () => {
let resultString = ''
for (let i of this.items){
resultString += i + ' '
}
return resultString
}
}
```
#### 2.2.建立圖類
先建立圖類Graph，並新增基本屬性，再實現圖類的常用方法：
```
//封裝圖類
function Graph (){
//屬性：頂點(陣列)/邊(字典)
this.vertexes = [] //頂點
this.edges = new Dictionary() //邊
}
```
#### 2.3.新增頂點與邊
如圖所示：
建立一個數組物件vertexes儲存圖的頂點；建立一個字典物件edges儲存圖的邊，其中key為頂點，value為儲存key頂點相鄰頂點的陣列。
**程式碼實現：**
```
//新增方法
//一.新增頂點
Graph.prototype.addVertex = function(v){
this.vertexes.push(v)
this.edges.set(v, []) //將邊新增到字典中，新增的頂點作為鍵，對應的值為一個儲存邊的空陣列
}
//二.新增邊
Graph.prototype.addEdge = function(v1, v2){//傳入兩個頂點為它們新增邊
this.edges.get(v1).push(v2)//取出字典物件edges中儲存邊的陣列，並新增關聯頂點
this.edges.get(v2).push(v1)//表示的是無向表，故要新增互相指向的兩條邊
}
```
#### 2.4.轉換為字串輸出
為圖類Graph新增toString方法，實現以鄰接表的形式輸出圖中各頂點。
**程式碼實現：**
```
//三.實現toString方法:轉換為鄰接表形式
Graph.prototype.toString = function (){
//1.定義字串，儲存最終結果
let resultString = ""
//2.遍歷所有的頂點以及頂點對應的邊
for (let i = 0; i < this.vertexes.length; i++) {//遍歷所有頂點
resultString += this.vertexes[i] + '-->