本文目录：
 

 
 
数据结构分类
1、数组
2、栈
3、队列
4、链表
5、树
6、散列表
7、堆
8、图
 
 
 
数据结构分类
 
数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成 。 
 常用的数据结构有：数组，栈，链表，队列，树，图，堆，散列表等，如图所示： 
  
 每一种数据结构都有着独特的数据存储方式，下面为大家介绍它们的结构和优缺点。
 
1、数组
 
数组是可以再内存中连续存储多个元素的结构，在内存中的分配也是连续的，数组中的元素通过数组下标进行访问，数组下标从0开始。例如下面这段代码就是将数组的第一个元素赋值为 1。
 
int[] data = new int[100]；data[0]  = 1;
 
优点： 
 1、按照索引查询元素速度快 
 2、按照索引遍历数组方便
 
缺点： 
 1、数组的大小固定后就无法扩容了 
 2、数组只能存储一种类型的数据 
 3、添加，删除的操作慢，因为要移动其他的元素。
 
适用场景： 
 频繁查询，对存储空间要求不大，很少增加和删除的情况。
 
2、栈
 
栈是一种特殊的线性表，仅能在线性表的一端操作，栈顶允许操作，栈底不允许操作。 栈的特点是：先进后出，或者说是后进先出，从栈顶放入元素的操作叫入栈，取出元素叫出栈。 
  
 栈的结构就像一个集装箱，越先放进去的东西越晚才能拿出来，所以，栈常应用于实现递归功能方面的场景，例如斐波那契数列。
 
3、队列
 
队列与栈一样，也是一种线性表，不同的是，队列可以在一端添加元素，在另一端取出元素，也就是：先进先出。从一端放入元素的操作称为入队，取出元素为出队，示例图如下： 
  
 使用场景：因为队列先进先出的特点，在多线程阻塞队列管理中非常适用。
 
4、链表
 
链表是物理存储单元上非连续的、非顺序的存储结构，数据元素的逻辑顺序是通过链表的指针地址实现，每个元素包含两个结点，一个是存储元素的数据域 (内存空间)，另一个是指向下一个结点地址的指针域。根据指针的指向，链表能形成不同的结构，例如单链表，双向链表，循环链表等。 
  
 链表的优点： 
 链表是很常用的一种数据结构，不需要初始化容量，可以任意加减元素； 
 添加或者删除元素时只需要改变前后两个元素结点的指针域指向地址即可，所以添加，删除很快；
 
缺点： 
 因为含有大量的指针域，占用空间较大； 
 查找元素需要遍历链表来查找，非常耗时。
 
适用场景： 
 数据量较小，需要频繁增加，删除操作的场景
 
5、树
 
树是一种数据结构，它是由n（n>=1）个有限节点组成一个具有层次关系的集合。把它叫做 “树” 是因为它看起来像一棵倒挂的树，也就是说它是根朝上，而叶朝下的。它具有以下的特点：
 
每个节点有零个或多个子节点； 
没有父节点的节点称为根节点；
每一个非根节点有且只有一个父节点；
除了根节点外，每个子节点可以分为多个不相交的子树；
 
在日常的应用中，我们讨论和用的更多的是树的其中一种结构，就是二叉树。 
  
 二叉树是树的特殊一种，具有如下特点：
 
1、每个结点最多有两颗子树，结点的度最大为2。 
 2、左子树和右子树是有顺序的，次序不能颠倒。 
 3、即使某结点只有一个子树，也要区分左右子树。 
 
二叉树是一种比较有用的折中方案，它添加，删除元素都很快，并且在查找方面也有很多的算法优化，所以，二叉树既有链表的好处，也有数组的好处，是两者的优化方案，在处理大批量的动态数据方面非常有用。
 
扩展： 
 二叉树有很多扩展的数据结构，包括平衡二叉树、红黑树、B+树等，这些数据结构二叉树的基础上衍生了很多的功能，在实际应用中广泛用到，例如mysql的数据库索引结构用的就是B+树，还有HashMap的底层源码中用到了红黑树。这些二叉树的功能强大，但算法上比较复杂，想学习的话还是需要花时间去深入的。
 
6、散列表
 
散列表，也叫哈希表，是根据关键码和值 (key和value) 直接进行访问的数据结构，通过key和value来映射到集合中的一个位置，这样就可以很快找到集合中的对应元素。
 
记录的存储位置=f(key) 
 
这里的对应关系 f 成为散列函数，又称为哈希 (hash函数)，而散列表就是把Key通过一个固定的算法函数既所谓的哈希函数转换成一个整型数字，然后就将该数字对数组长度进行取余，取余结果就当作数组的下标，将value存储在以该数字为下标的数组空间里，这种存储空间可以充分利用数组的查找优势来查找元素，所以查找的速度很快。
 
哈希表在应用中也是比较常见的，就如Java中有些集合类就是借鉴了哈希原理构造的，例如HashMap，HashTable等，利用hash表的优势，对于集合的查找元素时非常方便的，然而，因为哈希表是基于数组衍生的数据结构，在添加删除元素方面是比较慢的，所以很多时候需要用到一种数组链表来做，也就是拉链法。拉链法是数组结合链表的一种结构，较早前的hashMap底层的存储就是采用这种结构，直到jdk1.8之后才换成了数组加红黑树的结构，其示例图如下： 
  
 从图中可以看出，左边很明显是个数组，数组的每个成员包括一个指针，指向一个链表的头，当然这个链表可能为空，也可能元素很多。我们根据元素的一些特征把元素分配到不同的链表中去，也是根据这些特征，找到正确的链表，再从链表中找出这个元素。 
 
