javascript 图的遍历 BFS DFS

已于 2024-04-25 11:14:43 修改
阅读量1k 收藏 1
点赞数
分类专栏： data-structure javascript 文章标签： graph data-structure javascript
于 2018-09-09 17:33:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fareast_mzh/article/details/82560307
版权

BFS,DFS好文集锦

* javascript Dictionary 类 通过HashTable 分离链接法

javascript Dictionary 类 通过HashTable 分离链接法_dictionary.prototype.has-CSDN博客

* javascript queue 队列类

javascript queue 队列类_js 队列工具类-CSDN博客

* 图的遍历

 深度优先 + 广度优先

** 广度优先

当要标注已经访问过的顶点时,我们用三种颜色来反映它们的状态。

 白色:表示该顶点还没有被访问。
 灰色:表示该顶点被访问过,但并未被探索过。

 黑色:表示该顶点被访问过且被完全探索过。

以下是从顶点v开始的广度优先搜索算法所遵循的步骤。 

(1) 创建一个队列Q。
(2) 将v标注为被发现的(灰色),并将v入队列Q。
(3) 如果Q非空,则运行以下步骤: 

  (a) 将u从Q中出队列;
  (b) 将标注u为被发现的(灰色);
  (c) 将u所有未被访问过的邻点(白色)入队列; (d) 将u标注为已被探索的(黑色)。

** 深度优先

深度优先搜索算法不需要一个源顶点。在深度优先搜索算法中,若图中顶点v未访问,则访 问该顶点v。

要访问顶点v,照如下步骤做。

(1) 标注v为被发现的(灰色)。

(2) 对于v的所有未访问的邻点w:

    (a) 访问顶点w。

(3) 标注v为已被探索的(黑色)。

深度优先搜索的步骤是递归的,这意味着深度优先搜索算法使用栈来存储函数调 用(由递归调用所创建的栈)。

* ./Collection/Stack.js

/**
 * Created by Mch on 9/9/18.
 */
function Stack() {
    this.items = [];
}

Stack.prototype = {
    push: function(element) {
        this.items.push(element);
    },
    pop: function() {
        return this.items.pop();
    },
    peek: function() {
        return this.items[this.items.length-1];
    },
    isEmpty: function () {
        return this.items.length === 0;
    },
    size: function() {
        return this.items.length;
    },
    clear: function() {
        this.items = [];
    },
    print: function () {
        console.log(this.items.toString());
    }
};

exports.Stack = Stack;

* ./Collection/Graph.js

/**
 * Created by Mch on 9/2/18.
 */
var Dictionary = require('./Dictionary').Dictionary,
    Queue = require('./Queue').Queue,
    Stack = require('./Stack').Stack,
    Comparator = require('../utils/Comparator').Comparator;

function Graph() {
    this.vertices = [];
    // 邻接表由图中每个顶点的相邻顶 点列表所组成。
    this.adjList = new Dictionary(new Comparator(function(/* String */a, /* String */b) {
        return a.localeCompare(b);
    }));
    this.time = 0;
}

