当前位置:首页 > JavaScript

js实现 map

2026-04-06 19:48:25JavaScript

实现 Map 数据结构

在 JavaScript 中,可以通过对象或类来实现 Map 数据结构。以下是几种常见的实现方式:

使用对象实现简单 Map

const map = {};

// 添加键值对
map['key1'] = 'value1';
map['key2'] = 'value2';

// 获取值
console.log(map['key1']); // 输出: value1

// 删除键值对
delete map['key1'];

使用 ES6 的 Map 类

JavaScript 原生提供了 Map 类,功能更强大:

const map = new Map();

// 添加键值对
map.set('key1', 'value1');
map.set('key2', 'value2');

// 获取值
console.log(map.get('key1')); // 输出: value1

// 检查键是否存在
console.log(map.has('key1')); // 输出: true

// 删除键值对
map.delete('key1');

// 获取大小
console.log(map.size); // 输出: 1

// 清空Map
map.clear();

自定义 Map 类实现

如果需要自定义 Map 实现,可以创建一个类:

js实现 map

class MyMap {
  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;
  }

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

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

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

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

// 使用示例
const myMap = new MyMap();
myMap.set('a', 1);
console.log(myMap.get('a')); // 输出: 1

Map 与对象的区别

  1. Map 的键可以是任意类型,对象的键只能是字符串或 Symbol
  2. Map 保持插入顺序,对象不保证属性顺序
  3. Map 有 size 属性直接获取大小,对象需要手动计算
  4. Map 可直接迭代,对象需要先获取键数组
  5. Map 在频繁增删键值对时性能更好

使用场景建议

  • 需要键值对存储且键可能不是字符串时,使用 Map
  • 需要简单键值对且键为字符串时,可以使用对象
  • 需要保证插入顺序时,使用 Map
  • 需要频繁增删操作时,使用 Map

标签: jsmap
分享给朋友:

相关文章

js实现打印

js实现打印

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

js实现全屏

js实现全屏

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

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

js实现点击显示和隐藏

js实现点击显示和隐藏

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

js实现二叉树

js实现二叉树

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

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…