哈希表的应用场景很多，当然也有很多问题要考虑，比如哈希冲突的问题，如果处理的不好会浪费大量的时间，导致应用崩溃。
 
7、堆
 
堆是一种比较特殊的数据结构，可以被看做一棵树的数组对象，具有以下的性质：
 
堆中某个节点的值总是不大于或不小于其父节点的值；
堆总是一棵完全二叉树。
 
将根节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。常见的堆有二叉堆、斐波那契堆等。
 
堆的定义如下：n个元素的序列{k1,k2,ki,…,kn}当且仅当满足下关系时，称之为堆。 
 (ki <= k2i,ki <= k2i+1)或者(ki >= k2i,ki >= k2i+1), (i = 1,2,3,4…n/2)，满足前者的表达式的成为小顶堆，满足后者表达式的为大顶堆，这两者的结构图可以用完全二叉树排列出来，示例图如下： 
  
 因为堆有序的特点，一般用来做数组中的排序，称为堆排序。
 
8、图
 
图是由结点的有穷集合V和边的集合E组成。其中，为了与树形结构加以区别，在图结构中常常将结点称为顶点，边是顶点的有序偶对，若两个顶点之间存在一条边，就表示这两个顶点具有相邻关系。 
 
按照顶点指向的方向可分为无向图和有向图： 
  
  
 图是一种比较复杂的数据结构，在存储数据上有着比较复杂和高效的算法，分别有邻接矩阵 、邻接表、十字链表、邻接多重表、边集数组等存储结构，这里不做展开，读者有兴趣可以自己学习深入。

 
文章目录
 
双亲表示法
孩子表示法
孩子兄弟法
  
 

 
双亲表示法
 
实现：定义结构数组存放树的结点，每个结点包含两个域：
 
数据域：存放结点本身信息
双亲域：指示本结点的双亲结点在数组中的位置
 
结点结构：
 
 结点类型定义：
 
typedef struct PTNode
{//结点类型定义
	TElemType data;
	int parent; //双亲位置域 
}PTNode;
 
另外，用 r 存储根结点的下标，用 n 表示结点个数
 树的双亲表示法示例：
 
 树结构类型定义：
 
#define MAX_TREE_SIZE 100
typedef struct
{//树结构类型定义
	PTNode nodes[MAX_TREE_SIZE];
	int r,n; //根结点的位置和结点个数 
}PTree;
 
特点：找双亲容易，找孩子难
 
 
孩子表示法
 
实现：把每个结点的孩子结点排列起来，看成是一个线性表，用单链表作存储，则 n 个结点有 n 个孩子链表（叶子的孩子链表为空表）。而 n 个头指针又组成一个线性表，用顺序表（含 n 个元素的结构数组）存储。
 
孩子结点结构：
 
 孩子结点类型定义：
 
typedef struct CTNode
{
	int child;
	struct CTNode *next;
}*ChildPtr;
 
双亲结点结构：
 
 双亲结点类型定义：
 
typedef struct
{
	TElemType data;
	ChildPtr firstchild; //指向孩子的指针 
}CTBox; 
 
树的孩子表示法示例：
 
 树结构类型定义：
 
typedef struct
{
	CTBox nodes[MAX_TREE_SIZE];
	int n,r; //结点数和根结点的位置 
}CTree;
 
特点：找孩子容易，找双亲难
 
这个特点与双亲表示法相反，我们可以把双亲表示法和孩子表示法结合起来，这样，找孩子容易，找双亲也容易
 只需要增加一个成员，就是增加双亲结点的下标
 
 
 
孩子兄弟法
 
实现：用二叉链表作树的存储结构，链表中的每个结点的两个指针域分别指向其第一个孩子结点和下一个兄弟结点
 结点结构：
 
 树的二叉链表表示法示例：
 
 树结构类型定义：
 
typedef struct CSNode
{
	ElemType data;
	struct CSNode *firstchild,*nextsibling;//孩子指针域和兄弟指针域 
}CSNode,*CSTree;

 
特点：便于实现树的各种操作，如容易找结点孩子
 
若要访问结点 x 的第 i 个孩子，则只要先从 fistchild 域找到第一个孩子结点，然后沿着孩子结点的 nextsibling 域连续走 i-1 步，便可以找到 x 的第 i 个孩子。当然，如果为每个结点增设一个 parent 域，则同样能方便地实现查找双亲的操作
 
 
借鉴：《数据结构》严蔚敏 青岛大学–王卓

在大量的应用中，人们曾使用多种形式的存储结构来表示树。这里,我们介绍3种常用的链表结构。
 
1.双亲表示法：
 假设以一组连续空间存储树的结点，同时在每个结点中附设一个指示器指示其双亲结点在链表中的位置,其形式说明如下:
 
 
 例如，图6.13展示一棵树及其双亲表示的存储结构。
 