Graph.prototype = {
    addVertex: function(v) {
        this.vertices.push(v);
        this.adjList.set(v, []);
    },
    addEdge: function(v, w) {
        // 无向图
        this.adjList.get(v).push(w);
        this.adjList.get(w).push(v);
    },
    toString: function() {
        var s = '', g = this;
        this.vertices.forEach(function(v) {
            s += v + ' -> ';
            // neighbors
            g.adjList.get(v).forEach(function(n) {
                s += n + ' ';
            });
            s += '\n';
        });
        return s;
    },
    initializeColor: function() {
        var color = [];
        this.vertices.forEach(function(v) {
            color[v] = 'white';
        });
        return color;
    },
    /**
     * 广度优先搜索
     * @param v
     * @param callback
     */
    bfs: function(v, callback) {
        var color = this.initializeColor(),
            queue = new Queue();
        queue.enqueue(v);

        while (!queue.isEmpty()) {
            var u = queue.dequeue();
            color[u] = 'grey';
            /* neighbors */
            this.adjList.get(u).forEach(function(w) {
                if (color[w] === 'white') {
                    color[w] = 'grey';
                    queue.enqueue(w);
                }
            });
            color[u]= 'black';
            callback && callback(u);
        }
    },
    /**
     * 使用BFS寻找最短路径
     * @param v
     * @returns {{distances: Array, predecessors: Array}}
     *   从v到u的距离d[u]
     *   前溯点pred[u],用来推导出从v到其他每个顶点u的最短路径。
     * @constructor
     */
    BFS: function(v) {
        var color = this.initializeColor(),
            queue = new Queue(),
            d = [],   // 距离
            pred = []; // 前溯点
        queue.enqueue(v);

        this.vertices.forEach(function(v) {
            d[v] = 0;
            pred[v] = null;
        });
        while (!queue.isEmpty()) {
            var u = queue.dequeue();
            color[u] = 'grey';
            // neighbors
            this.adjList.get(u).forEach(function(w) {
                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
        }
    },
    dfs: function(callback) {
        var color = this.initializeColor(), g = this;
        this.vertices.forEach(function(v) {
            if (color[v] === 'white') {
                g.dfsVisit(v, color, callback);
            }
        });
    },
    dfsVisit: function(u, color, callback) {
        color[u] = 'grey';
        callback && callback(u);
        var g = this;
        // neighbors
        this.adjList.get(u).forEach(function(w) {
            if (color[w] === 'white') {
                g.dfsVisit(w, color, callback);
            }
        });
        color[u] = 'black';
    },
    DFS: function() {
        var color = this.initializeColor(),
            d = [],
            f = [],
            p = [],
            g = this;
        this.time = 0;

        this.vertices.forEach(function(v) {
            f[v] = 0;
            d[v] = 0;
            p[v] = null;
        });
        this.vertices.forEach(function(v) {
           if (color[v] === 'white') {
               g.DFSVisit(v, color, d, f, p);
           }
        });
        return {
            discovery: d,
            finished: f,
            processors: p
        }
    },
    DFSVisit: function(u, color, d, f, p) {
        console.log('discovered ' + u);
        color[u] = 'grey';
        d[u] = ++this.time;
        var g = this;
        /* neighbor */
        this.adjList.get(u).forEach(function(w) {
            if (color[w] === 'white') {
                p[w] = u;
                g.DFSVisit(w, color, d, f, p);
            }
        });
        color[u] = 'black';
        f[u] = ++this.time;
        console.log('explored ' + u);
    }
};

Graph.printNode = function(value) {
    console.log('visited vertex: ' + value);
};

exports.Graph = Graph;

* TestGraph.js

/**
 * Created by Mch on 9/2/18.
 */
var Graph = require('./Collection/Graph').Graph;

var graph = new Graph(),
    myVertices = ['A','B','C','D','E','F','G','H','I'];
myVertices.forEach(function(v) {
    graph.addVertex(v);
});

graph.addEdge('A', 'B'); //{9}
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], Graph.printNode);

var shortestPathA = graph.BFS(myVertices[0]);
console.log(shortestPathA);

console.log('--------------------------');
graph.dfs(Graph.printNode);

var result = graph.DFS();
console.log(result);

* run:

$ node TestGraph.js
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

visited vertex: A
visited vertex: B
visited vertex: C
visited vertex: D
visited vertex: E
visited vertex: F
visited vertex: G
visited vertex: H
visited vertex: I
{ distances: [ A: 0, B: 1, C: 1, D: 1, E: 2, F: 2, G: 2, H: 2, I: 3 ],
  predecessors:
   [ A: null,
     B: 'A',
     C: 'A',
     D: 'A',
     E: 'B',
     F: 'B',
     G: 'C',
     H: 'D',
     I: 'E' ] }
--------------------------
visited vertex: A
visited vertex: B
visited vertex: E
visited vertex: I
visited vertex: F
visited vertex: C
visited vertex: D
visited vertex: G
visited vertex: H
discovered A
discovered B
discovered E
discovered I
explored I
explored E
discovered F
explored F
explored B
discovered C
discovered D
discovered G
explored G
discovered H
explored H
explored D
explored C
explored A
{ discovery: [ A: 1, B: 2, C: 10, D: 11, E: 3, F: 7, G: 12, H: 14, I: 4 ],
  finished: [ A: 18, B: 9, C: 17, D: 16, E: 6, F: 8, G: 13, H: 15, I: 5 ],
  processors:
   [ A: null,
     B: 'A',
     C: 'A',
     D: 'C',
     E: 'B',
     F: 'B',
     G: 'D',
     H: 'D',
     I: 'E' ] }

