用js来实现那些数据结构15(图01)[通俗易懂]

其实在上一篇介绍树结构的时候,已经有了一些算法的相关内容介入。而在图这种数据结构下,会有更多有关图的算法,比如广度优先搜索,深度优先搜索最短路径算法等等。这是我们要介绍的最后一个数据结构。同时也是本系

大家好,又见面了,我是你们的朋友全栈君。

  其实在上一篇介绍树结构的时候,已经有了一些算法的相关内容介入。而在图这种数据结构下,会有更多有关图的算法,比如广度优先搜索,深度优先搜索最短路径算法等等。这是我们要介绍的最后一个数据结构。同时也是本系列最为复杂的一个。那么我们先来简单介绍一下,什么是图?

 

一、图的概念

  简单说,就是网络结构的抽象模型,图是一组由连接的节点(或顶点)。任何二元关系都可以用图来表示。比如我们的地图,地铁线路图等。都是图的实际应用。

  接着我们看看图的一些相关概念和术语。

  一个图G = (V,E)由以下元素组成:

    V:一组顶点。

    E:一组边,链接V中的顶点。

  在继续之前我们先来上张图,继续我们的看图说话。

用js来实现那些数据结构15(图01)[通俗易懂]

   请看上图,我们来解释一些概念。

    1、由一条边连接在一起的顶点称为相邻顶点。比如上图中的A和B,A和C,A和D都是相邻的,但是A和E不是相邻的。

    2、一个顶点的取决于其相邻顶点的数量。也就是说,有多少个顶点与其相连,那么它的度就是多少。比如A的度是3,D的度就是4。

    3、路径是顶点V1,V2…..Vn的一个连续序列,其中Vi和Vi+1是相邻的。比如上图中的ACDG,ABEI都是一个路径。

    4、简单路径要求不包含重复的定点。比如ADG就是一条简单路径。

    5、除去最后一个顶点(因为它和第一个顶点时相同的),也是一个简单路径,比如ADCA。

    6、如果图中不存在环。则该图是无环的。

    7、如果图中每两个顶点间都存在路径,则该图是连通的。

  为了便于对比,我又花了一张图。

用js来实现那些数据结构15(图01)[通俗易懂]

  跟第一幅图几乎是一样的,只不过我们在路径上加了点东西。

    8、图可以是有向的(边有方向)或者是无向的(边没有方向)。比如上图我们在边上加了方向就变成了有向图。

    9、如果在图中的两个顶点间在双向上都存在路径,则该图是强连通的。比如上图中我们可以说C和D是强连通的。A和B不是强连通的。但是上图并不是一个强连通图。因为上图并不是两个点都有双向的路径。

    10、图还可以是未加权的或是加权的。上图边上加的数字就是加权值。(加权的意思可以简单理解为CSS选择器中的那种权重。)

 

二、图的表示方法

  我们可以表示图的方法有很多。根据我们要解决问题的类型和图的类型。我们可以选择不同的方法来表示图。下面我们会简单介绍两种表示图的方法。

  1、邻接矩阵。每一个节点都和一个整数相关联,该整数将作为数组的索引。我们用一个二维数组来表示各个顶点之间的连接情况。比如索引为i的节点和索引为j的节点相邻,则表示为arrya[i][j]=1。否则arrya[i][j]=0。

  用js来实现那些数据结构15(图01)[通俗易懂]

  邻接矩阵看起来就是这样子的。要注意我们上面的邻接矩阵只是表示两个顶点是否相邻。我们还需要一个数组来存储所有的顶点。

  但是邻接矩阵会有一些性能问题。比如我们会用很多的空间来表示一些根本就不存在的边。比如上图所有的0。再比如我们想要找到A顶点的相邻顶点,即使A顶点只有一个相邻顶点。我们也必须遍历整个数组才能找到。

  2、邻接表,鉴于以上的问题。我们在本篇中所使用的图的表示方法就是邻接表。邻接表由图中每个顶点的相邻顶点列表所组成。我们可以用数组,链表,map或者hashMap来实现邻接表。

用js来实现那些数据结构15(图01)[通俗易懂]

  邻接表看起来就像是上图这样。

  那么我们知道了图的一些基本概念和我们要使用的图的表示方法。下面我们先来完成我们Graph类的架子。

function Map () {
    //......其他各种方法,详见前面的字典部分
}

