JavaScript常见数据结构 - 汇总

千度麒麟
0 阅读6分钟

1. 基本数据结构

数组 (Array)

const fruits = ['apple', 'banana', 'orange'];

特点：有序集合，索引访问，可包含不同类型元素

操作：push/pop/shift/unshift/slice/splice/map/filter/reduce等

应用场景：列表渲染、数据集合、队列/栈的实现

对象 (Object)

const person = {
  name: 'Alice',
  age: 25,
  isStudent: false
};

特点：键值对集合，无序，键必须是字符串或Symbol

操作：Object.keys/values/entries, 点表示法/方括号访问

应用场景：数据建模、配置对象、字典

Map

const map = new Map();
map.set('name', 'Bob');
map.set(1, 'number key');

核心特点：

  • 键值对集合：与对象类似，但键可以是任意类型（包括对象、函数等）。
  • 顺序保留：键的顺序与插入顺序一致。
  • 方法丰富：支持 size、get、set、has、delete 等方法。

常见用途：

  • 需要键为非字符串类型时（如对象作为键）。
  • 需要维护键的插入顺序时（如缓存实现）。
  • 替代对象作为哈希表（尤其是需要动态增删键值对时）。

Set

const set = new Set([1, 2, 3, 3, 4]); // [1, 2, 3, 4]

特点：值唯一，自动去重，快速查找

操作：add/delete/has/clear

应用场景：去重、集合运算、标签管理

2. 树形结构

DOM树

document.querySelector('div').children;

特点：节点包含父子关系，每个节点有parentNode/childNodes等属性

应用场景：页面渲染、DOM操作

虚拟DOM

const vNode = {
  tag: 'div',
  props: { id: 'app' },
  children: [
    { tag: 'span', props: {}, children: ['hello'] }
  ]
};

特点：轻量级JS对象表示，高效比对算法

应用场景：React/Vue等框架的核心

JSON树

// 二叉树
class TreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}
class BinaryTree {
  constructor() { this.root = null; }
  insert(value) {
    const newNode = new TreeNode(value);
    if (!this.root) { this.root = newNode; return; }
    let current = this.root;
    while (true) {
      if (value < current.value) {
        if (!current.left) { current.left = newNode; return; }
        current = current.left;
      } else {
        if (!current.right) { current.right = newNode; return; }
        current = current.right;
      }
    }
  }
}
const tree = new BinaryTree();
tree.insert(5);
tree.insert(3);

核心特点：

  • 层次结构：由节点组成，每个节点可以有多个子节点，但只有一个父节点（根节点除外）。
  • 常见类型：二叉树、二叉搜索树、平衡树（如 AVL 树、红黑树）等。
  • 高效操作：搜索、插入、删除等操作的时间复杂度通常为 O(log n)。

常见用途：

  • 表示 DOM 树或文件系统。
  • 实现搜索算法（如二叉搜索树）。
  • 数据库索引（如 B 树）。

3. 图结构

// 邻接表表示
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); // 无向图
  }
}
const graph = new Graph();
graph.addVertex('A');
graph.addVertex('B');
graph.addEdge('A', 'B');

状态依赖图

核心特点：

  • 节点和边：由节点（顶点）和边组成，用于表示对象之间的关系。
  • 类型：分为有向图和无向图。
  • 算法：常见操作包括遍历（DFS、BFS）、最短路径算法等。

常见用途：

  • 社交网络关系。
  • 路径规划（如导航系统）。
  • 依赖关系管理（如构建工具）。

路由图

4. 特殊用途结构

// React Router配置
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

应用场景：前端路由管理

栈 (Stack)

class Stack {
  constructor() { this.items = []; }
  push(item) { this.items.push(item); }
  pop() { return this.items.pop(); }
}
const stack = new Stack();
stack.push(1);
stack.push(2);
console.log(stack.pop()); // 输出: 2

核心特点：

  • 后进先出（LIFO） ：元素只能从栈顶插入或删除。
  • 操作受限：主要支持 push（入栈）、pop（出栈）、peek（查看栈顶）等操作。
  • 时间复杂度：所有操作均为 O(1)。

