JavaScript 中图的实现

javascript 中图的实现

图是一种非线性数据结构,表示一组顶点(也称为节点)以及它们之间的关系(或边)。顶点表示实体或对象,而表示顶点之间的关系或连接。图可用于对许多不同类型的关系进行建模,例如社交网络、交通系统或信息流。

图有两种主要类型:有向图(也称为有向图)和无向图。在有向图中,边有一个方向,并且只能在一个方向上遍历,即从起始顶点到结束顶点。在无向图中,边没有方向,可以在两个方向上遍历。

JavaScript 中图的实现

图可以使用邻接矩阵或邻接列表来实现。在这里,我们将使用邻接列表在 JavaScript 中实现图形。

创建图表类

这里我们创建了图形类的蓝图。

立即学习“Java免费学习笔记(深入)”;

class Graph {   constructor() {      this.adjacencyList = {};   }}

添加顶点

该函数通过在 adjacencyList 对象中创建一个新键并将空数组作为其值来向图中添加一个新顶点(或节点)。新顶点将作为键,空数组将用于存储其邻居。

addVertex(vertex) {   if (!this.adjacencyList[vertex]) this.adjacencyList[vertex] = [];}

添加边缘

此函数在两个顶点之间添加一条新边。它接受两个参数:vertex1 和 vertex2,并将 vertex2 添加到 vertex1 的邻居数组中,反之亦然。这会在两个顶点之间创建连接。

addEdge(vertex1, vertex2) {   this.adjacencyList[vertex1].push(vertex2);   this.adjacencyList[vertex2].push(vertex1);}

打印图表

此函数将图表记录到控制台。它迭代 adjacencyList 对象中的每个顶点并记录该顶点及其邻居。

print() {   for (const [vertex, edges] of Object.entries(this.adjacencyList)) {      console.log(`${vertex} -> ${edges.join(", ")}`);   }}

示例

在下面的示例中,我们定义一个图并向该图添加顶点和边。最后打印图表。

class Graph {   constructor() {      this.adjacencyList = {};   }   addVertex(vertex) {      if (!this.adjacencyList[vertex]) this.adjacencyList[vertex] = [];   }   addEdge(vertex1, vertex2) {      this.adjacencyList[vertex1].push(vertex2);      this.adjacencyList[vertex2].push(vertex1);   }   print() {      for (const [vertex, edges] of Object.entries(this.adjacencyList)) {         console.log(`${vertex} -> ${edges.join(", ")}`);      }   }}const graph = new Graph();graph.addVertex("A");graph.addVertex("B");graph.addVertex("C");graph.addVertex("D");graph.addEdge("A", "B");graph.addEdge("A", "C");graph.addEdge("B", "D");graph.addEdge("C", "D");console.log("Graph:");graph.print();

输出

Graph:A -> B, CB -> A, DC -> A, DD -> B, C

删除边

此函数删除两个顶点之间的边。它接受两个参数:vertex1 和 vertex2,并从 vertex1 的邻居数组中过滤掉 vertex2,反之亦然。

ViiTor实时翻译 ViiTor实时翻译

AI实时多语言翻译专家!强大的语音识别、AR翻译功能。

ViiTor实时翻译 116 查看详情 ViiTor实时翻译

removeEdge(vertex1, vertex2) {   this.adjacencyList[vertex1] = this.adjacencyList[vertex1].filter(      (v) => v !== vertex2   );   this.adjacencyList[vertex2] = this.adjacencyList[vertex2].filter(      (v) => v !== vertex1   );}

删除顶点

该函数从图中删除一个顶点。它接受一个顶点参数,并首先删除连接到该顶点的所有边。然后,它从 adjacencyList 对象中删除该键。

removeVertex(vertex) {   while (this.adjacencyList[vertex].length) {      const adjacentVertex = this.adjacencyList[vertex].pop();      this.removeEdge(vertex, adjacentVertex);   }   delete this.adjacencyList[vertex];}

示例

