数据结构-无向图搜索(JavaScript)

最新推荐文章于 2023-06-27 17:55:47 发布
最新推荐文章于 2023-06-27 17:55:47 发布
阅读量388 收藏
点赞数
分类专栏： 数据结构

概念

算法数据结构描述
广度优先搜索队列通过将顶点存入队列中，最先入队列的顶点先被探索
深度优先搜索栈通过将顶点存入栈中，顶点是沿着路径被探索的，存在新的相邻顶点就去访问

当要标注已经访问过的顶点时，我们用三种颜色来反映它们的状态。
白色：表示该顶点还没有被访问。
灰色：表示该顶点被访问过，但并未被探索过。
黑色：表示该顶点被访问过且被完全探索过。

效果图

广度优先搜索（Breadth-First Search，BFS)）深度优先搜索（Depth-First Search，DFS）
广度优先搜索深度优先搜索

无向图的实现(邻接矩阵、邻接表)

JavaScript代码实现如下，其中广度优先搜索函数是 bfs，深度优先搜索函数是 dfsStack 。

邻接矩阵邻接表
在这里插入图片描述在这里插入图片描述

邻接表实现无向图

无向图的代码实现，此处，无线图的实现，采用了邻接表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--支撑图的数据结构-->
    <script src="struct.js"></script>
</head>
<body>

</body>
<script>
function Graph() {
    var vertices = [];//点
    var adjList  = new Dictionary();//邻接表

    this.addVertex = function (v) {
        vertices.push(v);
        adjList.set(v, []);
    };
    this.addEdge   = function (v, w) {
        adjList.get(v).push(w);
        adjList.get(w).push(v);
    };
    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 initializeColor = function () {
        var color = [];
        for (var i = 0; i < vertices.length; i++) {
            color[vertices[i]] = 'white';
        }
        return color;
    };
    this.bfs            = function (v, callback) {
        var color = initializeColor(),
            queue = new Queue();
        queue.enqueue(v);
        while (!queue.isEmpty()) {
            var u         = queue.dequeue(),
                neighbors = adjList.get(u);
            color[u]      = 'grey';
            for (var i = 0; i < neighbors.length; i++) {
                var w = neighbors[i];
                if (color[w] === 'white') {
                    color[w] = 'grey';
                    queue.enqueue(w);
                }
            }
            color[u] = 'black';
            if (callback) {
                callback(u);
            }
        }
    };
    this.BFS            = function (v) {
        var color = initializeColor(),
            queue = new Queue(),
            d     = [],
            pred  = [];
        queue.enqueue(v);
        for (var i = 0; i < vertices.length; i++) {
            d[vertices[i]]    = 0;
            pred[vertices[i]] = null;
        }
        while (!queue.isEmpty()) {
            var u         = queue.dequeue(),
                neighbors = adjList.get(u);
            color[u]      = 'grey';
            for (i = 0; i < neighbors.length; i++) {
                var w = neighbors[i];
                if (color[w] === 'white') {
                    color[w] = 'grey';
                    d[w]     = d[u] + 1;
                    pred[w]  = u;
                    queue.enqueue(w);
                }
            }
            color[u] = 'black';
        }
        return {
            distances: d,
            predecessors: pred
        };
    };
    this.dfsStack       = function (v, callback) {
        var color = initializeColor(),
            stack = new Stack();
        stack.push(v);
        while (!stack.isEmpty()) {
            var u         = stack.pop(),
                neighbors = adjList.get(u);
            color[u]      = 'grey';
            for (var i = 0; i < neighbors.length; i++) {
                var w = neighbors[i];
                if (color[w] === 'white') {
                    color[w] = 'grey';
                    stack.push(w);
                }
            }
            color[u] = 'black';
            if (callback) {
                callback(u);
            }
        }
    };
    this.dfs            = function (callback) {
        var color = initializeColor();
        for (var i = 0; i < vertices.length; i++) {
            if (color[vertices[i]] === 'white') {
                dfsVisit(vertices[i], color, callback);
            }
        }
    };
    var dfsVisit        = function (u, color, callback) {
        color[u] = 'grey';
        if (callback) {
            callback(u);
        }
        var neighbors = adjList.get(u);
        for (var i = 0; i < neighbors.length; i++) {
            var w = neighbors[i];
            if (color[w] === 'white') {
                dfsVisit(w, color, callback);
            }
        }
        color[u] = 'black';
    };
    var time            = 0;
    this.DFS            = function () {
        var color = initializeColor(),
            d     = [],
            f     = [],
            p     = [];
        time      = 0;

        for (var i = 0; i < vertices.length; i++) {
            f[vertices[i]] = 0;
            d[vertices[i]] = 0;
            p[vertices[i]] = null;
        }
        for (i = 0; i < vertices.length; i++) {
            if (color[vertices[i]] === 'white') {
                DFSVisit(vertices[i], color, d, f, p);
            }
        }
        return {
            discovery: d,
            finished: f,
            predecessors: p
        };
    };
    var DFSVisit        = function (u, color, d, f, p) {
        console.log('discovered ' + u);
        color[u]      = 'grey';
        d[u]          = ++time;
        var neighbors = adjList.get(u);
        for (var i = 0; i < neighbors.length; i++) {
            var w = neighbors[i];
            if (color[w] === 'white') {
                p[w] = u;
                DFSVisit(w, color, d, f, p);
            }
        }
        color[u] = 'black';
        f[u]     = ++time;
        console.log('explored ' + u);
    };
}

