JavaScript 图

TypeScript方式实现源码

// 图的遍历算法
// 算  法         数据结构     描  述
// 深度优先搜索    栈          通过将顶点存入栈中,顶点是沿着路径被探索的,存在新的相
// 邻顶点就去访问
// 广度优先搜索    队列        通过将顶点存入队列中,最先入队列的顶点先被探索
// 当要标注已经访问过的顶点时,我们用三种颜色来反映它们的状态。
// ? 白色:表示该顶点还没有被访问。
// ? 灰色:表示该顶点被访问过,但并未被探索过。
// ? 黑色:表示该顶点被访问过且被完全探索过。
// 广度优先搜索算法会从指定的第一个顶点开始遍历图, 先访问其所有的相邻点, 就像一次访
// 问图的一层

  1 class Graph {
  2     vertices = [];
  3     adjList = new Dictionary();
  4     public addVertex(v) {
  5         this.vertices.push(v);
  6         this.adjList.set(v, []);
  7     }
  8     public addEdge(v, w) {
  9         this.adjList.get(v).push(w);
 10         this.adjList.get(w).push(v);
 11     }
 12     public initializeColor() {
 13         let color = [], length = this.vertices.length;
 14         for (var i = 0; i < length; i++) {
 15             color[this.vertices[i]] = ‘white‘;
 16         }
 17         return color;
 18     }
 19     /**
 20      * 宽度优先搜索
 21      * @param v
 22      * @param callback
 23      */
 24     public bfs(v, callback) {
 25         let color = this.initializeColor(),
 26             queue = new Queue();
 27         queue.enqueue(v);
 28         while (!queue.isEmpty()) {
 29             let u = queue.dequeue(),
 30                 neighbors = this.adjList.get(u);
 31             color[u] = ‘grey‘;
 32             for (let i = 0; i < neighbors.length; i++) {
 33                 let w = neighbors[i];
 34                 if (color[w] === ‘white‘) {
 35                     color[w] = ‘grey‘;
 36                     queue.enqueue(w);
 37                 }
 38             }
 39             color[u] = ‘black‘;
 40             if (callback) {
 41                 callback(u);
 42             }
 43         }
 44     }
 45     /**
 46      * 寻找最短路径
 47      * @param v
 48      */
 49     public BFS(v) {
 50         let color = this.initializeColor(),
 51             queue = new Queue(),
 52             d = [],
 53             pred = [];
 54         queue.enqueue(v);
 55         for (var i = 0; i < this.vertices.length; i++) {
 56             d[this.vertices[i]] = 0;
 57             pred[this.vertices[i]] = null;
 58         }
 59         while (!queue.isEmpty()) {
 60             let u = queue.dequeue(),
 61                 neighbors = this.adjList.get(u);
 62             color[u] = ‘grey‘;
 63             for (let i = 0; i < neighbors.length; i++) {
 64                 let w = neighbors[i];
 65                 if (color[w] === ‘white‘) {
 66                     color[w] = ‘grey‘;
 67                     d[w] = d[u] + 1;
 68                     pred[w] = u;
 69                     queue.enqueue(w);
 70                 }
 71             }
 72             color[u] = ‘black‘;
 73         }
 74         return {
 75             distances: d,
 76             predecessors: pred
 77         }
 78     }
 79     public toString() {
 80         let s = ‘‘;
 81         for (let i = 0; i < this.vertices.length; i++) {
 82             s += this.vertices[i] + ‘ -> ‘;
 83             let neighbors = this.adjList.get(this.vertices[i]);
 84             for (var j = 0; j < neighbors.length; j++) {
 85                 s += neighbors[j] + ‘ ‘;
 86             }
 87             s += ‘\n‘;
 88         }
 89         return s;
 90     }
 91 }
 92 var graph = new Graph();
 93 var myVertices = [‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘I‘]; //{7}
 94 for (var i = 0; i < myVertices.length; i++) { //{8}
 95     graph.addVertex(myVertices[i]);
 96 }
 97 graph.addEdge(‘A‘, ‘B‘); //{9}
 98 graph.addEdge(‘A‘, ‘C‘);
 99 graph.addEdge(‘A‘, ‘D‘);
100 graph.addEdge(‘C‘, ‘D‘);
101 graph.addEdge(‘C‘, ‘G‘);
102 graph.addEdge(‘D‘, ‘G‘);
103 graph.addEdge(‘D‘, ‘H‘);
104 graph.addEdge(‘B‘, ‘E‘);
105 graph.addEdge(‘B‘, ‘F‘);
106 graph.addEdge(‘E‘, ‘I‘);
107
108 console.log(graph.toString());
109
110 function printNode(value) {
111     console.log(‘Visited vertex:‘ + value);
112 }
113 graph.bfs(myVertices[0], printNode);
114
115 var shortestPathA = graph.BFS(myVertices[0]);
116 console.log(shortestPathA);

