当前位置:首页 > JavaScript

map实现js

2026-02-01 00:09:41JavaScript

Map 实现(JavaScript)

在 JavaScript 中,Map 是一种键值对集合,允许任何类型的值(包括对象)作为键,并保留插入顺序。以下是 Map 的基本实现方法及常见操作。

创建 Map

使用 new Map() 构造函数创建一个空 Map,或通过传入一个可迭代对象(如数组)初始化 Map

const map1 = new Map(); // 空 Map
const map2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]); // 初始化 Map

添加键值对

使用 set(key, value) 方法向 Map 中添加键值对。

map1.set('name', 'Alice');
map1.set(42, 'Answer');
map1.set({ id: 1 }, 'Object Key');

获取值

通过 get(key) 方法根据键获取对应的值。若键不存在,返回 undefined

console.log(map1.get('name')); // 输出: 'Alice'
console.log(map1.get(42)); // 输出: 'Answer'

检查键是否存在

使用 has(key) 方法检查 Map 中是否包含指定键。

console.log(map1.has('name')); // 输出: true
console.log(map1.has('unknown')); // 输出: false

删除键值对

通过 delete(key) 方法删除指定键的键值对。返回 true 表示删除成功,false 表示键不存在。

map1.delete('name'); // 返回 true
map1.delete('unknown'); // 返回 false

清空 Map

使用 clear() 方法移除所有键值对。

map1.clear(); // Map 变为空

获取 Map 大小

通过 size 属性获取 Map 中键值对的数量。

console.log(map2.size); // 输出: 2

遍历 Map

Map 支持多种遍历方式:

  • keys():返回键的迭代器。
  • values():返回值的迭代器。
  • entries():返回键值对的迭代器(默认迭代行为)。
  • forEach(callback):遍历键值对并执行回调函数。
// 使用 for...of 遍历
for (const [key, value] of map2) {
  console.log(key, value);
}

// 使用 forEach
map2.forEach((value, key) => {
  console.log(key, value);
});

与 Object 的区别

  1. 键的类型Map 的键可以是任意类型(包括对象),而 Object 的键只能是字符串或 Symbol。
  2. 顺序Map 保留插入顺序,Object 的键顺序不固定。
  3. 性能:频繁增删键值对时,Map 性能更优。
  4. 大小Map 直接通过 size 获取,Object 需手动计算。

示例代码

const userMap = new Map();
userMap.set(1, { name: 'Alice', age: 25 });
userMap.set(2, { name: 'Bob', age: 30 });

console.log(userMap.get(1)); // { name: 'Alice', age: 25 }
console.log(userMap.size); // 2

userMap.forEach((user, id) => {
  console.log(`User ${id}: ${user.name}`);
});

通过 Map 可以高效管理键值对数据,尤其适合需要复杂键或频繁操作的场景。

map实现js

标签: mapjs
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Jav…

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现继承

js实现继承

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

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url,…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-contain…