树和堆：JavaScript 数据结构与算法之美

前端

2023-09-24 17:16:13

引言

在 JavaScript 的世界里，数据结构和算法是至关重要的内功。而树和堆作为非线性表的代表，更是前端程序员不可忽视的利器。本文将从树和堆的应用场景出发，深入探讨其数据结构的奥妙。

树

1. 简介

树是一种层次结构的数据结构，其基本单元称为节点。每个节点包含一个值，并可以指向多个子节点。树的层级关系明确，从根节点开始，向下延伸形成树形结构。

2. 应用场景

DOM 树： 用于表示网页的结构和内容
文件系统： 管理文件和文件夹的层次结构
决策树： 辅助决策和预测

3. 数据结构

class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
}

根节点： 树的起始节点，没有父节点
子节点： 具有相同父节点的节点
叶节点： 没有子节点的节点

堆

1. 简介

堆是一种特殊的完全二叉树，其满足如下性质：

完全二叉树： 每个层级都填满节点，除了最底层可能缺失部分节点
最大堆/最小堆： 每个父节点的值都大于/小于其子节点的值

2. 应用场景

优先队列： 按优先级处理任务或事件
排序： 堆排序是一种高效的排序算法
图论： 迪杰斯特拉算法中用于寻找最短路径

3. 数据结构

class Heap {
  constructor() {
    this.heap = [];
  }

  // 向堆中插入元素
  insert(value) {
    this.heap.push(value);
    this.bubbleUp(this.heap.length - 1);
  }

  // 移除堆顶元素
  remove() {
    if (this.heap.length === 0) {
      throw new Error("Heap is empty");
    }
    const root = this.heap[0];
    this.heap[0] = this.heap[this.heap.length - 1];
    this.heap.pop();
    this.bubbleDown(0);
    return root;
  }

  // 向上调整元素位置
  bubbleUp(index) {
    const parentIndex = Math.floor((index - 1) / 2);
    if (parentIndex >= 0 && this.heap[index] > this.heap[parentIndex]) {
      this.swap(index, parentIndex);
      this.bubbleUp(parentIndex);
    }
  }

  // 向下调整元素位置
  bubbleDown(index) {
    const leftChildIndex = 2 * index + 1;
    const rightChildIndex = 2 * index + 2;
    let largestChildIndex;
    if (leftChildIndex < this.heap.length && this.heap[leftChildIndex] > this.heap[index]) {
      largestChildIndex = leftChildIndex;
    } else {
      largestChildIndex = index;
    }
    if (rightChildIndex < this.heap.length && this.heap[rightChildIndex] > this.heap[largestChildIndex]) {
      largestChildIndex = rightChildIndex;
    }
    if (largestChildIndex !== index) {
      this.swap(index, largestChildIndex);
      this.bubbleDown(largestChildIndex);
    }
  }

  // 交换两个元素位置
  swap(index1, index2) {
    const temp = this.heap[index1];
    this.heap[index1] = this.heap[index2];
    this.heap[index2] = temp;
  }
}