在下面的示例中,我们定义一个图并添加顶点和边,然后打印该图。我们从图中删除一条边 AC,最后打印结果图。

class Graph {   constructor() {      this.adjacencyList = {};   }   addVertex(vertex) {      if (!this.adjacencyList[vertex]) this.adjacencyList[vertex] = [];   }   addEdge(vertex1, vertex2) {      this.adjacencyList[vertex1].push(vertex2);      this.adjacencyList[vertex2].push(vertex1);   }   removeEdge(vertex1, vertex2) {      this.adjacencyList[vertex1] = this.adjacencyList[vertex1].filter(         (v) => v !== vertex2      );      this.adjacencyList[vertex2] = this.adjacencyList[vertex2].filter(         (v) => v !== vertex1      );   }   removeVertex(vertex) {      while (this.adjacencyList[vertex].length) {         const adjacentVertex = this.adjacencyList[vertex].pop();         this.removeEdge(vertex, adjacentVertex);      }      delete this.adjacencyList[vertex];   }   print() {      for (const [vertex, edges] of Object.entries(this.adjacencyList)) {         console.log(`${vertex} -> ${edges.join(", ")}`);      }   }}const graph = new Graph();graph.addVertex("A");graph.addVertex("B");graph.addVertex("C");graph.addVertex("D");graph.addEdge("A", "B");graph.addEdge("A", "C");graph.addEdge("B", "D");graph.addEdge("C", "D");console.log("Initial Graph:");graph.print();console.log("Graph after removal of edge AC:")graph.removeEdge("A","C");graph.print();

输出

Initial Graph:A -> B, CB -> A, DC -> A, DD -> B, CGraph after removal of edge AC:A -> BB -> A, DC -> DD -> B, C

图的遍历方法

图遍历是指访问图的所有顶点(或节点)并处理与其关联的信息的过程。图遍历是图算法中的重要操作,用于查找两个节点之间的最短路径、检测环路、查找连通分量等任务。

图遍历主要有两种方法:广度优先搜索(BFS)和深度优先搜索(DFS)

A.广度优先搜索(BFS)

它是使用breadthFirstSearch()函数实现的。该函数实现广度优先搜索算法并采用 start 参数,即起始顶点。它使用队列来跟踪要访问的顶点,使用结果数组来存储访问过的顶点,并使用访问对象来跟踪已经访问过的顶点。该函数首先将起始顶点添加到队列中并将其标记为已访问。然后,当队列不为空时,它从队列中取出第一个顶点,将其添加到结果数组中,并将其标记为已访问。然后它将所有未访问的邻居添加到队列中。这个过程一直持续到所有顶点都被访问过,并且结果数组作为 BFS 的结果返回。

breadthFirstSearch(start) {   const queue = [start];   const result = [];   const visited = {};   let currentVertex;   visited[start] = true;   while (queue.length) {      currentVertex = queue.shift();      result.push(currentVertex);         this.adjacencyList[currentVertex].forEach((neighbor) => {            if (!visited[neighbor]) {               visited[neighbor] = true;               queue.push(neighbor);            }         });      }      return result;   }}

B。深度优先搜索

深度优先搜索方法通过使用以顶点作为参数的递归内部函数 dfs 来实现 DFS 算法。该函数使用访问的对象来跟踪访问的顶点,并将每个访问的顶点添加到结果数组中。该函数首先将当前顶点标记为已访问并将其添加到结果数组中。然后,它迭代当前顶点的所有邻居,并为每个未访问的邻居递归调用 dfs 函数。该过程一直持续到所有顶点都被访问过并且结果数组作为 DFS 的结果返回。

depthFirstSearch(start) {   const result = [];   const visited = {};   const adjacencyList = this.adjacencyList;   (function dfs(vertex) {      if (!vertex) return null;      visited[vertex] = true;      result.push(vertex);      adjacencyList[vertex].forEach(neighbor => {         if (!visited[neighbor]) {            return dfs(neighbor);         }      });   })(start);   return result;}

