JS Map使用方法

JS Map使用方法

Map 是 ES6 引入的一种新的数据结构，它类似于对象（Object），但提供了更强大的键值对存储功能。

基本特性

1. 任意类型的键：Map 的键可以是任意值（包括对象、函数等），而普通对象的键只能是字符串或 Symbol
2. 有序性：Map 会记住键的原始插入顺序
3. 大小可获取：可以直接通过 size 属性获取 Map 中的元素数量
4. 性能优化：在频繁增删键值对的场景下，Map 的性能通常优于普通对象

基本用法

创建 Map

// 创建一个空 Map
const map = new Map();

// 通过二维数组初始化 Map
const map2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

常用方法

遍历方法

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['job', 'Developer']
]);

// 1. for...of 遍历
for (const [key, value] of map) {
  console.log(key, value);
}

// 2. forEach 方法
map.forEach((value, key) => {
  console.log(key, value);
});

// 3. 获取键、值或键值对的迭代器
console.log([...map.keys()]);    // ['name', 'age', 'job']
console.log([...map.values()]);  // ['Alice', 25, 'Developer']
console.log([...map.entries()]); // 同直接遍历 map

与 Object 的区别

实际应用示例

示例1：统计字符出现次数

function countChars(str) {
  const map = new Map();
  for (const char of str) {
    map.set(char, (map.get(char) || 0) + 1);
  }
  return map;
}

const result = countChars('hello');
console.log(result.get('l')); // 2

示例2：缓存计算结果

const cache = new Map();

function factorial(n) {
  if (cache.has(n)) return cache.get(n);
  if (n === 0) return 1;
  const result = n * factorial(n - 1);
  cache.set(n, result);
  return result;
}

console.log(factorial(5)); // 120
console.log(cache); // Map { 1 => 1, 2 => 2, 3 => 6, 4 => 24, 5 => 120 }

示例3：对象作为键

const user1 = { id: 1, name: 'Alice' };
const user2 = { id: 2, name: 'Bob' };

const userSettings = new Map();
userSettings.set(user1, { theme: 'dark' });
userSettings.set(user2, { theme: 'light' });

console.log(userSettings.get(user1)); // { theme: 'dark' }

注意事项

1. 键的比较：Map 使用 “SameValueZero” 算法比较键（类似于 ===，但 NaN 等于 NaN）
2. 内存管理：如果使用对象作为键，即使对象被设为 null，Map 仍然会保留对它的引用
3. 序列化：Map 不能直接使用 JSON.stringify()，需要先转换为数组
   NaN 等于 NaN）
4. 内存管理：如果使用对象作为键，即使对象被设为 null，Map 仍然会保留对它的引用
5. 序列化：Map 不能直接使用 JSON.stringify()，需要先转换为数组
6. WeakMap：如果需要弱引用，可以使用 WeakMap，它只接受对象作为键且不可遍历