这种存储结构利用了每个结点(除根以外)只有惟一的双亲的性质。PARENT(T,x)操作可以在常量时间内实现。反复调用PARENT操作，直到遇见无双亲的结点时，便找到了树的根,这就是ROOT(x)操作的执行过程。但是，在这种表示法中,求结点的孩子时需要遍历整个结构
 
2.孩子表示法
 
由于树中每个结点可能有多棵子树，则可用多重链表，即每个结点有多个指针域，其中每个指针指向一棵子树的根结点，此时链表中的结点可以有如下两种结点格式。
 
 若采用第一种结点格式，则多重链表中的结点是同构的，其中d为树的度。由于树中很多结点的度小于d，所以链表中有很多空链域，空间较浪费，不难推出，在一棵有n个结点度为k的树中必有n(k-1)+1个空链域。若采用第二种结点格式，则多重链表中的结点是不同构的，其中J为结点的度，degre域的值同J。此时，虽能节约存储空间，但操作不方便。
 
另一种办法是把每 个结点的孩子结点排列起来 ,看成是一个线性表，且以单链表作存储结构，则n个结点有n个孩子链表(叶子的孩子链表为空表)。而n个头指针又组成一个线性表，为了便于查找，可采用顺序存储结构。这种存储结构可形式地说明如下:
 

 
 图6.14(a)是图6.13中的树的孩子表示法。与双亲表示法相反，孩子表示法便于那些涉及孩子的操作的实现，却不适用于PARENT(T,x)操作，我们可以把双亲表示法和孩子表示法结合起来，即将双亲表示和孩子链表合在一起。图6.14(b)就是这种存储结构的一例，它和图6.14(a)表示的是同一棵树。
 
3、孩子兄弟表示法： （相当于前面讲的将一颗树转换成一颗二叉树）
 又称二叉树表示法，或二又链表表示法，即以二又链表作树的存储树的存储结构。链表中结点的两个链城分别指向该结点的第一个孩子结点和下一个兄弟结点，分别命名为firstchild城和nextsibling城。
 
 
 图6.15是图6.13中的树的孩子兄弟链表。利用这种存储结构便于实现各种树的操作。首先易于实现找结点孩子等的操作。例如:若要访问结点x的第i个孩子，则只要先从firstchild域找到第1个孩子结点，然后沿着孩子结点的nextsibling域连续走i-1步，便可找到x的第i个孩子。当然，如果为每个结点增设一个PARENT域，则同样能方便地实现PARENT(T,x)操作。

本系列文章【数据结构与算法】所有完整代码已上传 github，想要完整代码的小伙伴可以直接去那获取，可以的话欢迎点个Star哦~下面放上跳转链接
 
https://github.com/Lpyexplore/structureAndAlgorithm-JS
 
图结构 非常得类似我们之前讲到过的树结构，但前者没有很多的从属关系，更多的是各个数据之间的相关联系。在数学的概念中，后者是前者的一种，不过在数据结构中我们还是认为两者有所区别，尽管如此，我们在学习图结构的时候仍可以稍微借鉴一下树结构的思想
 
这里放上之前树结构的文章地址，没看过的小伙伴可以查阅一下：
 
【数据结构与算法】详解什么是树结构，并用代码手动实现一个二叉查找树
 
接下来让我们来一起学习一下图结构吧
 
 
 
 
公众号：前端印象
不定时有送书活动，记得关注~
关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】
 
 


 
数据结构——图结构
 
一、什么是图结构
二、图结构的术语
三、图的表示
（1）邻接矩阵
（2）邻接表
  
四、遍历搜索
（1）广度优先搜索
（2）深度优先搜索
  
五、图结构的方法
六、用代码实现图结构
（1）创建一个构造函数
（2）实现addVertex()方法
（3）实现addEdge()方法
（4）实现toString()方法
（5）实现initColor()方法（内部方法）
（6）实现breadthFirstSearch()方法
（7）实现depthFirstSearch()方法
  
七、结束语

 
一、什么是图结构
 
图 是由顶点的集合和边的集合组成的。
 
在我们的身边有很多用到图结构的地方，例如地铁线路图
 

 地铁线路图中每一个站点都可以看成一个顶点，而连接着每个站点的线路可以看作是边
 
其中边是可以有方向的。例如从 站点1 到 站点2 是可以的，但是反过来 站点2 到 站点1 是不可以的，那么此时就说 顶点1 和 顶点2 之间的边是有方向的，方向为 顶点1 -> 顶点2
 
二、图结构的术语
 
文章开头说过，图结构与树结构有很多的相似之处，因此我们还是要先来介绍一些下文会提到的图结构中的术语
 
术语
含义
顶点
图中的某个结点
边
顶点之间连线
相邻顶点
由同一条边连接在一起的顶点
度
一个顶点的相邻顶点个数
简单路径
由一个顶点到另一个顶点的路线，且没有重复经过顶点
回路
第一个顶点和最后一个顶点的相同的路径
无向图
图中所有的边都没有方向
有向图
图中所有的边都有方向
无权图
图中的边没有权重值
有权图
图中的边带有一定的权重值
我们再来看个图的例子，借此来更详细地介绍一下每个术语地含义，如图
 

 该图为某某县地村落分布图，我们可以把其看成是一个图结构，其中每个村看成是一个顶点，每两个村之间可能通了一条路方便来往，例如 A村和D村之间就有一条路线1，我们称之为边
 
