当前位置:首页 > JavaScript

js实现map

2026-03-14 00:44:23JavaScript

实现 Map 数据结构

在 JavaScript 中,Map 是一种键值对集合,允许任何类型的值作为键,并保持插入顺序。以下是几种实现方式:

使用 Object 模拟 Map

可以使用普通的 JavaScript 对象来模拟 Map 的基本功能,但需要注意对象键只能是字符串或 Symbol。

class SimpleMap {
  constructor() {
    this.items = {};
  }

  set(key, value) {
    this.items[key] = value;
  }

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

  has(key) {
    return key in this.items;
  }

  delete(key) {
    if (this.has(key)) {
      delete this.items[key];
      return true;
    }
    return false;
  }

  clear() {
    this.items = {};
  }

  size() {
    return Object.keys(this.items).length;
  }

  keys() {
    return Object.keys(this.items);
  }

  values() {
    return Object.values(this.items);
  }
}

使用 ES6 Map

ES6 原生提供了 Map 类,功能更完善:

const map = new Map();

map.set('key1', 'value1');
map.set('key2', 'value2');

console.log(map.get('key1')); // 'value1'
console.log(map.has('key2')); // true
console.log(map.size); // 2

map.delete('key1');
map.clear();

实现可迭代 Map

如果需要自定义可迭代的 Map,可以实现 Symbol.iterator

class IterableMap {
  constructor() {
    this.entries = [];
  }

  set(key, value) {
    const existing = this.entries.find(e => e.key === key);
    if (existing) {
      existing.value = value;
    } else {
      this.entries.push({ key, value });
    }
  }

  [Symbol.iterator]() {
    let index = 0;
    const entries = this.entries;

    return {
      next() {
        if (index < entries.length) {
          return { value: entries[index++], done: false };
        }
        return { done: true };
      }
    };
  }
}

性能优化版本

对于大型数据集,可以使用更高效的数据结构:

class OptimizedMap {
  constructor() {
    this.keys = [];
    this.values = [];
  }

  set(key, value) {
    const index = this.keys.indexOf(key);
    if (index >= 0) {
      this.values[index] = value;
    } else {
      this.keys.push(key);
      this.values.push(value);
    }
  }

  get(key) {
    const index = this.keys.indexOf(key);
    return index >= 0 ? this.values[index] : undefined;
  }
}

使用 WeakMap

如果需要弱引用特性,可以使用 WeakMap

js实现map

const weakMap = new WeakMap();
const objKey = {};

weakMap.set(objKey, 'private data');
console.log(weakMap.get(objKey)); // 'private data'

每种实现方式适用于不同场景,原生 Map 在大多数情况下是最佳选择,因为它提供了完整的 API 和良好的性能。

标签: jsmap
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…