function printNode(value) {
    console.log('Visited vertex: ' + value);
}


var graph      = new Graph();
var myVertices = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
for (var i = 0; i < myVertices.length; i++) {
    graph.addVertex(myVertices[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());
graph.bfs(myVertices[0], printNode);
graph.dfsStack(myVertices[0], printNode);
</script>
</html>

邻接矩阵实现无向图

无向图的代码实现，此处，无线图的实现，采用了邻接矩阵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--支撑图的数据结构-->
    <script src="struct.js"></script>
</head>
<body>

</body>
<script>
    var matrix      = [
        //      A  B  C  D  E  F  G  H  I
        //      0  1  2  3  4  5  6  7  8
        /*A 0*/[0, 1, 1, 1, 0, 0, 0, 0, 0],
        /*B 1*/[1, 0, 0, 0, 1, 1, 0, 0, 0],
        /*C 2*/[1, 0, 0, 1, 0, 0, 1, 0, 0],
        /*D 3*/[1, 0, 1, 0, 0, 0, 1, 1, 0],
        /*E 4*/[0, 1, 0, 0, 0, 0, 0, 0, 1],
        /*F 5*/[0, 1, 0, 0, 0, 0, 0, 0, 0],
        /*G 6*/[0, 0, 1, 1, 0, 0, 0, 0, 0],
        /*H 7*/[0, 0, 0, 1, 0, 0, 0, 0, 0],
        /*I 8*/[0, 0, 0, 0, 1, 0, 0, 0, 0]
    ];
    var vertices = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];

    function Graph(matrix, vertices) {

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

        var initializeColor = function () {
            var color = [];
            for (var i = 0; i < vertices.length; i++) {
                color[vertices[i]] = 'white';
            }
            return color;
        };
        this.bfs            = function (v, callback) {
            var color = initializeColor(),
                queue = new Queue();
            queue.enqueue(v);
            while (!queue.isEmpty()) {
                var u         = queue.dequeue(),
                    neighbors = matrix[u];
                color[vertices[u]]      = 'grey';
                for (var i = 0; i < neighbors.length; i++) {
                    if(neighbors[i] > 0) {
                        var w = vertices[i];
                        if (color[w] === 'white') {
                            color[w] = 'grey';
                            queue.enqueue(i);
                        }
                    }
                }
                color[vertices[u]] = 'black';
                if (callback) {
                    callback(vertices[u]);
                }
            }
        };
        this.dfsStack       = function (v, callback) {
            var color = initializeColor(),
                stack = new Stack();
            stack.push(v);
            while (!stack.isEmpty()) {
                var u         = stack.pop(),
                    neighbors = matrix[u];
                color[vertices[u]]      = 'grey';
                for (var i = 0; i < neighbors.length; i++) {
                    if(neighbors[i] > 0) {
                        var w = vertices[i];
                        if (color[w] === 'white') {
                            color[w] = 'grey';
                            stack.push(i);
                        }
                    }
                }
                color[vertices[u]] = 'black';
                if (callback) {
                    callback(vertices[u]);
                }
            }
        };
    }

    function printNode(value) {
        console.log('Visited vertex: ' + value);
    }

    var graph      = new Graph(matrix, vertices);
    //console.log(graph.toString());
    graph.bfs(0, printNode);
    graph.dfsStack(0, printNode);
</script>
</html>

输出

广度优先搜索深度优先搜索
A B C D E F G H IA D H G C B F E I

支撑图的数据结构

struct.js 栈、队列、字典

//栈
function Stack() {
    let items    = [];
    //入栈
    this.push    = function (element) {
        items.push(element);
    };
    //出栈
    this.pop     = function () {
        return items.pop();
    };
    //查看栈顶元素
    this.peek    = function () {
        return items[items.length - 1];
    };
    this.isEmpty = function () {
        return items.length == 0;
    };
    this.clear   = function () {
        items = [];
    };
    this.print   = function () {
        console.log(items.toString());
    };
}

//队列
function Queue() {
    let items    = [];
    //入队
    this.enqueue = function (element) {
        items.push(element);
    };
    //出队
    this.dequeue = function () {
        return items.shift();
    };
    //查看队首元素
    this.front   = function () {
        return items[0];
    };
    this.isEmpty = function () {
        return items.length == 0;
    };
    this.size    = function () {
        return items.length;
    };
    this.print   = function () {
        console.log(items.toString());
    };
}

//字典
function Dictionary() {
    var items     = {};
    this.has      = function (key) {
        return key in items;
    };
    this.set      = function (key, value) {
        items[key] = value;
    };
    this.get      = function (key) {
        return this.has(key) ? items[key] : undefined;
    };
    this.delete   = function (key) {
        if (this.has(key)) {
            delete items[key];
            return true;
        }
        return false;
    };
    this.values   = function () {
        var values = [];
        for (var k in items) {
            if (this.has(k)) {
                values.push(items[k]);
            }
        }
        return values;
    };
    this.keys     = function () {
        return Object.keys(items);
    };
    this.getItems = function () {
        return items;
    };
}

参考文献

[1] [巴西]Loiane Groner. 学习JavaScript数据结构与算法（第2版）[M]. 人民邮电出版社，2017.
[2] [日本]石田保辉，宫崎修一. 我的第一本算法书[M]. 人民邮电出版社，2018.

飞蛾逐月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS-Adjacency-table-of-undirected-graph:数据结构实验-无向图邻接表
05-31
无向图邻接表是一种在JavaScript中实现图数据结构的有效方式。在计算机科学中，图是一种用于表示对象之间关系的数据结构，而邻接表是存储图的一种高效方法，尤其适用于稀疏图（即边的数量远小于节点数量的平方）。...
A*算法JS实现
sinat_39013092的博客
12-03 1103
A*寻路算法就是启发式探索的一个典型实践，在寻路的过程中，给每个节点绑定了一个估计值（即启发式），在对节点的遍历过程中是采取估计值优先原则，估计值更优的节点会被优先遍历。所以估计函数的定义十分重要，显著影响算法效率。 <html> <head> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <script>
无向图、深度优先搜索(无向图)、广度优先搜索(无向图)、无向图路径查找(基于深度优先搜索)
一名小白的博客
08-24 3025
一、无向图 1.1 图的相关术语 相邻顶点： 当两个顶点通过一条边相连时，我们称这两个顶点是相邻的，并且称这条边依附于这两个顶点。 度： 某个顶点的度就是依附于该顶点的边的个数。 子图： 是一幅图的所有边的子集(包含这些边依附的顶点)组成的图。 路径： 是由边顺序连接的一系列的顶点组成。 环： 是一条至少含有一条边且终点和起点相同的路径。 连通图： 如果图中任意一个顶点都存在一条路径到达另外一个顶点，那么这幅图就称之为连通图。 连通子图： 一个非连通图由若干连通的部分组成，每一个连通的部分都可以称为该图的连
无向图G的广度优先搜索和深度优先搜索以及完整程序
m0_75220252的博客
06-27 2772
无向图G的广度优先搜索和深度优先搜索以及完整程序
Java实现：无向图、深度优先搜索、广度优先搜索、路径查找
sc179的博客
11-18 1058
1 无向图 1.1 特征 无向图的边仅仅连接两个顶点，没有其他含义，区别于有向图（边不仅连接两个顶点，且具有方向）。 1.2 相关术语 相邻顶点：通过一条边相连的两个顶点，并且称这条边依附于这两个顶点； 度：某顶点的度指依附于该顶点的边的个数 子图：一幅图的所有边的子集（包含这些边依附的顶点）组成的图； 路径：由边顺序连接的一系列的顶点组成； 环：含有至少一条边且终点和起点相同的路径。 连通图：如果图中任意一个顶点都存在一条路径到达另外一个顶点，那么这幅图就称为连通图； 连通子图：一个非连通图由若干连
无向图的深度优先搜索
机械工程跑路哥
03-29 1923
一.概述 所谓的深度优先搜索，指的是在搜索时，如果遇到一个结点既有子结点，又有兄弟结点，那么先找子结点，子节点找完了，再找兄弟结点。 无向图中，一条边在邻接表中出现两次，搜索子节点的时候需要判断此边是否之前被搜索过，如0-6 6-0 ，不能从6再往0方向区搜索，会重复。 从顶点0出发，遍历0的邻接表，找到第一个6 ； 继续递归dfs从6出发 ，遍历6的邻接表，0搜索过，找到4 ； 继续递归dfs从4出发，找到5； 继续递归dfs从5出发，遍历5的邻接表，找到3； 继续递归dfs从3出发，遍历3的邻接表
js代码-数据结构-随机生成双向图
07-16
双向图（也称为二元图或有向图）是数据结构的一种，其中的边可以从一个节点指向另一个节点，并且这个过程是双向的，即两个节点之间存在双向连接。这篇内容我们将深入探讨如何使用JavaScript来实现随机生成双向图，...
https-github.com-trekhleb-javascript-algorithms:JavaScript算法与数据结构
05-16
红黑树后缀树段树或间隔树二叉索引树或分域树图（有向图和无向图） 不相交集 演算法算法是如何解决一类问题的明确规范。 算法是一组精确定义一系列操作的规则。 主题算法数学阶乘斐波那契数素性检验（试法） ...
数据结构与算法的JavaScript实现及应用.zip
最新发布
06-17
数据结构与算法是计算机科学的基础，对于任何编程语言来说，理解和掌握它们都是至关重要的，特别是对于JavaScript这样的通用型编程语言。本压缩包“数据结构与算法的JavaScript实现及应用.zip”提供了一套全面的大...
js-algorithm:JavaScript版数据结构与算法
03-14
**JavaScript版数据结构与算法详解** 在编程领域，掌握数据结构和算法是提升编程技能的关键。JavaScript，作为当今最流行的编程语言之一，同样需要开发者具备扎实的数据结构与算法基础。本篇文章将深入探讨...
无向图中寻找所有的环路
01-05
在深度优先搜索无向图的过程中，当遇到起始点的时候，会认定为出现环（在本文中只是找出了无向图中所有的长度大于等于3的环（长度为1和2的环没有意思），所以在深搜的过程中，当遇到的是起始点的时候，还需要进行判断是否是环），当确定是出现了环之后，根据是否在遇到环之前的那个点还有其他的路径，来决定是进一步的进行深度优先搜索还是进行回退，在进行深度优先搜索的过程中，将访问过的节点标记，若当前的节点无路可走（不能进行深度优先搜索了），在回退的过程中，将标记取消。
数据结构与算法（java）：图的基本概念、无向图和有向图的实现、图的搜索/遍历
lalala_dxf的博客
04-12 1866
图（java实现）
无向图的广/深度优先搜索
wefang的博客
03-29 1944
无向图的BFS和DFS 无向图的遍历存在广度优先搜索(BFS)和深度优先搜索(DFS)两种方法； 深度优先搜索 概念：沿着深度遍历树的节点，尽可能深的搜索分支。当节点v的所有边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止。 算法...
有向图和无向图用邻接矩阵储存及代码实现
F_hawk189的博客
04-04 1488
转载自：https://blog.csdn.net/vicdd/article/details/77983089 一般存储图的方式有两种：一是用邻接矩阵表示，二是用邻接链表。 所谓用邻接矩阵，是用一个二维数组存储，边使用矩阵来构建模型，这使得每一个顶点和其它顶点之间都有边的有无 的 表示的机会。若有边，则他们交点 为1 ，否则为0。当然，如果是一副边有权值的图，交点存储的是他们边的权值。 1、...
无向图 c语言 （数据结构）
smallliumang的博客
06-16 4645
#include #include #define  N  100 typedef struct { int vers[N];//顶点 int arcs[N][N];//邻接矩阵 int n,e;//n为顶点数，e为边 }graph; void createUDG(graph *G) { int i,j,k,a,b; printf("输入顶点数和边数："); scanf(
数据结构无向图的操作（C语言）
多低调的博客
12-02 4199
目录 //1、含邻接矩阵的图结构 //2、创建邻接矩阵 //3、打印邻接矩阵 //4、邻接表的图结构 //5、创建邻接表 //6、打印邻接表 //7、深度优先搜索 //8、广度优先搜索 //9、带主函数完整测试源码 //1、含邻接矩阵的图结构 用邻接矩阵来表示图： //定义邻接矩阵的图结构 typedef struct graph { elemtype data[N + 1];//存放顶点，不使用data[0]存放 int side[N + 1][N + 1];//邻接矩阵，同
数据结构--无向图的实现
qq_47700940的博客
10-10 298
【代码】数据结构--无向图的实现。
数据结构——无向图(邻接矩阵表示)
weixin_51144925的博客
02-09 2823
创建无向图(邻接表) 获取顶点在顶点表的位置 深度优先遍历(DFS) 广度优先遍历(BFS) /* 数据结构——无向图(邻接矩阵表示) */ #include<iostream> #include<queue> #define maxsize 100 using namespace std; typedef struct { char vex[maxsize]; int va[maxsize][maxsize]; }Graph; .
C语言数据结构：无向图连通子图
NI3E
12-15 3086
C语言图的数据结构上机作业。 求无向图的连通子图数目。
js实现dag有向无环图
11-23
以下是使用JavaScript和SVG实现Web前端WorkFlow工作流DAG有向无环图的步骤： 1. 首先，需要定义一个包含节点和边的数据结构，可以使用邻接表或邻接矩阵来表示。 2. 接下来，需要使用SVG来绘制节点和边。可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值