//代码很简单,但是还是要解释一下。
function Graph() {
    //vertices数组存放我们图中所有的顶点
    var vertices = [];
    //adjList存放我们的邻接表。adjList会使用顶点来作为键,邻接顶点列表作为值
    var adjList = new Map();
    //添加顶点的方法。
    this.addVertices = function (v) {
        //存放到顶点数组中
        vertices.push(v);
        //生成一个还没有邻接顶点列表的Map,因为这时我们已经有顶点了,所以要生成以待使用
        adjList.set(v,[]);
    }
    //这里有个小细节我们需要注意,哦对,这是为图添加边的方法。要注意的是,实际上,在代码中,我们是没有一个东西(变量或者其他什么)来代表边的。
    //我们为两个顶点之间添加一个边实际上只是为两个顶点的邻接表中加入彼此。这样就代表了这两个顶点是相邻的。
    this.addEdge = function (v,w) {
        //而这里我们所实现的图是无向图,所以需要给两个顶点所对应的邻接表加入彼此。
        //而如果是有向图的话,只需要根据方向添加一个就可以了。
        adjList.get(v).push(w);
        adjList.get(w).push(v);
    }

    // 为了方便观察,我们再实现一个toString方法
    // 没啥好说的,双重循环遍历两个数组。
    this.toString = function () {
        var s = "";

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

//我们来试一下
var graph = new Graph();

var verticesArray = ['A','B','C','D','E','F','G','H','I'];

for(var i = 0; i < verticesArray.length; i++) {
    graph.addVertices(verticesArray[i]);
}

graph.addEdge('A','B');
graph.addEdge('A','C');
graph.addEdge('A','D');
graph.addEdge('C','D');
graph.addEdge('C','G');
graph.addEdge('D','G');
graph.addEdge('D','H');
graph.addEdge('B','E');
graph.addEdge('B','F');
graph.addEdge('E','I');


console.log(graph.toString());
/*
A->B  C  D  
B->A  E  F  
C->A  D  G  
D->A  C  G  H  
E->B  I  
F->B  
G->C  D  
H->D  
I->E  
*/

  那么我们就实现了Graph类中最简单的部分——如何添加顶点和边。大家会不会觉得有点简单了。嘿嘿…..有趣的还在后面,别急……

  好了,那么到这里这篇文章就结束了。下一篇文章我们再继续学习图的遍历。

 

  最后,由于本人水平有限,能力与大神仍相差甚远,若有错误或不明之处,还望大家不吝赐教指正。非常感谢!  

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124418.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • linux安装gcc命令步骤(centos安装gcc命令)[通俗易懂]

    linux安装gcc命令步骤(centos安装gcc命令)[通俗易懂]linux安装gcc命令步骤(centos安装gcc命令)>一、前言本文介绍在CentOS7.8系统下使用YUM升级GCC版本的相关操作步骤。CentOS7默认安装的gcc版本是4.8版本,gcc4.8最主要的一个特性就是全面支持C++11,如果不清楚什么用的也没关系,简单说一些C++11标准的程序都需要gcc4.8以上版本的gcc编译器编译。很多工具依赖的是更高版本的gcc,比如编译MySQL8.0(8.0.16以上版本是C++14标准,需gcc5.3以上版本)、Redis6.

    2022年10月10日
  • B2C电商系统源码 在线商城源码[通俗易懂]

    B2C电商系统源码 在线商城源码[通俗易懂]B2C产品采用SSH+Jquery框架开发。具备构建大型电商平台的底层技术体系。支持Oracl与Mysql等多个主流数据库。一、商品系统支持实物与虚拟商品体系。无限制级商品分类与扩展。智能商品模板、个性定义商品属性与属性继承与关联。商品与资讯的智能关联、商品关键字维护,SEO效果更为高效、精准。二、订单系统完善订单流管理、精准跟踪状态与执行人分派。支持来自电商、电话以及渠道的多订单体系。支持订单全流程服务(订单打印、发运、到货、退货、换货、拒收)等。三、会员系统围绕会员精细服

  • 计算机二级公共基础知识点整理

    计算机二级公共基础知识点整理1流程图箭头表示控制流 2结构化程序设计:自顶向下,逐步求精,模块化,限制使用goto语句 3堆排序O(nlog2n)比较次数最少,其他都是n(n-1)2 4栈先进先出的原则 5E-R图转换关系模型是逻辑设计阶段6ASII码为7位,所有大写ASII码都小于小写字母 7系统总线包括数据总线,控制总线和地址总线 8存储在RAM中的数

  • Linux 查看环境变量_linux修改环境变量顺序

    Linux 查看环境变量_linux修改环境变量顺序一、Linux的变量种类     按变量的生存周期来划分,Linux变量可分为两类:     1、永久的:需要修改配置文件,变量永久生效。     2、临时的:使用export命令声明即可,变量在关闭shell时失效。 二、设置变量的三种方法1、在/etc/profile文件中添加变量【对所有用户生效(永久的)】     用VI在文件/etc/profile文件

  • 如何通过一个SAPGUI屏幕反查这个屏幕对应的事务码[通俗易懂]

    如何通过一个SAPGUI屏幕反查这个屏幕对应的事务码[通俗易懂]如何通过一个SAPGUI屏幕反查这个屏幕对应的事务码

  • BeanUtils.populate方法的作用

    BeanUtils.populate方法的作用一般来说,这个方法是在org.apache.commons.beanutils.BeanUtils包中的方法。该方法的函数原型为:BeanUtils.populate(Objectbean,Mapproperties)。这个方法会遍历map&lt;key,value&gt;中的key,如果bean中有这个属性,就把这个key对应的value值赋给bean的属性。具体使用方法,见…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号