当前位置:首页 > JavaScript

js实现treemap

2026-04-06 15:45:20JavaScript

实现 TreeMap 的基本思路

TreeMap 是一种基于红黑树实现的有序映射结构,JavaScript 本身不提供原生 TreeMap,但可以通过对象或 Map 结合自定义排序逻辑模拟。

使用对象实现简单 TreeMap

通过对象存储键值对,并维护一个排序数组来保证键的顺序:

js实现treemap

class TreeMap {
  constructor() {
    this.items = {};
    this.sortedKeys = [];
  }

  set(key, value) {
    if (!(key in this.items)) {
      const index = this._findInsertIndex(key);
      this.sortedKeys.splice(index, 0, key);
    }
    this.items[key] = value;
  }

  get(key) {
    return this.items[key];
  }

  _findInsertIndex(key) {
    let low = 0;
    let high = this.sortedKeys.length;

    while (low < high) {
      const mid = Math.floor((low + high) / 2);
      if (this.sortedKeys[mid] < key) {
        low = mid + 1;
      } else {
        high = mid;
      }
    }
    return low;
  }
}

基于数组实现完整功能

更完整的实现包括遍历、删除等操作:

js实现treemap

class AdvancedTreeMap {
  constructor(comparator = (a, b) => a - b) {
    this.keys = [];
    this.values = [];
    this.comparator = comparator;
  }

  set(key, value) {
    const index = this._findIndex(key);
    if (index < this.keys.length && this.comparator(this.keys[index], key) === 0) {
      this.values[index] = value;
    } else {
      this.keys.splice(index, 0, key);
      this.values.splice(index, 0, value);
    }
  }

  get(key) {
    const index = this._findIndex(key);
    if (index < this.keys.length && this.comparator(this.keys[index], key) === 0) {
      return this.values[index];
    }
    return undefined;
  }

  _findIndex(key) {
    let low = 0;
    let high = this.keys.length;
    while (low < high) {
      const mid = Math.floor((low + high) / 2);
      if (this.comparator(this.keys[mid], key) < 0) {
        low = mid + 1;
      } else {
        high = mid;
      }
    }
    return low;
  }
}

使用 ECMAScript 6 的 Map

对于需要更复杂功能的场景,可以扩展 ES6 的 Map 类:

class TreeMap extends Map {
  constructor(iterable, comparator = (a, b) => a - b) {
    super();
    this.comparator = comparator;
    this._keys = [];
    if (iterable) {
      for (const [key, value] of iterable) {
        this.set(key, value);
      }
    }
  }

  set(key, value) {
    if (!this.has(key)) {
      const index = this._findIndex(key);
      this._keys.splice(index, 0, key);
    }
    super.set(key, value);
    return this;
  }

  _findIndex(key) {
    let low = 0;
    let high = this._keys.length;
    while (low < high) {
      const mid = Math.floor((low + high) / 2);
      if (this.comparator(this._keys[mid], key) < 0) {
        low = mid + 1;
      } else {
        high = mid;
      }
    }
    return low;
  }
}

性能优化建议

对于大型数据集,纯 JavaScript 实现的 TreeMap 性能可能不足。这种情况下可以考虑:

  • 使用 TypedArray 处理数值键
  • 采用更高效的数据结构如跳表(Skip List)
  • 对于生产环境,推荐使用专门的库如 bintreeststl

标签: jstreemap
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…