每日一练，图的DFS遍历

慢功夫2023-10-05 9:46

这篇文章用JS实现图的DFS遍历，也就是深度优先遍历

什么是深度优先遍历呢，这篇文章讲得很清楚（图文详解深度优先遍历 - 掘金），我就不赘述了。不过这篇文章讲的是树的深度游优先遍历，而不是图的。

但图的优先遍历和树的思想是一致的，就是不撞南墙不回头，它沿着一条路一直走下去，直到走不动了然后返回上一个岔路口选择另一条路继续前进，一直如此，直到走完所有能够到达的地方！它的名字中深度 两个字其实就说明了一切，每一次遍历都是走到最深。

这里有一段描述了图的深度优先遍历的过程，可以去看看：9.3 图的遍历 - Hello 算法

其他内容就不用看了，省得晕了

深度优先遍历的非递归版本

准备数据

首先准备一个邻接表数据，用来遍历用的。当然也可以用邻接矩阵，看个人意愿。

邻接表长这个样子：

用一个数组存下所有的顶点，每个数组中的项都有一个指针指向与该项连接的一条边。

像上图中的V0，它有一条边指向V3，所以在邻接表中，V0这一项就有一个指针指向V3。

如果一个顶点有两个与之相连的点，像V1，那么也是相类似的表示方式。

总的来说，数组中的每一项，每一项都代表一个点，如果该点可以通往另一个点，那么这一项就会有一个指针，这个指针会指向一条链表，这个链表上有所有与该点相连接的点。

下面会基于这个图来创建邻接表：

代码实现：

javascript 复制代码 
/**@typedef {{value: number, next: nodeType}} nodeType */

/**@type {nodeType[]} */
const graphNodes = Array(7)
	.fill(0)
	.map((item, index) => {
		const temp = {};
		temp.value = index;
		temp.next = null;
		return temp;
	});

const graphEdges = { 1: [2, 4], 2: [5], 3: [5, 6], 4: [2] };

const graph = Object.entries(graphEdges).map(([nodeKey, edges]) => {
	graphNodes[nodeKey].next = edges.reduce((res, nextEdge) => {
		const temp = { value: nextEdge, next: null };
		let tempRes = res;
		while (tempRes.next) tempRes = tempRes.next;
		tempRes.next = temp;
		return res;
	}, {}).next;
});

这段代码的主要目的是创建一个图数据结构，其中包括了节点和它们之间的连接关系。图的节点存储在 graphNodes 数组中，节点之间的边关系存储在 graphEdges 对象中，然后通过遍历 graphEdges 来构建图的结构。

首先声明一个名为 graphNodes 的数组，类型为 nodeType[]。这个数组用于存储图的节点，初始化长度为 7，数组的每一项都是包含 value 和 next 属性的对象。

这里使用 JSDoc 注释语法定义了一个类型别名 nodeType。它表示一个节点对象，包括一个数值属性 value 和一个指向下一个节点的引用属性 next。这个类型用于构建图数据结构。 关于JSDoc的用法可以看这篇文章如何在JavaScript项目中使用TypeScript的能力 - 掘金。不看也没关系，不影响本篇内容的阅读

然后使用graphNodes定义图的边关系。这个对象表示图中节点之间的边关系，以节点编号为key，value表示与该节点相邻的节点的数组。

其中{ 1 : [2, 4] },表示，与1直接相连的点有两个，分别是2和4。

最后就是将节点和边的关系组装起来了，代码很简单，不做解释。

最后将graphNodes打印出来：

javascript 复制代码 
console.log(graphNodes);

这里需要注意一个点，点的编号是从1开始的，所以数组中的0下标的位置只用作占位，不做任何作用。

实现DFS

javascript 复制代码 
/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * @param {number} baseNode - 基准节点，表示从该节点开始遍历
 * @returns {number|null} - 返回从基准节点开始的第一个未被访问的相邻节点的值，如果没有则返回 null
 * 
 * 这个函数用于获取从基准节点开始的第一个未被访问的相邻节点的值。
 */
const getFirstNode = (graph, baseNode) => {
  if (graph[baseNode].next === null) return null;
  return graph[baseNode].next.value;
};

/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * @param {number} baseNode - 基准节点，表示从该节点开始遍历
 * @param {number} currentNode - 当前节点，表示要查找下一个相邻节点的起始位置
 * @returns {number|null} - 返回从当前节点开始的下一个未被访问的相邻节点的值，如果没有则返回 null
 * 
 * 这个函数用于获取从当前节点开始的下一个未被访问的相邻节点的值。
 */
const getNextNode = (graph, baseNode, currentNode) => {
  let node = graph[baseNode].next;
  while (node.value !== currentNode) node = node.next;
  if (node.next === null) return null;
  return node.next.value;
};

/** 
 * 创建一个数组 isVisited，用于记录节点是否已被访问。
 * 初始状态下，所有节点都未被访问，所以数组的初始值为 false。
 */
const isVisited = Array(7).fill(false);