邻村表示只需要经过一条边就可以到达另一个村，那么我们就说这两个村互为邻村，也可以称它们互为相邻顶点。每个村都会有一个甚至多个邻村，例如D村的邻村有 A村 、C村 、F村，此时我们就说顶点D（D村）的度为3
 
假设有一天，你要从A村前往E村，你选择的路线是这样的，如图所示
 
 途中我们经过了 顶点A 、顶点C 、顶点E ，没有重复经过某个顶点，因此我们称这条路线为简单路径
 
此时，若你选择的路线是这样的，如图所示
 

 途中经过两次 顶点C ，此时我们就不能称这条路线为简单路径了
 
到了晚上，你准备起身回家，但选择经过B村再回家，那么此时你一整天的路线是这样的，如图所示
 
 因为你当前的出发点和结束点都是A村（顶点A），因此这样的路线我们称之为回路
 
第二天，你接到一个任务，尽快将一个包裹送往E村，为了节省时间，你查阅资料获取到了各条路的长度，如图所示
 

 此时的图结构上每条边就带上了权重值，我们称这个图为有权图
 
通过计算，最后选择了 A村 -> C村 -> E村 这条路线，等到包裹送到E村以后，你正准备原路返回，但发现来时的路都是单向的，现在不允许走这条路回去了，于是你又查阅资料，查看这个县各条路的方向情况，结果如图所示
 

 此时的图结构上每条边都有一定的方向，我们称这个图为有向图
 
最后你选择了 E村 -> B村 -> A村 这条路线成功回到了家
 
三、图的表示
 
上面我们在介绍图的时候，都是用一个形象的图片来讲解的，但在程序中，这样的表达方式显然不是我们想要的，因此我们要找到别的方式来表示结构
 
图结构的常见的两个表达方式： 邻接矩阵 、邻接表
 
（1）邻接矩阵
 
顾名思义，邻接矩阵就像数学中的矩阵，我们只不过是借此来表示图结构，如图所示，现在有一个这样的图结构
 
 
很明显，该图为无向图，那么我们用矩阵的形式来表示它就如下图
 
 图中的 0 表示该顶点无法通向另一个顶点，相反 1 就表示该顶点能通向另一个顶点
 
先来看第一行，该行对应的是顶点A，那我们就拿顶点A与其它点一一对应，发现顶点A除了不能通向顶点D和自身，可以通向其它任何一个的顶点
 
因为该图为无向图，因此顶点A如果能通向另一个顶点，那么这个顶点也一定能通向顶点A，所以这个顶点对应顶点A的也应该是 1
 
为了大家更好的理解，我根据这个邻接矩阵，重新还原了一幅正确的图结构出来，如下面这张动图所示：
 

 虽然我们确实用邻接矩阵表示了图结构，但是它有一个致命的缺点，那就是矩阵中存在着大量的0，这在程序中会占据大量的内存。此时我们思考一下，0就是表示没有，没有为什么还要写，所以我们来看一下第二种表示图结构的方法，它就很好的解决了邻接矩阵的缺陷
 
（2）邻接表
 
邻接表 是由每个顶点以及它的相邻顶点组成的
 
还是使用刚才上面的那个例子，如图
 

 那么此时我们的邻接表就是这样的，如下图
 
 
图中最左侧红色的表示各个顶点，它们对应的那一行存储着与它相关联的顶点
 
因此，我们可以看出：
 
顶点A 与 顶点B 、顶点C 、顶点E 相关联
顶点B 与 顶点A 相关联
顶点C 与 顶点A 、顶点D 、顶点E 相关联
顶点D 与 顶点C 相关联
顶点E 与 顶点A 、顶点C 相关联
 
为了大家更好的理解，我根据这个邻接表，重新还原了一幅正确的图结构出来，如下面这张动图所示：
 

 我们在文章末尾封装图结构时，也会用到这种表示方法
 
四、遍历搜索
 
在图结构中，存在着两种遍历搜索的方式，分别是 广度优先搜索 和 深度优先搜索
 
在介绍这两种搜索方式前，我们先来看一个例子
 

 这是一个吃金币的小游戏，从入口开始，进去吃掉所到所有的金币，但是要尽可能少得走重复的路
 
首先我们可以把它简化成我们学习的图结构，如图
 

 接下来我们就根据这个图结构来介绍两种遍历搜索方式
 
（1）广度优先搜索
 
广度优先搜索 就是从第一个顶点开始，尝试访问尽可能靠近它的顶点，即先访问最靠近它的所有顶点，再访问第二靠近它的所有顶点，以此类推，直到访问完所有的顶点
 
概念比较抽象，我们就拿上面的例子来说，如图所示
 

 第一次先搜索离 顶点1 最近的两个顶点，即 顶点2 和 顶点7
 
然后再搜索离 顶点1 第二近的所有顶点，也就是离 顶点2 和 顶点7 最近的所有顶点，如图所示
 
 由图可知，离顶点2 最近的顶点为 顶点3 和 顶点5 ，离 顶点7 最近的顶点为 顶点8 ，因此这几个点以此被遍历
 
再继续往下搜索离 顶点1 第三近的所有顶点，也就是离 顶点3 、顶点5 和 顶点8 最近的所有顶点，搜索过程如图所示
 
 由图可知，离 顶点3 最近的顶点有 顶点6 ；离 顶点5 最近的顶点有 顶点4 ；离 顶点8 最近的顶点有 顶点9，因此它们也逐一被遍历
 
