当前位置:首页 > JavaScript

js 实现 map

2026-03-13 19:16:15JavaScript

实现 Map 数据结构

在 JavaScript 中,可以通过对象或 ES6 的 Map 类来实现键值对存储。以下是几种实现方式:

使用 ES6 Map

ES6 引入了原生的 Map 类,支持任意类型的键值对存储:

js 实现 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
map.delete('key2');
console.log(map.size); // 输出: 1

使用普通对象模拟 Map

如果环境不支持 ES6,可以用普通对象模拟 Map 的功能:

js 实现 map

const map = {};
map['key1'] = 'value1';
map['key2'] = 'value2';

console.log(map['key1']); // 输出: value1
console.log('key2' in map); // 输出: true
delete map['key2'];
console.log(Object.keys(map).length); // 输出: 1

自定义 Map 类

可以封装一个简单的 Map 类,实现基本功能:

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

const map = new CustomMap();
map.set('a', 1);
console.log(map.get('a')); // 输出: 1

使用 WeakMap

如果需要键是对象且避免内存泄漏,可以使用 WeakMap

const weakMap = new WeakMap();
const keyObj = {};
weakMap.set(keyObj, 'private data');
console.log(weakMap.get(keyObj)); // 输出: private data

注意事项

  • ES6 Map 的键可以是任意类型,普通对象的键只能是字符串或 Symbol。
  • Map 维护插入顺序,普通对象不保证顺序。
  • WeakMap 的键必须是对象,且不可枚举。

以上方法可根据实际需求选择使用。ES6 Map 是推荐方式,功能最完善。

标签: jsmap
分享给朋友:

相关文章

js实现日历

js实现日历

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

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(func,…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现游标

js实现游标

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

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…