首页 > 网络编程 > JavaScript > javascript技巧 > js数据类型map

JavaScript 数据类型Map的用法详解

2025-10-29 16:19:29 作者：1加1等于

本文通过实例代码给大家介绍JavaScript数据类型Map的用法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

本文详细介绍JavaScript高级数据类型Map的用法。

1. 基本用法

// 创建空Map
const map = new Map();
// 创建带初始值的Map
const userMap = new Map([
  ['name', 'name'],
  [42, 'Answer'],
  [Symbol('id'), 123]
]);
// 添加键值对
map.set('key1', 'value1');
map.set({ objKey: 1 }, 'object value'); // 键可以是对象
// 获取值
console.log(userMap.get('name')); // 'name'
console.log(map.get({ objKey: 1 })); // undefined（引用不同）
// 检查键是否存在
console.log(userMap.has(42)); // true
// 删除键值对
userMap.delete('name');
// 获取大小
console.log(userMap.size); // 2
// 清空Map
map.clear();

2. 键的唯一性

Map 使用 SameValueZero 算法判断键是否重复（与 Set 相同）：

const map = new Map();
map.set(5, 'number five');
map.set('5', 'string five'); // 允许，类型不同
const obj1 = {};
const obj2 = {};
map.set(obj1, 'obj1');
map.set(obj2, 'obj2'); // 允许，引用不同
console.log(map.size); // 4

3. 迭代方法

Map 保持插入顺序，并提供多种迭代方式：

const map = new Map([
  ['a', 1],
  ['b', 2]
]);
// 遍历键值对
for (const [key, value] of map) {
  console.log(key, value);
}
// 遍历键
for (const key of map.keys()) {
  console.log(key);
}
// 遍历值
for (const value of map.values()) {
  console.log(value);
}
// 使用forEach
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

4. 对象 vs Map

特性	对象 (Object)	Map
键的类型	字符串或 Symbol	任意类型（对象、函数等）
顺序性	不保证顺序（ES2015+ 字符串键按插入顺序，但非强制）	保持插入顺序
大小	需要手动计算（如 `Object.keys(obj).length`）	直接通过 `size` 属性获取
迭代	需要先获取键数组（如 `Object.keys()`）	直接支持 `for...of` 和 `forEach`
默认键	原型链上的键（如 `toString`）	无默认键
性能	大量键值对时操作效率较低	插入、删除、查找操作更高效

5. 常用操作

// 1. 对象转Map
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
// 2. Map转对象
const newObj = Object.fromEntries(map); // ES2019+
// 3. 合并Map
const mergedMap = new Map([...map1, ...map2]);
// 4. 复制Map
const cloneMap = new Map(map);
// 5. 检查是否包含所有键
function hasAllKeys(map, keys) {
  return keys.every(key => map.has(key));
}

6. 应用场景

// 1. 缓存计算结果
const cache = new Map();
function compute(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const result = expensiveOperation(key);
  cache.set(key, result);
  return result;
}
// 2. 事件注册表（键为元素，值为事件处理函数）
const eventRegistry = new Map();
const element = document.getElementById('btn');
eventRegistry.set(element, () => { /* 处理函数 */ });
// 3. 统计频率
const frequencyMap = new Map();
['a', 'b', 'a', 'c'].forEach(item => {
  frequencyMap.set(item, (frequencyMap.get(item) || 0) + 1);
});
// 结果: Map { 'a' => 2, 'b' => 1, 'c' => 1 }

补充：Object 和 Map 的比较

	Map	Object
意外的键	`Map` 默认情况不包含任何键。只包含显式插入的键	一个 `Object` 有一个原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突（备注：虽然可以用 `Object.create(null)`来创建一个没有原型的对象，但是这种用法不太常见）
键的类型	一个 `Map` 的键可以是任意值，包括函数、对象或任意基本类型	一个 `Object` 的键必须是一个 `String` 或是 `Symbol`
键的顺序	`Map` 中的键是有序的。因此，当迭代的时候，一个 `Map` 对象以插入的顺序返回键值	虽然 `Object` 的键目前是有序的，但并不总是这样，而且这个顺序是复杂的（因此，最好不要依赖属性的顺序）
Size	`Map` 的键值对个数可以轻易地通过 `size` 属性获取	`Object` 的键值对个数只能手动计算
迭代	`Map` 是可迭代的	`Object` 没有实现迭代协议，所以使用 JavaSctipt 的 `for...of]` 表达式并不能直接迭代对象（备注：对象可以实现迭代协议，或者你可以使用 `Object.keys` 、 `Object.entries` 或 `for...in`）
性能	在频繁增删键值对的场景下表现更好	在频繁添加和删除键值对的场景下未作出优化
序列化和解析	没有元素的序列化和解析的支持	由 `Object` 到 `JSON` 的序列化使用 `JSON.stringfy()`；由 `JSON` 到 `Object` 的解析使用 `JSON.parse()`

到此这篇关于JavaScript 数据类型——Map详解的文章就介绍到这了,更多相关js数据类型map内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！