到此为止，整个图结构就已经被遍历完成了，这就是一个广度优先搜索完整的过程
 
（2）深度优先搜索
 
深度优先搜索 就是从一个顶点开始，沿着一条路径一直搜索，直到到达该路径的最后一个结点，然后回退到之前经过但未搜索过的路径继续搜索，直到所有路径和结点都被搜索完毕
 
同样的，概念比较抽象，我们来用上面的例子模拟一遍深度优先搜索，如图所示
 
先随便沿着一条路径一直搜索，图中路径为 1 -> 2 -> 3 -> 6 -> 9 -> 8 -> 5 -> 4
 
 
当搜索到 顶点4 时，发现查找不到未被访问的顶点了，因此 顶点4 就是这条路径的最后一个顶点，此时我们要往后倒退，找寻别的每搜索过的路径
 
此时发现当往后退到 顶点8 时，有一条路径上还有未被搜索过的顶点，即 8 -> 7 ，如图所示
 
 
沿着这条路径一直找到了最后一个顶点—— 顶点7，此时我们要继续往后退，看看还有没有别的路径没走过并且有未搜索过的顶点，但此时发现所有顶点都被访问过了，因此一个完整的深度优先搜索就完成了
 
五、图结构的方法
 
在封装图结构之前，我们先来了解一下图结构都由哪些方法，如下表所示
 
方法
含义
addVertex()
添加顶点
addEdge()
添加边
toString()
展示邻接表
breadthFirstSearch()
广度优先搜索
depthFirstSearch()
深度优先搜索
六、用代码实现图结构
 
前提：
 
我们封装的图结构中，存储边的方式用到的是我们上文提到的邻接表
封装的图结构面向的都是无权无向图
 
（1）创建一个构造函数
 
首先创建一个大的构造函数，用于存放二叉查找树的一些属性和方法。
 
function Graph() {
    // 属性
    this.vertexes = []
    this.edges = {}
}
 
因为图结构是由顶点的集合和边的集合构成的，因此我们想要设定两个属性 vertexes 和 edges ，分别存储着所有的顶点 、所有的边
 
其中，属性 edges 是初始化了一个空对象。
 
假设我们先新添加一个 顶点A ，那么我们除了在属性 vertexes 中存储一下该顶点信息，我们还要为 顶点A 在属性 edges 中创建一个键值对，键为 顶点A ，值是一个空数组，用于存放之后它的相邻顶点，如图所示
 

 然后我们又新添加一个 顶点B ，并且设定 顶点A 与 顶点B 为相邻顶点，那么此时的属性 edges 是这样的
 

 此时可以很明显的看出，顶点A 和 顶点B 相关联，即它们之间有一条边，它们互为相邻顶点
 
（2）实现addVertex()方法
 
addVertex() 方法就是将一个顶点添加到图结构中。该方法需要传入一个参数 v 用于表示顶点信息
 
实现思路：
 
将新添加的顶点 v 添加到属性 vertexes 中
在属性 edges 中为顶点 v 创建一个数组空间，用于存放与其相关的边的信息
 
我们来看一下代码
 
function Graph() {
    // 属性
    this.vertexes = []
    this.edges = {}

	// 方法
    // 添加顶点
    Graph.prototype.addVertex = function(v) {
        this.vertexes.push(v)
        this.edges[v] = []
    }
}
 
我们来使用一下该方法
 
let graph = new Graph()

graph.addVertex(3)
graph.addVertex(9)
graph.addVertex(5)
 
我们来看一下我们定义的两个属性是什么样的，如图所示
 
 

 此时的各个顶点之间是没有任何的边的，等我们后面封装好了添加边的方法以后，再回头来看一下
 
（3）实现addEdge()方法
 
addEdge() 方法用于向图结构中添加边。该方法需要传入两个参数，即 v1 和 v2，分别代表两个顶点
 
实现思路：
 
找到属性 edges 中的 v1，为其添加一个相邻顶点 v1
同时找到属性 edges 中的 v2，为其添加一个相邻顶点 v1
 
我们来看一下代码
 
function Graph() {
    // 属性
    this.vertexes = []
    this.edges = {}

	// 方法
    // 添加边
    Graph.prototype.addEdge = function(v1, v2) {
        this.edges[v1].push(v2)
        this.edges[v2].push(v1)
    }
}
 
现在我们来使用一下该方法
 
let graph = new Graph()

// 向图结构
graph.addVertex(3)
graph.addVertex(9)
graph.addVertex(5)

// 为顶点添加边
// 在顶点3 和 顶点9 之间添加一条边
graph.addEdge(3, 9)
// 在顶点3 和 顶点5 之间添加一条边
graph.addEdge(3, 5)
// 在顶点5 和 顶点9 之间添加一条边
graph.addEdge(5, 9)
 
我们来看一下我们定义的两个属性是什么样的，如图所示
 
 
 此时的图结构是这样的
 
 
（4）实现toString()方法
 
toString() 方法是用字符串的形式来向我们展示邻接表。该方法无需传入参数
 
我们先来看一下我们最终需要的展示效果是如何的，如图
 

 其实就是依次展示了每个顶点的所有相邻顶点
 
实现思路：
 
