前端面试必备——图

图

图是由边和点组成。一条边连接的两个点称为相邻顶点。

图可以是无向的也可以是有向的。本文探讨的都是无向图。

图的表示

图一般有以下两种实现方法：
1. 邻接矩阵：使用二维数组来表示点与点之间是否有边，如arr[i][j]=1则表示节点i与节点j之间有边，如果arr[i][j]=0则表示节点i与节点j之间没有边。
2. 邻接表：使用数组或字典结构来表示与节点i之间有边的节点集合：如arr[i]=[j,k,l,,m]，表示为节点i与其中的这些点都有边

本文采用邻接表方式来实现图结构，邻接表则采用字典方式来表示，而字典可以通过map结构来表示，但是map结构属于ES6，所以本文采用对象方式来表示字典。

创建图类

下面声明图类，其中顶点结合采用数组结构表示，边集合采用对象结构表示（也可以使用ES6的map结构）。

function Graph(){    var vertices=[];//顶点集合    var adjList={};//边    this.addVertex=function(v){...};//添加顶点方法    this.addEdge=function(v,w){...};//添加边方法    this.toString=function(){...};//显示方法    this.dfs=function(){...}    this.bfs=function(v){...}}

添加结点方法：顶点集合中添加节点，并生成节点的邻接表。

this.addVertex=function(v){    vertices.push(v);    adjList[v]=[];};

添加边方法：在对应点的邻接表中添加对方，表示双方之间有边。

this.addEdge=function(v,w){    adjList[v].push(w);    adjList[w].push(v);};

显示方法：输出形式为节点 -> 相邻的节点

this.toString=function(){    var s = '';    for (var i=0; i<vertices.length; i++){         s += vertices[i] + ' -> ';        var neighbors = adjList[vertices[i]];         for (var j=0; j<neighbors.length; j++){             s += neighbors[j] + ' ';        }        s += '\n';     }    return s;};

使用方法：

var graph = new Graph();var myVertices = [0,1,2,3,4,5]; for (var i=0; i<myVertices.length; i++){   graph.addVertex(myVertices[i]);}graph.addEdge(0, 1); //增加边graph.addEdge(0, 4);graph.addEdge(0, 5);graph.addEdge(1, 4);graph.addEdge(1, 3);graph.addEdge(2, 3);graph.addEdge(2, 5);console.log(graph.toString())/*0 -> 1 4 5 1 -> 0 4 3 2 -> 3 5 3 -> 1 2 4 -> 0 1 5 -> 0 2 */

图的遍历

遍历图的方法有：
1. 深度优先遍历
2. 广度优先遍历

深度优先遍历

深度优先搜索算法将会从第一个指定的顶点开始遍历图，沿着路径直到这条路径最后一个顶
点被访问了，接着原路回退并探索下一条路径。

步骤：
1. 访问顶点v
2. 标记v为false
3. 对于v的所有未访问的邻点w：
1. 访问顶点w
2.w的flag不为true，则访问其邻点

this.dfs=function(){    var flag=[];    for(var i=0;i<vertices.length;i++){        if(!flag[vertices[i]]){            dfsVisit(vertices[i])        }    }    function dfsVisit(u){        flag[u]=true;        console.log(u);        var neighbors=adjList[u];               for(var i=0;i<neighbors.length;i++){            var w=neighbors[i];            if(!flag[w]){                dfsVisit(w)            }        }       }}

使用方法：

graph.dfs();/*014325*/

广度优先遍历

从指定的第一个顶点开始遍历图，先访问其所有的相邻点。
步骤：
1. 创建一个队列
2. 将指定顶点放入队列中，将其flag设为true
3. 如果队列非空，则执行以下步骤：
1. 取出队列中第一个元素
2. 判断其元素的相邻的节点flag，如果不是true，放入队列中，并更改其flag

this.bfs=function(v){    var queue=[],//队列        flag=[];//标记是否访问过    flag[v]=true;    queue.push(v);    while(queue.length!==0){        var n=queue.shift(),neighbors=adjList[n];        for(var i=0;i<neighbors.length;i++){            var w = neighbors[i];            if(!flag[w]){                flag[w]=true;                queue.push(w)            }        }        console.log(n);    }}

使用方法：

graph.bfs(myVertices[0])/*014532*/