当前位置:首页 > JavaScript

js 图线实现

2026-04-05 20:08:34JavaScript

在 JavaScript 中实现图(Graph)数据结构可以通过多种方式完成,以下是常见的实现方法:

邻接矩阵实现

邻接矩阵使用二维数组表示图的顶点和边。适用于稠密图或需要频繁查询边是否存在的情况。

class Graph {
  constructor(numVertices) {
    this.numVertices = numVertices;
    this.matrix = Array(numVertices).fill().map(() => Array(numVertices).fill(0));
  }

  addEdge(v, w) {
    this.matrix[v][w] = 1;
    this.matrix[w][v] = 1; // 无向图需要双向设置
  }

  hasEdge(v, w) {
    return this.matrix[v][w] === 1;
  }
}

邻接表实现

邻接表使用数组或哈希表存储每个顶点的相邻顶点。适用于稀疏图或需要高效遍历邻接节点的情况。

js 图线实现

class Graph {
  constructor() {
    this.adjList = new Map();
  }

  addVertex(v) {
    this.adjList.set(v, []);
  }

  addEdge(v, w) {
    this.adjList.get(v).push(w);
    this.adjList.get(w).push(v); // 无向图需要双向添加
  }
}

边列表实现

边列表直接存储所有边的信息。适用于需要频繁处理边的场景。

class Graph {
  constructor() {
    this.edges = [];
    this.vertices = new Set();
  }

  addEdge(v, w) {
    this.edges.push([v, w]);
    this.vertices.add(v);
    this.vertices.add(w);
  }
}

使用第三方库

对于复杂图操作,可以考虑使用专门库如:

js 图线实现

  • graphlib:提供多种图算法实现
  • cytoscape.js:专注图可视化的库
// 使用graphlib示例
const { Graph } = require('graphlib');
const g = new Graph();
g.setNode('a');
g.setNode('b');
g.setEdge('a', 'b');

性能比较

  1. 邻接矩阵:

    • 查询边是否存在:O(1)
    • 添加边:O(1)
    • 空间复杂度:O(V²)
  2. 邻接表:

    • 查询边是否存在:O(V)
    • 添加边:O(1)
    • 空间复杂度:O(V+E)
  3. 边列表:

    • 查询边是否存在:O(E)
    • 添加边:O(1)
    • 空间复杂度:O(E)

根据具体应用场景选择合适的数据结构,邻接表在大多数情况下是平衡的选择。

标签: js
分享给朋友:

相关文章

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 const…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <htm…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…