JavaScript中Map数据类型的深入剖析

JavaScript中Map数据类型的全面解析

本文对JavaScript中的高级数据类型Map进行详尽的讲解。

本文目录

• • • • 1. 基础运用
        * 2. 键的独特性
        * 3. 迭代方式
        * 4. 对象与Map的对比
        * 5. 常见操作
        * 6. 应用情境

1. 基础运用

// 创建空的Map
const mapInstance = new Map();

// 创建带有初始值的Map
const userInfoMap = new Map([
  ['name', 'name'],
  [42, 'Answer'],
  [Symbol('id'), 123]
]);

// 添加键值对
mapInstance.set('key1', 'value1');
mapInstance.set({ objKey: 1 }, 'object value'); // 键可以是对象

// 获取值
console.log(userInfoMap.get('name')); // 'name'
console.log(mapInstance.get({ objKey: 1 })); // undefined（引用不同）

// 检查键是否存在
console.log(userInfoMap.has(42)); // true

// 删除键值对
userInfoMap.delete('name');

// 获取大小
console.log(userInfoMap.size); // 2

// 清空Map
mapInstance.clear();

2. 键的独特性

Map采用SameValueZero算法来判断键是否重复（与Set一致）：

const mapExample = new Map();
mapExample.set(5, 'number five');
mapExample.set('5', 'string five'); // 允许，类型不同

const objOne = {};
const objTwo = {};
mapExample.set(objOne, 'obj1');
mapExample.set(objTwo, 'obj2'); // 允许，引用不同

console.log(mapExample.size); // 4

3. 迭代方式

Map保留插入顺序，并提供多种迭代途径：

const mapData = new Map([
  ['a', 1],
  ['b', 2]
]);

// 遍历键值对
for (const [key, value] of mapData) {
  console.log(key, value);
}

// 遍历键
for (const key of mapData.keys()) {
  console.log(key);
}

// 遍历值
for (const value of mapData.values()) {
  console.log(value);
}

// 使用forEach
mapData.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

4. 对象与Map的对比

5. 常见操作

// 1. 对象转Map
const objData = { a: 1, b: 2 };
const mapFromObj = new Map(Object.entries(objData));

// 2. Map转对象
const newObject = Object.fromEntries(mapFromObj); // ES2019+

// 3. 合并Map
const combinedMap = new Map([...mapOne, ...mapTwo]);

// 4. 复制Map
const clonedMap = new Map(mapFromObj);

// 5. 检查是否包含所有键
function containsAllKeys(mapInstance, keyList) {
  return keyList.every(key => mapInstance.has(key));
}

6. 应用情境

// 1. 缓存计算结果
const cacheStore = new Map();
function performCalculation(key) {
  if (cacheStore.has(key)) {
    return cacheStore.get(key);
  }
  const result = timeConsumingOperation(key);
  cacheStore.set(key, result);
  return result;
}

// 2. 事件注册表（键为元素，值为事件处理函数）
const eventRegistryMap = new Map();
const targetElement = document.getElementById('btn');
eventRegistryMap.set(targetElement, () => { /* 处理函数 */ });

// 3. 统计频率
const frequencyMapInstance = new Map();
['a', 'b', 'a', 'c'].forEach(item => {
  frequencyMapInstance.set(item, (frequencyMapInstance.get(item) || 0) + 1);
});
// 结果: Map { 'a' => 2, 'b' => 1, 'c' => 1 }