首页 > 网络编程 > JavaScript > javascript技巧 > JS Map使用方法

JavaScript中Map数据结构使用方法

2025-06-26 10:50:28 作者：大象吃香蕉

JavaScript中的Map是一种用于存储键值对的集合,它与传统的对象类似,但提供了更丰富的功能和灵活性,这篇文章主要介绍了JavaScript中Map数据结构使用方法的相关资料,需要的朋友可以参考下

JS Map使用方法

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

基本特性

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

基本用法

创建 Map

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

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

常用方法

方法	描述	示例
`set(key, value)`	添加或更新键值对	`map.set('name', 'Alice')`
`get(key)`	获取键对应的值	`map.get('name')` // ‘Alice’
`has(key)`	检查是否存在某个键	`map.has('name')` // true
`delete(key)`	删除指定键值对	`map.delete('name')`
`clear()`	清空所有键值对	`map.clear()`
`size`	获取键值对数量	`map.size`

遍历方法

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 的区别

特性	Map	Object
键的类型	任意值	只能是字符串或 Symbol
键的顺序	有序（插入顺序）	无序（ES6后也有序但不保证）
大小	`size` 属性	需要手动计算
性能	频繁增删时表现更好	频繁增删时性能较差
默认键	无	有原型链上的键
序列化	不能直接 JSON.stringify	可以直接序列化

实际应用示例

示例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' }

注意事项

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

总结

到此这篇关于JavaScript中Map数据结构使用方法的文章就介绍到这了,更多相关JS Map使用方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！