示例

在下面的示例中,我们演示了广度优先搜索(BFS)和深度优先搜索(DFS)。

class Graph {   constructor() {      this.adjacencyList = {};   }   addVertex(vertex) {      if (!this.adjacencyList[vertex]) this.adjacencyList[vertex] = [];   }   addEdge(vertex1, vertex2) {      this.adjacencyList[vertex1].push(vertex2);      this.adjacencyList[vertex2].push(vertex1);   }   print() {      for (const [vertex, edges] of Object.entries(this.adjacencyList)) {         console.log(`${vertex} -> ${edges.join(", ")}`);      }   }   breadthFirstSearch(start) {      const queue = [start];      const result = [];      const visited = {};      let currentVertex;      visited[start] = true;      while (queue.length) {         currentVertex = queue.shift();         result.push(currentVertex);         this.adjacencyList[currentVertex].forEach((neighbor) => {            if (!visited[neighbor]) {               visited[neighbor] = true;               queue.push(neighbor);            }         });      }      return result;   }   depthFirstSearch(start) {      const result = [];      const visited = {};      const adjacencyList = this.adjacencyList;      (function dfs(vertex) {         if (!vertex) return null;         visited[vertex] = true;         result.push(vertex);         adjacencyList[vertex].forEach(neighbor => {            if (!visited[neighbor]) {               return dfs(neighbor);            }         });      })(start);      return result;   }}const graph = new Graph();graph.addVertex("A");graph.addVertex("B");graph.addVertex("C");graph.addVertex("D");graph.addEdge("A", "B");graph.addEdge("A", "C");graph.addEdge("B", "D");graph.addEdge("C", "D");console.log("Initial Graph:");graph.print();console.log("BFS: "+graph.breadthFirstSearch('A'));console.log("DFS: "+graph.depthFirstSearch('A'));

输出

Initial Graph:A -> B, CB -> A, DC -> A, DD -> B, CBFS: A,B,C,DDFS: A,B,D,C

结论

图是一种有用的数据结构,可用于表示对象之间的关系和连接。在 JavaScript 中实现图可以使用多种技术来完成,包括使用邻接列表或邻接矩阵。本答案中演示的 Graph 类使用邻接列表表示形式,其中每个顶点都作为键存储在对象中,其相应的边作为该键的值存储在数组中。

Graph 类实现了向图形添加顶点和边、打印图形以及执行深度优先搜索和广度优先搜索遍历的方法。

以上就是JavaScript 中图的实现的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/529559.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月9日 09:47:27
下一篇 2025年11月9日 09:52:29