创建一个字符串 str
遍历属性 vertexes，获取到每个顶点
每获取到一个顶点时，添加到 str 中，然后从属性 edges 中找到存放该顶点的相邻顶点的数组，然后遍历该数组，将所有相邻顶点添加到 str 中
最终返回 str
 
我们直接来看一下代码
 
function Graph() {
    // 属性
    this.vertexes = []
    this.edges = {}

	// 方法
    // 展示邻接表
    Graph.prototype.toString = function() {
    	// 1. 创建字符串，用于存放数据
        let string = ''
        
        // 2. 遍历所有顶点
        for(let i in this.vertexes) {
			
			// 2.1 获取遍历到的顶点
            let vertex = this.vertexes[i]
			
			// 2.2 将遍历到的顶点添加到字符串中
            string += `${vertex} => `
            
            // 2.3 获取存储该顶点所有的相邻顶点的数组
            let edges = this.edges[vertex]

			// 2.4 遍历该顶点所有的相邻顶点
            for(let i in edges) {
            	// 2.4.1 将遍历到的相邻顶点添加到字符串中
                string += `${edges[i]} `
            }
            // 2.5 换行
            string += '\n'
        }
		
		// 3. 返回最终结果
        return string
    }
}
 
我们来使用一下该方法，为了方便，这里仍用上面的例子
 
let graph = new Graph()

// 向图结构
graph.addVertex(3)
graph.addVertex(9)
graph.addVertex(5)

// 为顶点添加边
graph.addEdge(3, 9)
graph.addEdge(3, 5)
graph.addEdge(5, 9)

// 获取邻接表
console.log(graph.toString())
/* 返回结果为：
				3 => 9 5 
				9 => 3 5 
				5 => 3 9 
*/
 
核对了一下，结果时正确的
 
（5）实现initColor()方法（内部方法）
 
在封装 breadthFirstSearch()方法和 depthFirstSearch() 方法之前，我们要额外封装一个 initColor()方法，这里要用到一个思想，但上面在介绍广度优先搜索和深度优先搜索时没有提到，这里我们来了解一下
 
无论是在进行广度优先搜索还是深度优先搜索时，我们搜索顶点的时候，会频繁地重复搜索到某些顶点，那么我们就要用一种方式，使被搜索过的顶点不再被重复搜索一次。这种方法就是给每个顶点一个颜色标记，没有被搜索过的顶点被标记白色，被搜索过的顶点被标记黑色
 
我们就拿一个简单的广度优先搜索的例子，来感受一下该方法的作用
 
首先是广度优先搜索的例子，如图所示
 

 首先我们从 顶点A 开始搜索，先依次遍历其所有的相邻顶点有 顶点B 和 顶点C ；
 
然后接着分别遍历 顶点B 和 顶点C 的所有相邻顶点，其中 顶点B 的所有相邻顶点有 顶点A 、顶点C 、顶点D ，顶点C 的所有相邻顶点有 顶点A 、顶点B 、顶点D ，我们就按上述顺序依次遍历。此时我们可以发现，当遍历 顶点B 的相邻顶点时，会搜索到 顶点A，但是 顶点A 是我们一开始就搜索过的，因此不应该重复遍历。
 
同样的，当遍历完 顶点B 的相邻顶点以后，在遍历 顶点C 的相邻顶点时，我们会发现其所有的相邻顶点之前都已经搜索过了，现在不应该重复遍历了。
 
所以我们来看一下使用了颜色标记以后的搜索过程吧
 
首先遍历到初始顶点——顶点A，此时我们给它标记黑色
 

 接着遍历 顶点A 所有的相邻顶点，即 顶点B 和 顶点C，并将它们都标记为黑色
 

 最后，我们要遍历 顶点B 和 顶点C 所有的相邻顶点
 
先遍历 顶点B 的相邻顶点，分别是 顶点A 、顶点C 、顶点D，我们通过颜色辨认得知 顶点A 和 顶点C 都为黑色，表示已经被搜索过了，所以无需重复遍历它们，此时只有 顶点D 不为黑色，所以我们搜索到了 顶点D，并将其标记为黑色
 

 接着我们要遍历 顶点C 的相邻顶点，分别为 顶点A 、顶点B 、顶点D，但我们此时通过颜色辨认发现，所有的相邻顶点都被搜索过了，因此无需重复遍历这些顶点了。
 
这样一个完美的广度优先搜索就完成了。
 
因此，我们需要封装一个颜色初始化的函数，用于将所有顶点的颜色都初始化为白色，并将颜色信息存放在一个对象中，返回该对象用于别的函数
 
我们来看一下代码
 
function Graph() {
    // 属性
    this.vertexes = []
    this.edges = {}

	// 方法
    // 顶点颜色初始化（内部函数）
    Graph.prototype.initColor = function() {
        // 1. 创建对象，存放颜色信息
        let color = {}
        
        // 2. 遍历所有顶点，将其颜色初始化为白色
        for(let i in this.vertexes) {
            color[this.vertexes[i]] = 'white'
        }
		
		// 3. 返回颜色对象
        return color       
    }
}
 
该方法的使用我们会在后续使用到，这里就不做演示了
 
（6）实现breadthFirstSearch()方法
 
