当前位置:首页 > 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 支持多种遍历方式:

map实现js

  • 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 可以高效管理键值对数据,尤其适合需要复杂键或频繁操作的场景。

标签: mapjs
分享给朋友:

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现倒计时

js实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js实现打印

js实现打印

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

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现防洪

js实现防洪

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