JavaScript 数据类型——Map详解_Javascript

本文详细介绍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 }