breadthFirstSearch() 方法是对图结构进行广度优先搜索。该方法接收两个参数，第一个参数为初始顶点，即从哪个顶点开始搜索；第二个参数接收一个回调函数 handle 作为参数，用于在搜索过程中进行一些操作
 
在上文多次介绍了广度优先搜索，其实这是一种基于队列来搜索顶点的方式
 
注： 这里我就把我之前文章中封装的队列构造函数直接拿来使用了，如果想看队列的各个方法的实现过程的小伙伴可以点击下面跳转链接进行查看
 
【数据结构与算法】详解什么是队列，并用代码手动实现一个队列结构
 
实现思路：
 
先将所有的顶点颜色初始化为白色
从给定的第一个顶点开始搜索，即将第一个顶点添加到队列中，并将第一个顶点标记为黑色
从队列中取出一个顶点，查找该顶点的未被访问过的相邻顶点，将其添加到队列的队尾位置，并将这些顶点标记未黑色，表示也被访问过
执行我们的回调函数 handle，将该顶点作为参数传入
一直循环 步骤3 ~ 步骤4 ，直到队列为空
 
我们来看一下具体的代码
 
function Graph() {
    // 属性
    this.vertexes = []
    this.edges = {}

	// 已经封装好的队列构造函数
	function Queue() {
	    this.list = []
	
	    //入队列
	    Queue.prototype.enqueue = function (e) {
	        this.list.push(e)
	    }
	    //出队列
	    Queue.prototype.dequeue = function () {
	        return this.list.shift()
	    }
	    //判断队列是否为空
	    Queue.prototype.isEmpty = function() {
	        if(this.list.length === 0) {
	            return true
	        }
	        else {
	            return false
	        }
	    }
	    //返回队列中元素个数
	    Queue.prototype.size = function () {
	        return this.list.length
	    }
	    //返回队列中的第一个元素
	    Queue.prototype.front = function () {
	        return this.list[0]
	    }
	    //返回当前队列
	    Queue.prototype.toString = function () {
	        let string = ''
	        for(let i in this.list) {
	            string += `${this.list[i]} `
	        }
	        return string
	    }
	}

	// 方法
    // 顶点颜色初始化（内部函数）
    Graph.prototype.initColor = function() {
        // 1. 创建对象，存放颜色信息
        let color = {}
        
        // 2. 遍历所有顶点，将其颜色初始化为白色
        for(let i in this.vertexes) {
            color[this.vertexes[i]] = 'white'
        }
		
		// 3. 返回颜色对象
        return color       
    }

	// 广度优先搜索
    Graph.prototype.breadthFirstSearch = function(firstVertex, handle) {
        // 1. 初始化所有顶点颜色
        const color = this.initColor()
        
        // 2. 新建一个队列
        const queue = new Queue()
        
        // 3. 将第一个顶点加入队列
        queue.enqueue(firstVertex)

        // 4. 开始广度优先搜索
        while(!queue.isEmpty()) {

            // 4.1 从队列中取出一个顶点
            let vertex = queue.dequeue()

            // 4.2 获取与该顶点相关的其他顶点
            let otherVertexes = this.edges[vertex]

            // 4.3 将该顶点设为黑色，表示已被访问过，防止后面重复访问
            color[vertex] = 'black'

            // 4.4 遍历与该顶点相关的其它顶点
            for(let i in otherVertexes) {

                // 4.4.1 获取与该顶点相关的顶点
                let item = otherVertexes[i]

                // 4.4.1 若未被访问，则加入到队列中
                if(color[item] === 'white') {
                    color[item] = 'black'
                    queue.enqueue(item)
                }
            }

            // 4.5 执行我们的回调函数
            handle(vertex)
        }     
    }
}
 
我们来使用一下该方法吧，为了方便检查函数的正确性，我们之前介绍到的吃金币的例子，并且回调函数 handle 用来打印一下访问到的顶点
 
这里我直接把正确的访问顺序图放在这里，方便大家下面核对结果是否正确
 
 
let graph = new Graph()

graph.addVertex(1)
graph.addVertex(2)
graph.addVertex(3)
graph.addVertex(4)
graph.addVertex(5)
graph.addVertex(6)
graph.addVertex(7)
graph.addVertex(8)
graph.addVertex(9)

graph.addEdge(1, 2)
graph.addEdge(1, 7)
graph.addEdge(2, 3)
graph.addEdge(2, 5)
graph.addEdge(3, 2)
graph.addEdge(3, 6)
graph.addEdge(4, 5)
graph.addEdge(5, 4)
graph.addEdge(5, 2)
graph.addEdge(5, 8)
graph.addEdge(6, 3)
graph.addEdge(6, 9)
graph.addEdge(7, 1)
graph.addEdge(7, 8)
graph.addEdge(8, 5)
graph.addEdge(8, 7)
graph.addEdge(8, 9)
graph.addEdge(9, 6)
graph.addEdge(9, 8)

// 广度优先搜索
graph.breadthFirstSearch(1, function(vertex) {
	// 打印访问到的顶点
	console.log(vertex)
})
/* 打印结果：
			1
			2
			7
			3
			5
			8
			6
			4
			9
*/
 
把打印的结果和图片核对以后发现结果是一致的，因此这个方法是没有问题的
 
（7）实现depthFirstSearch()方法
 