/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * @param {number} startNode - 起始节点，表示从该节点开始进行深度优先搜索
 * 
 * 这个函数实现了深度优先搜索（DFS）算法，用于从起始节点开始遍历图的节点。
 * 它使用递归方式进行遍历，并在访问每个节点时将其标记为已访问。
 */
const DFS = (graph, startNode) => {
  console.log(startNode); // 打印当前节点
  isVisited[startNode] = true; // 标记当前节点为已访问

  // 遍历当前节点的所有相邻节点
  for (let node = getFirstNode(graph, startNode); node !== null; node = getNextNode(graph, startNode, node)) {
    if (isVisited[node] === false) {
      // 如果相邻节点未被访问，则递归调用DFS函数继续遍历
      DFS(graph, node);
    }
  }
};

这段代码实现了深度优先搜索（DFS）算法，用于从指定的起始节点开始遍历图的节点。它使用递归方式进行遍历，并通过 isVisited 数组来标记已经访问过的节点，以避免重复访问。希望这些注释和解释有助于理解代码的目的和功能

这是递归版本的DFS，深度遍历的过程中，可能会遇到已经访问过的节点，这时候可以使用isVisited中的信息将其跳过。使用这种方法，可以完美破解环形遍历

测试：

javascript 复制代码 
DFS(graphNodes, 1);//	从1号节点开始访问
javascript 复制代码 
DFS(graphNodes, 3); // 从3号节点开始

可以看到，从不同的节点出发开始遍历，会得到不同的结果。并且都无法将所有节点遍历完成。所以想要遍历所有的节点，我们需要不止一次执行DFS。

举个更好理解的例子，现在往上面的图添加一个7号节点，这个7号节点不与任何点连接。像下面这样：

显而易见，我们只执行一次DFS，7号是遍历不到的。

优化：

javascript 复制代码 
/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * 
 * 这个函数实现了图的深度优先搜索（DFS）遍历。
 * 它遍历图中所有未被访问的节点，并在每次遍历中调用 DFS 函数来完成深度优先搜索。
 */
const TraverseDFS = (graph) => {
    for (let i = 1; i < isVisited.length; i++) {
        if (isVisited[i] === false) {
            // 如果节点未被访问，则调用 DFS 函数以从该节点开始深度优先搜索。
            DFS(graph, i);
        }
    }
};

这个函数遍历图中所有未被访问的节点，并在每次遍历中调用 DFS 函数来完成深度优先搜索。通过迭代所有未被访问的节点，它确保整个图中的每个节点都被遍历到。

即每次完成DFS，就会查找isVisited中是否还有没被访问的节点，如果有，就从这个节点开始新一轮的DFS

实现DFS，非递归版本

javascript 复制代码 
/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * @param {number} startNode - 起始节点，表示从该节点开始进行深度优先搜索
 * 
 * 这个函数实现了深度优先搜索（DFS）算法，使用栈数据结构进行迭代遍历图的节点。
 */
const DFS2 = (graph, startNode) => {
    // 创建一个栈用于迭代遍历图的节点。
    const stack = [];

    // 打印起始节点，并将其标记为已访问。
    console.log(startNode);
    isVisited[startNode] = true;

    // 将起始节点压入栈中。
    stack.push(startNode);

    // 当栈不为空时，继续迭代遍历图的节点。
    while (stack.length !== 0) {
        // 弹出栈顶的节点作为基准节点。
        const baseNode = stack.pop();

        // 获取基准节点的相邻节点。
        let node = graph[baseNode].next;

        // 遍历基准节点的相邻节点。
        for (; node !== null; node = node.next) {
            if (isVisited[node.value] !== true) {
                // 如果相邻节点未被访问，则标记为已访问，打印其值，并将其压入栈中。
                isVisited[node.value] = true;
                console.log(node.value);
                stack.push(node.value);
            }
        }
    }
};

非递归版本借用了栈来遍历，其实递归版本也借用了栈，只是不明显（递归就是天然的栈）。

这篇文章（9.3 图的遍历 - Hello 算法）中有DFS的非递归版本的图片演示，可以去看看，帮助理解代码

全部代码

下面是文中涉及到的完整代码，可以直接copy下面运行：

js 复制代码 
/**@typedef {{value: number, next: nodeType}} nodeType */

/**@type {nodeType[]} */
const graphNodes = Array(7)
	.fill(0)
	.map((item, index) => {
		const temp = {};
		temp.value = index;
		temp.next = null;
		return temp;
	});

const graphEdges = { 1: [2, 4], 2: [5], 3: [5, 6], 4: [2] };

const graph = Object.entries(graphEdges).map(([nodeKey, edges]) => {
	graphNodes[nodeKey].next = edges.reduce((res, nextEdge) => {
		const temp = { value: nextEdge, next: null };
		let tempRes = res;
		while (tempRes.next) tempRes = tempRes.next;
		tempRes.next = temp;
		return res;
	}, {}).next;
});