fareast_mzh
关注
专栏目录
广告图片切换(js遍历文件夹)
01-07
主要实现根据日期和时间js循环读取文件夹里面的图片， 然后显示，有百叶窗，卷帘等效果
用js来实现那些数据结构16（图02-图的遍历）
weixin_34270606的博客
05-09 141
　　上一篇文章我们简单介绍了一下什么是图，以及用JS来实现一个可以添加顶点和边的图。按照惯例，任何数据结构都不可或缺的一个point就是遍历。也就是获取到数据结构中的所有元素。那么图当然也不例外。这篇文章我们就来看看如何遍历以及用js来实现图的遍历。 　　首先，有两种算法可以对图进行遍历：广度优先搜索（BFS）和深度优先搜索（DFS）。图的遍历可以用来寻...
JS数组遍历的方法和总结
最新发布
qq_53911056的博客
08-21 863
forEach和for...of循环主要用于遍历数组或可迭代对象的元素，执行一些简单的操作，如打印每个元素的值或对每个元素执行不返回新值的操作。它们适用于那些不需要基于遍历结果生成新数组或执行复杂计算的场景。而mapfilterreduce等方法则提供了更高级的数据处理能力。map方法用于将数组的每个元素通过指定的函数进行转换，并返回一个新数组。filter方法用于创建一个新数组，该数组包含通过所提供函数满足筛选的所有元素。reduce。
用js遍历list集合
热门推荐
童年的大柳树
11-16 4万+
用js语言去遍历list集合，并把遍历出来的对象的属性分别取值，并把属性值分别赋给input框。                                         success : function(data) {  debugger; for(var i=0;i var username = data[i].username; var pass =data[i].p
javascript之数据遍历
沐水莲心的博客
04-20 234
JavaScript之数据遍历 for循环 var a = ['沐水莲心','22','男'] for(var i=0; i<a.length;i++){ console.log(a[i]) } 2. forEach var a = ['沐水莲心','22','男'] a.forEach(x=>{ console.log(x) }) // 如果传入两个参数,第一个参数代表...
JS 遍历
DiJunXJ的博客
06-28 214
遍历数组 <script> var subject = ["Chinese","math","English","music"]; var text = ""; for(i = 0; i < subject.length; i++){ text += subject[i] + " "; } console.log(text); 遍历...
JavaScript中的深度优先遍历(DFS)和广度优先遍历(BFS)
01-08
在JavaScript中，深度优先遍历（DFS，Depth-First Search）和广度优先遍历（BFS，Breadth-First Search）是两种常见的图或树的遍历算法，广泛应用于数据结构和算法中，例如在游戏编程、图论问题解决、网页爬虫等领域...
BFS和DFS算法可视化（js实现）
01-17
**BFS（广度优先搜索）与DFS（深度优先搜索）是图论和树结构中常用的两种搜索算法，主要用于遍历或查找树或图。在本项目中，这两种算法通过JavaScript语言进行了可视化实现，旨在帮助学习者更好地理解和掌握这两种...
广度优先遍历BFS解析及应用场景
# 1. 导言 在计算机科学领域，数据结构和算法是两个至关重要的概念。数据结构简单地说就是数据的组织方式，而算法则是解决问题的方法和步骤。数据结构和算法的设计直接影响到程序的性能和效率，因此深入理解它们...
JavaScript树的深度优先遍历和广度优先遍历算法示例
10-18
两种常见的遍历方法是深度优先遍历（Depth-First Search, DFS）和广度优先遍历（Breadth-First Search, BFS）。在JavaScript中，我们可以使用递归或非递归的方法来实现这两种遍历。 1. **深度优先遍历**： 深度...
JavaScript实现树的遍历算法示例【广度优先与深度优先】
10-19
JavaScript遍历算法与技巧总结：除树的遍历之外，还包括图的遍历算法和一些特殊场景下的遍历技巧。 JavaScript查找算法技巧总结：讲解在JavaScript中如何实现各种查找算法，包括线性查找、二分查找等。 JavaScript...
js遍历
qq_42928070的博客
02-02 126
图的遍历---JavaScript
小羊的博客
06-29 870
两种算法可以对图进行遍历：广度优先 搜索（Breadth-First Search，BFS）和深度优先搜索（Depth-First Search，DFS）。图遍历可以用来 寻找特定的顶点或寻找两个顶点之间的路径，检查图是否连通，检查图是否含有环等。 首先需要了解一下图的遍历思想：图的遍历思想是必须追踪每一个访问的节点，并且追踪哪些节点还没有被完全探索，对于两种图的遍历算法，都需要明确指出第一个被...
JS中的遍历
qq_30898861的博客
08-13 778
数组遍历：使用for循环、forEachmapfilter和reduce方法。对象遍历：使用for...in循环、和方法。其他可迭代对象遍历：使用for...of循环。这些示例展示了如何在实际应用中遍历不同的数据结构，并给出了具体的输出结果。希望这些示例对您有所帮助！如果您有任何其他问题或需要更详细的解释，请随时提问。
js遍历数据
weixin_43627806的博客
02-28 583
** JS遍历对 象的总结 ** 1、使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {‘0’:‘a’,‘1’:‘b’,‘2’:‘c’}; Object.keys(obj).forEach(function(key){ console.log(key,’:’,obj[key]); }); 输出结果 0:a ...
JavaScript实现图结构和部分方法以及BFS，DFS的封装
qq_52868203的博客
07-17 139
1.先实现一个队列结构用于后面实现广度优先算法 class Queue{ constructor(){ this.items=[]; Queue.prototype.enqueue = function (element) { this.items.push(element) } Queue.prototype.dequeue = function () { return this.it
JavaScript DOM遍历详解：从入门到实战
3. **深度优先遍历（Depth-First Search, DFS）** 或 **广度优先遍历（Breadth-First Search, BFS）**：按照不同的策略递归地访问节点，如使用递归函数进行深度优先搜索，或使用队列实现广度优先搜索。 《实变函数...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fareast_mzh

打赏个金币

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值