当前位置:首页 > JavaScript

js实现map

2026-03-14 00:44:23JavaScript

实现 Map 数据结构

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

使用 Object 模拟 Map

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

js实现map

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

js实现map

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

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

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

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

标签: jsmap
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 使用JavaScript实现拖拽功能需要监听鼠标事件,包括mousedown、mousemove和mouseup。以下是实现的基本逻辑: const draggableEleme…

js实现验证码

js实现验证码

实现验证码的JavaScript方法 生成随机验证码 使用Math.random()生成随机字符串,结合数字和字母: function generateCaptcha() { const cha…

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现日历

js实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前年…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js实现瀑布流

js实现瀑布流

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