常见用途：

  • 函数调用栈（实现递归）。
  • 撤销操作（Undo）的实现。
  • 表达式求值（如括号匹配）。

应用场景：函数调用栈、撤销操作、路由历史

队列 (Queue)

// 用数组模拟
class Queue {
  constructor() { this.items = []; }
  enqueue(item) { this.items.push(item); }
  dequeue() { return this.items.shift(); }
}
const queue = new Queue();
queue.enqueue('A');
queue.enqueue('B');
console.log(queue.dequeue()); // 输出: 'A'

核心特点：

  • 先进先出（FIFO） ：元素从队尾插入，从队头删除。
  • 操作受限：主要支持 enqueue（入队）、dequeue（出队）、peek（查看队头）等操作。
  • 时间复杂度：所有操作均为 O(1)。

常见用途：

  • 任务调度（如消息队列）。
  • 广度优先搜索（BFS）。
  • 打印任务队列。

链表

// 单链表
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}
class LinkedList {
  constructor() { this.head = null; }
  append(value) {
    const newNode = new Node(value);
    if (!this.head) { this.head = newNode; return; }
    let current = this.head;
    while (current.next) { current = current.next; }
    current.next = newNode;
  }
}
const list = new LinkedList();
list.append(1);
list.append(2);

核心特点：

  • 节点组成：由一系列节点组成，每个节点包含数据和指向下一个节点的指针。
  • 动态插入/删除：在已知节点的情况下，插入和删除操作高效（O(1)）。
  • 随机访问低效：需要从头节点开始遍历（O(n)）。

常见用途：

  • 需要频繁插入和删除的场景（如动态数据管理）。
  • 实现栈、队列或图等数据结构的基础。

堆 (Heap)

堆是一种特殊的树形数据结构，具有完全二叉树的特性，广泛应用于计算机科学和前端开发中

核心特点：

完全二叉树结构：堆总是一棵完全二叉树，除了最后一层外，每一层都被完全填满，且节点尽可能向左对齐。

堆序性：堆分为大顶堆和小顶堆。在大顶堆中，父节点的值总是大于或等于其子节点的值；在小顶堆中，父节点的值总是小于或等于其子节点的值。

高效访问：堆顶元素（根节点）总是当前堆中的最大值（大顶堆）或最小值（小顶堆），可以在O(1)时间内访问。

存储方式

数组实现：堆通常使用数组来存储，通过计算父节点和子节点的索引来实现堆的操作。例如，若某节点在数组中的下标为i，则其左子节点的下标为2i+1，右子节点的下标为2i+2，父节点的下标为(i-1)/2。

常见操作

插入（Push） ：将新元素插入到堆的末尾，然后通过向上调整（Shift Up）来恢复堆序性。插入操作的时间复杂度为O(log n)。

删除堆顶（Pop） ：移除堆顶元素，将堆的最后一个元素移动到堆顶，然后通过向下调整（Shift Down）来恢复堆序性。删除操作的时间复杂度为O(log n)。

获取堆顶（Peek） ：直接返回堆顶元素，时间复杂度为O(1)。

应用场景

优先队列：堆是实现优先队列的常用数据结构，例如在任务调度、事件驱动等场景中，可以高效地获取优先级最高的任务。

堆排序：利用堆的特性，可以实现高效的堆排序算法，时间复杂度为O(n log n)。

Top K问题：在需要快速获取数据集中前K个最大或最小元素的场景中，堆是一种高效的解决方案。

中位数和百分位数统计：通过维护两个堆（一个大顶堆和一个小顶堆），可以高效地统计数据的中位数或百分位数。

优缺点

优点：堆的插入和删除操作高效，适合动态数据场景；堆顶元素可以快速访问，适合优先队列等场景。

缺点：堆的随机访问效率较低，不适合需要频繁随机访问的场景；堆的实现相对复杂，需要维护堆序性。

5. 类型化数组

TypedArray

const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);

特点：处理二进制数据，高性能

应用场景：WebGL、Canvas、音视频处理

avatar
文章
阅读
粉丝