JavaScript方式实现源码

 1 var Graph = (function () {
 2     function Graph() {
 3         this.vertices = [];
 4         this.adjList = new Dictionary();
 5     }
 6     Graph.prototype.addVertex = function (v) {
 7         this.vertices.push(v);
 8         this.adjList.set(v, []);
 9     };
10     Graph.prototype.addEdge = function (v, w) {
11         this.adjList.get(v).push(w);
12         this.adjList.get(w).push(v);
13     };
14     Graph.prototype.initializeColor = function () {
15         var color = [], length = this.vertices.length;
16         for (var i = 0; i < length; i++) {
17             color[this.vertices[i]] = ‘white‘;
18         }
19         return color;
20     };
21     /**
22      * 宽度优先搜索
23      * @param v
24      * @param callback
25      */
26     Graph.prototype.bfs = function (v, callback) {
27         var color = this.initializeColor(), queue = new Queue();
28         queue.enqueue(v);
29         while (!queue.isEmpty()) {
30             var u = queue.dequeue(), neighbors = this.adjList.get(u);
31             color[u] = ‘grey‘;
32             for (var i_1 = 0; i_1 < neighbors.length; i_1++) {
33                 var w = neighbors[i_1];
34                 if (color[w] === ‘white‘) {
35                     color[w] = ‘grey‘;
36                     queue.enqueue(w);
37                 }
38             }
39             color[u] = ‘black‘;
40             if (callback) {
41                 callback(u);
42             }
43         }
44     };
45     /**
46      * 寻找最短路径
47      * @param v
48      */
49     Graph.prototype.BFS = function (v) {
50         var color = this.initializeColor(), queue = new Queue(), d = [], pred = [];
51         queue.enqueue(v);
52         for (var i = 0; i < this.vertices.length; i++) {
53             d[this.vertices[i]] = 0;
54             pred[this.vertices[i]] = null;
55         }
56         while (!queue.isEmpty()) {
57             var u = queue.dequeue(), neighbors = this.adjList.get(u);
58             color[u] = ‘grey‘;
59             for (var i_2 = 0; i_2 < neighbors.length; i_2++) {
60                 var w = neighbors[i_2];
61                 if (color[w] === ‘white‘) {
62                     color[w] = ‘grey‘;
63                     d[w] = d[u] + 1;
64                     pred[w] = u;
65                     queue.enqueue(w);
66                 }
67             }
68             color[u] = ‘black‘;
69         }
70         return {
71             distances: d,
72             predecessors: pred
73         };
74     };
75     Graph.prototype.toString = function () {
76         var s = ‘‘;
77         for (var i_3 = 0; i_3 < this.vertices.length; i_3++) {
78             s += this.vertices[i_3] + ‘ -> ‘;
79             var neighbors = this.adjList.get(this.vertices[i_3]);
80             for (var j = 0; j < neighbors.length; j++) {
81                 s += neighbors[j] + ‘ ‘;
82             }
83             s += ‘\n‘;
84         }
85         return s;
86     };
87     return Graph;
88 }());

时间: 2024-10-22 16:47:28

JavaScript 图的相关文章

使用JavaScript在项目前台开发的58种常用小技巧

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false"

tomcat+session

1. 复制以下jar包到两个tomcat的安装目录lib中:memcached-2.6.jarjavolution-5.5.1.jarmemcached-session-manager-1.8.2.jarmemcached-session-manager-tc7-1.8.2.jarmsm-javolution-serializer-1.8.2.jarkryo-1.04.jarmsm-kryo-serializer-1.8.2.jarmsm-xstream-serializer-1.8.2.jar

利用filter实时切换big5和gb2312,以及gb2312的简繁体

IEEE Spectrum 杂志发布了一年一度的编程语言排行榜,这也是他们发布的第四届编程语言 Top 榜. 据介绍,IEEE Spectrum 的排序是来自 10 个重要线上数据源的综合,例如 Stack Overflow.Twitter.Reddit.IEEE Xplore.GitHub.CareerBuilder 等,对 48 种语言进行排行. 与其他排行榜不同的是,IEEE Spectrum 可以让读者自己选择参数组合时的权重,得到不同的排序结果.考虑到典型的 Spectrum 读者需求

俑烟汲的诿樟透磺勒秤窗mvus

IEEE Spectrum 杂志发布了一年一度的编程语言排行榜,这也是他们发布的第四届编程语言 Top 榜. 据介绍,IEEE Spectrum 的排序是来自 10 个重要线上数据源的综合,例如 Stack Overflow.Twitter.Reddit.IEEE Xplore.GitHub.CareerBuilder 等,对 48 种语言进行排行. 与其他排行榜不同的是,IEEE Spectrum 可以让读者自己选择参数组合时的权重,得到不同的排序结果.考虑到典型的 Spectrum 读者需求

JavaScript思维学习导图

思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来,把主题关键词与图像.颜色等建立记忆链接,思维导图充分运用左右脑的机能,利用记忆.阅读.思维的规律,协助人们在科学与艺术.逻辑与想象之间平衡发展,从而开启人类大脑的无限潜能.思维导图因此具有人类思维的强大功能. JavaScript变量 JavaScript运算符 JavaScript数组 JavaScript流程语句

清除css、javascript及背景图在浏览器中的缓存

在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的下载次数,获得更好的用户体验. 然而在版本升级或做一些css.js等调整的时候,缓存导致用户无法显示更新后的样式,这是另人头头疼的问题.除非用户自行手动升级缓存,不过几乎所有用户不会为了正常访问这个网站而去手动清除缓存,因为用户根本不知道是不是缓存的问题,而归根结底,用户就是认为你的页面存在问题,不

跟着9张思维导图学习Javascript

学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小tips: 思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来,把主题关键词与图像.颜色等建立记忆链接,思维导图充分运用左右脑的机能,利用记忆.阅读.思维的规律,协助人们在科学与艺术.逻辑与想象之间平衡发展,从而开启人类

【转载】跟着9张思维导图学习JavaScript

原文:跟着9张思维导图学习JavaScript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 JavaScript相关的思维导图(非原创). 思维导图小tips: 思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来,把主题关键词与图像.颜色等建立记忆链接,思维导图充分运用左右脑的机能,利用记忆.阅读.思维的规律,协助人们在科

原生javascript轮播图!

<style> .box { width: 500px; height: 275px; position: relative; margin: 100px auto; } a { text-decoration: none; font-size: 28px; text-align: center; line-height: 80px; display: inline-block; width: 40px; color:#fff; background:rgba(0,0,0,0.6); posi