depthFirstSearch() 方法是对图结构进行深度优先搜索。该方法接收两个参数，第一个参数为初始顶点，即从哪个顶点开始搜索；第二个参数接收一个回调函数 handle 作为参数，用于在搜索过程中进行一些操作
 
在上文多次介绍了深度优先搜索，其实这是一种基于栈来搜索顶点的方式，我们也直到其实递归也是利用栈结构的思路实现的，因此我们这里封装该方法时就不把之前封装好的栈结构拿来使用了，直接利用递归实现，正好递归也能把代码变得简洁点
 
因此首先我们要封装一个递归调用的主体函数，方法名为 depthVisit，该方法接收三个参数，第一个参数为搜索的顶点；第二个参数为存储顶点颜色信息的对象；第三个参数为回调函数，实现思路如下
 
depthVisit()方法的实现思路：
 
从给定的顶点开始搜索，将其标记为黑色，表示已被访问过
执行我们的回调函数 handle，将该顶点作为参数传入
遍历该顶点的所有相邻顶点，若相邻顶点为黑色，则表示已被访问过，就不做任何处理
若相邻顶点为白色，则表示未被访问，于是就再次调用 breadthFirstSearch()方法，将该顶点作为第一个参数
 
再来简单说一下 depthFirstSearch() 方法的实现思路
 
depthFirstSearch()方法的实现思路：
 
将所有顶点的颜色初始化为白色
选择一个顶点作为深度优先搜索的第一个顶点，调用 depthVisit()方法，并将该顶点作为该方法的第一个参数
 
接下来我们来看一下具体的代码吧
 
function Graph() {
    // 属性
    this.vertexes = []
    this.edges = {}

	// 方法
    // 顶点颜色初始化（内部函数）
    Graph.prototype.initColor = function() {
        // 1. 创建对象，存放颜色信息
        let color = {}
        
        // 2. 遍历所有顶点，将其颜色初始化为白色
        for(let i in this.vertexes) {
            color[this.vertexes[i]] = 'white'
        }
		
		// 3. 返回颜色对象
        return color       
    }
	
	// 深度优先搜索
    Graph.prototype.depthFirstSearch = function(firstVertex, handle) {
        // 1. 初始化所有顶点颜色
        const color = this.initColor()

        // 2. 开始递归访问各个顶点
        this.depthVisit(firstVertex, color, handle)
    }

    // 深度优先搜索的递归访问（内部函数）
    Graph.prototype.depthVisit = function(vertex, color, handle) {
        // 1. 先将访问到的顶点颜色设为黑色，防止后面重复访问
        color[vertex] = 'black'

        // 2. 执行回调函数
        handle(vertex)

        // 3. 获取与该顶点相关的其它顶点
        let otherVertexes = this.edges[vertex]

        // 4. 遍历所有相关的顶点
        for(let i in otherVertexes) {
            let item = otherVertexes[i]
            // 4.1 访问没有被访问过的相邻顶点
            if(color[item] === 'white') {
                this.depthVisit(item, color, handle)
            }
        }

    }
	
}
 
同样的，我们也用上文将到的吃金币例子中的深度优先搜索的结果图来验证我们方法的正确性，图片如下
 
 
let graph = new Graph()

graph.addVertex(1)
graph.addVertex(2)
graph.addVertex(3)
graph.addVertex(4)
graph.addVertex(5)
graph.addVertex(6)
graph.addVertex(7)
graph.addVertex(8)
graph.addVertex(9)

graph.addEdge(1, 2)
graph.addEdge(1, 7)
graph.addEdge(2, 3)
graph.addEdge(2, 5)
graph.addEdge(3, 2)
graph.addEdge(3, 6)
graph.addEdge(4, 5)
graph.addEdge(5, 4)
graph.addEdge(5, 2)
graph.addEdge(5, 8)
graph.addEdge(6, 3)
graph.addEdge(6, 9)
graph.addEdge(7, 1)
graph.addEdge(7, 8)
graph.addEdge(8, 5)
graph.addEdge(8, 7)
graph.addEdge(8, 9)
graph.addEdge(9, 6)
graph.addEdge(9, 8)

// 深度优先搜索
graph.depthFirstSearch(1, function(vertex) {
	// 打印访问到的顶点
	console.log(vertex)
})
/* 打印结果：
			1
			2
			3
			6
			9
			8
			5
			4
			7
*/
 
把打印的结果和图片核对以后发现结果是一致的，因此这个方法是没有问题的
 
七、结束语
 
图结构的讲解就到这里了，希望大家对图结构有了更深一层的理解。到此为止，我的【数据结构与算法】专栏中的数据结构部分已经结束了，接下来准备开始讲解排序算法了，下一篇文章为基本排序算法，顺便会在文中介绍一下大O表示法。
 
大家可以关注我，之后我还会一直更新别的数据结构与算法的文章来供大家学习，并且我会把这些文章放到【数据结构与算法】这个专栏里，供大家学习使用。
 
然后大家可以关注一下我的微信公众号：前端印象，等这个专栏的文章完结以后，我会把每种数据结构和算法的笔记放到公众号上，大家可以去那获取。
 
或者也可以去我的github上获取完整代码，欢迎大家点个Star
 
https://github.com/Lpyexplore/structureAndAlgorithm-JS
 
我是Lpyexplore，创作不易，喜欢的加个关注，点个收藏，给个赞~ 带你们在Python爬虫的过程中学习Web前端