/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * @param {number} baseNode - 基准节点，表示从该节点开始遍历
 * @returns {number|null} - 返回从基准节点开始的第一个未被访问的相邻节点的值，如果没有则返回 null
 * 
 * 这个函数用于获取从基准节点开始的第一个未被访问的相邻节点的值。
 */
const getFirstNode = (graph, baseNode) => {
  if (graph[baseNode].next === null) return null;
  return graph[baseNode].next.value;
};

/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * @param {number} baseNode - 基准节点，表示从该节点开始遍历
 * @param {number} currentNode - 当前节点，表示要查找下一个相邻节点的起始位置
 * @returns {number|null} - 返回从当前节点开始的下一个未被访问的相邻节点的值，如果没有则返回 null
 * 
 * 这个函数用于获取从当前节点开始的下一个未被访问的相邻节点的值。
 */
const getNextNode = (graph, baseNode, currentNode) => {
  let node = graph[baseNode].next;
  while (node.value !== currentNode) node = node.next;
  if (node.next === null) return null;
  return node.next.value;
};

/** 
 * 创建一个数组 isVisited，用于记录节点是否已被访问。
 * 初始状态下，所有节点都未被访问，所以数组的初始值为 false。
 */
const isVisited = Array(7).fill(false);

/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * @param {number} startNode - 起始节点，表示从该节点开始进行深度优先搜索
 * 
 * 这个函数实现了深度优先搜索（DFS）算法，用于从起始节点开始遍历图的节点。
 * 它使用递归方式进行遍历，并在访问每个节点时将其标记为已访问。
 */
const DFS = (graph, startNode) => {
  console.log(startNode); // 打印当前节点
  isVisited[startNode] = true; // 标记当前节点为已访问

  // 遍历当前节点的所有相邻节点
  for (let node = getFirstNode(graph, startNode); node !== null; node = getNextNode(graph, startNode, node)) {
    if (isVisited[node] === false) {
      // 如果相邻节点未被访问，则递归调用DFS函数继续遍历
      DFS(graph, node);
    }
  }
};

// DFS(graphNodes, 1);
// DFS(graphNodes, 3);

/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * 
 * 这个函数实现了图的深度优先搜索（DFS）遍历。
 * 它遍历图中所有未被访问的节点，并在每次遍历中调用 DFS 函数来完成深度优先搜索。
 */
const TraverseDFS = (graph) => {
    for (let i = 1; i < isVisited.length; i++) {
        if (isVisited[i] === false) {
            // 如果节点未被访问，则调用 DFS 函数以从该节点开始深度优先搜索。
            DFS(graph, i);
        }
    }
};

TraverseDFS(graphNodes);

/** 
 * @param {nodeType[]} graph - 图数据结构，包含节点和连接关系
 * @param {number} startNode - 起始节点，表示从该节点开始进行深度优先搜索
 * 
 * 这个函数实现了深度优先搜索（DFS）算法，使用栈数据结构进行迭代遍历图的节点。
 */
const DFS2 = (graph, startNode) => {
    // 创建一个栈用于迭代遍历图的节点。
    const stack = [];

    // 打印起始节点，并将其标记为已访问。
    console.log(startNode);
    isVisited[startNode] = true;

    // 将起始节点压入栈中。
    stack.push(startNode);

    // 当栈不为空时，继续迭代遍历图的节点。
    while (stack.length !== 0) {
        // 弹出栈顶的节点作为基准节点。
        const baseNode = stack.pop();

        // 获取基准节点的相邻节点。
        let node = graph[baseNode].next;

        // 遍历基准节点的相邻节点。
        for (; node !== null; node = node.next) {
            if (isVisited[node.value] !== true) {
                // 如果相邻节点未被访问，则标记为已访问，打印其值，并将其压入栈中。
                isVisited[node.value] = true;
                console.log(node.value);
                stack.push(node.value);
            }
        }
    }
};

总结

这篇文章用JS代码，基于邻接表实现了DFS的递归遍历，和非递归版本的遍历。每个代码都有解释，应该是比较好理解。

文中涉及到的一般性的概念介绍，引用了其他文章中的解释。因为其他人解释的很好，我没必要再做一遍

相关推荐
X同学的开始1 小时前
数据结构之二叉树遍历
数据结构
limingade2 小时前
手机实时提取SIM卡打电话的信令和声音-新的篇章(一、可行的方案探讨)
物联网·算法·智能手机·数据分析·信息与通信
北岛寒沫3 小时前
JavaScript（JS）学习笔记 1（简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组）
javascript·笔记·学习
everyStudy3 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
AIAdvocate4 小时前
Pandas_数据结构详解
数据结构·python·pandas
无心使然云中漫步5 小时前
GIS OGC之WMTS地图服务，通过Capabilities XML描述文档，获取matrixIds，origin，计算resolutions
前端·javascript
jiao000015 小时前
数据结构——队列
c语言·数据结构·算法
Bug缔造者5 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
kaneki_lh5 小时前
数据结构 - 栈
数据结构
铁匠匠匠5 小时前
从零开始学数据结构系列之第六章《排序简介》
c语言·数据结构·经验分享·笔记·学习·开源·课程设计
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习