相关推荐

  • JavaScript中的空值合并运算符有哪些使用技巧?

    空值合并运算符(??)用于安全处理 null 和 undefined,仅在左侧为 null 或 undefined 时返回右侧默认值。1. 可安全设置默认值,保留 0、false、空字符串等有意义的假值,如 const count = userInput ?? 10;2. 避免与 falsy 值混淆…

    2025年12月5日
    100
  • 如何使用 CSS 使父容器内所有 DIV 横向排列且高度一致?

    如何使用 css 使父容器内所有 div 横向排列且高度一致 在 web 页面中,有时需要将父容器内的所有 div 横向排列,并保持相同的高度,而无需显式设置每个 div 的高度。这篇文章将介绍如何使用 css 实现这一效果,从而避免在内容增加时导致 div 高度不一致的问题。 解决方案 使用 fl…

    2025年12月3日 web前端
    100
  • 每个 UI 开发人员都应该知道的 Tailwind CSS Hacks

    简介:释放 tailwind css 的力量 嘿,ui 开发人员朋友们!您准备好将您的 tailwind css 技能提升到新的水平了吗?如果你点头,那你就大饱口福了。今天,我们将深入探讨 tailwind css 黑客世界,这不仅可以节省您的时间,还可以让您的编码体验更加愉快。 tailwind …

    2025年12月3日 web前端
    200
  • CSS 中 box-shadow 报错:为什么 rgb() 函数设置透明度会失效?

    css 中 box-shadow 设置阴影的报错分析 有网友反馈,在修改导航栏样式时,为其添加 box-shadow 阴影效果时一直部署报错,注释掉该行代码后错误消失,不禁疑惑究竟问题出在哪里。 根据提供的代码: header nav.navbar { height: 0px; //清除默认高度样式…

    2025年12月2日 web前端
    100
  • 如何将多个 SCSS 文件合并编译成一个 CSS 文件?

    如何将多个 scss 文件合并编译成一个 css 文件? 在 css 开发中,经常需要将多个 scss 文件合并成一个 css 文件,以方便不同页面间共享样式。有两种方法可以实现此目的: 方法一:在 scss 文件中导入 在其中一个 scss 文件中,使用 @import 语句导入所有要编译的 sc…

    2025年12月2日 web前端
    200
  • ElementUI 树节点点击后,子节点选中但复选框未打勾如何解决?

    elementui 树节点点击后,el-table子节点选中没有打勾 这个问题是在使用 elementui 树状表格组件时遇到的。当点击树的父节点时,相应的子节点可以正常选中,但子节点的复选框中没有打勾。 解决方案 主要解决方式是: SciMaster 全球首个通用型科研AI智能体 156 查看详情…

    2025年12月2日 web前端
    000
  • 切换版本后配置参数不显示,如何彻底清除缓存?

    如何彻底清除缓存 您提到切换版本后,由于存在缓存,配置参数未显示。以下为一些常见方法来有效清除缓存: 版本控制 添加时间戳或随机数参数:在资源 url 后添加时间戳或随机数参数,强制浏览器加载新 url,避免获取缓存中的资源。修改文件名称:将 css、js 文件和图像等资源的文件名称更改为新名称,使…

    2025年12月2日 web前端
    000
  • 如何让 “ 和 “ 仅通过图标触发展开和收起?

    如何控制 details、summary 的点击范围,只允许图标触发? 在使用 和 创建树形结构时,默认情况下点击整行都会触发展开或关闭。为了只允许点击行最前面的图标才能触发,需要进行一些自定义。 解决方案: 在 中添加一个额外的 元素,并在该元素上阻止默认行为。为展开图标的元素设置一个更高的层级,…

    2025年12月2日 web前端
    000
  • 如何使用 JavaScript 模拟 CSS sticky 效果?

    模拟 css 的 sticky 效果 在某些情况下,我们希望在页面上实现类似 css sticky 的效果,在页面向下滚动时,某些元素可以固定在页面顶部或底部。虽然 css 中的 sticky 属性可以实现此效果,但它并不适用于所有浏览器。可以通过 javascript 来模拟这种 sticky 效…

    2025年12月2日 web前端
    300
  • 如何使用Webpack打包非入口文件中的 Tailwind CSS 样式?

    配置webpack tailwindcss以打包非入口文件中的样式 为了将non-entry文件中的tailwindcss样式被打包到新的css文件,需要对webpack tailwindcss的配置进行修改。 在tailwind.config.js文件中,新增purge配置项,并添加需要被解析的文…

    2025年12月2日 web前端
    000
  • 如何用 CSS 实现图中所示的点线效果?

    如何用 CSS 实现图中的点线效果? 要实现图中所示的效果,可以按照以下步骤进行: 放置元素 首先,将元素水平排列并设置文本居中。这可以使用 text-align:center 属性来实现。 创建横线 最简单的创建横线的方法是使用上边框,但要注意第一个和最后一个元素的横线会缺一半。 科威旅游管理系统…

    2025年12月2日 web前端
    100
  • Ant Design Tooltip 三角型小箭头变方形的原因是什么?

    tooltip 三角型小箭头变为方形的原因 在使用 ant design 的 tooltip 组件时,当遇到 tooltip 中的三角小箭头变为方形的情况,原因可能是你不小心配置了一个 4px 的值作为 sizepopuparrow 属性,导致计算出错。 ant design 没有 8.4 版本,在…

    2025年12月2日 web前端
    000
  • H5 活动页面按钮如何固定在背景图上适配不同分辨率?

    活动页面按钮固定定位布局适配不同分辨率 在 h5 活动页面中,使用按钮作为页面元素,如何确保不同机型和分辨率下按钮始终固定在背景图上的指定位置? 解决方案 尽管尝试了 rem、百分比和 px 等单位,但这些方法可能无法在所有情况下都实现固定定位。为了解决这个难题,提出两种方法: 方法一:使用媒体查询…

    2025年12月2日 web前端
    000
  • 如何为合并行后的 el-table 实现悬停样式?

    el-table 合并行依旧保持悬停样式 针对 el-table 合并行时,无法为特定行提供悬停样式的问题,有两种实现方式: 效果一:选中某行后,高亮整个合并行 话袋AI笔记 话袋AI笔记, 像聊天一样随时随地记录每一个想法,打造属于你的个人知识库,成为你的外挂大脑 195 查看详情 使用 clas…

    2025年12月2日 web前端
    100
  • Vite 和 React 中,行内样式 backgroundImage 如何使用 @ 符号?

    vite 搭配 %ignore_a_1% 行内样式 backgroundimage 中使用 @ 符号 在 vite 和 react 中,行内样式中使用 backgroundimage 时,url() 中的路径通常会使用相对于当前模块的位置。为了将相对路径替换为使用 @ 符号的别名,需要使用一个额外的…

    2025年12月2日 web前端
    000
  • Vite+React:如何用@符号定义行内样式中的backgroundImage URL?

    vite+%ignore_a_1%:如何用@符号定义行内样式中的backgroundimage url 在react中,使用行内样式时,如何将backgroundimage url定义为@符号? 为了在vite中使用@符号定义backgroundimage url,需要使用require函数或imp…

    2025年12月2日 web前端
    100
  • 如何用 vue-color 构建交互式颜色渐变页面?

    如何让页面颜色渐变并支持交互? 对于此类页面效果的实现,我们可以借助于vue-color库来打造调色板功能,满足调色需求。 vue-color库 vue-color是一款vue.js颜色选择器和调色板,拥有丰富的功能: 立即学习“前端免费学习笔记(深入)”; 提供hsva、hsla、rgba和十六进…

    2025年12月2日 web前端
    000
  • 如何实现Win10 设置界面鼠标移动特效(探照灯效果)?

    探照灯效果:Win10 设置界面鼠标移动特效的实现 前端开发中,实现鼠标悬停时显示周边样式(探照灯效果),可以通过 CSS 或替代方法来完成。 使用 CSS CSS 中,可以使用 clip-path 属性创建一个圆形或椭圆形区域,并应用 transform 属性将其移动到鼠标位置。通过设置 poin…

    2025年12月2日 web前端
    200
  • 如何使用纯CSS绘制一个水滴形状?

    css绘制水滴形状 如何使用纯css绘制一个水滴形状? 解决方案 虽然可以调整border-radius属性来创建类似水滴的形状,但对于复杂的绘图,建议使用canvas或svg。 立即学习“前端免费学习笔记(深入)”; 纯css实现 话袋AI笔记 话袋AI笔记, 像聊天一样随时随地记录每一个想法,打…

    2025年12月2日 web前端
    200
  • 如何解决小红书模块中图片拉伸或裁剪问题?

    无拉伸、无裁剪图片显示解决方案 在制作类似小红书模块时,需要处理用户上传图片的尺寸差异,以避免拉伸或裁剪。 处理方法: 话袋AI笔记 话袋AI笔记, 像聊天一样随时随地记录每一个想法,打造属于你的个人知识库,成为你的外挂大脑 195 查看详情 设定容器尺寸:设定一个限定图像大小的容器,例:宽度500…

    2025年12月2日 web前端
    100

发表回复

登录后才能评论
关注微信