当前位置：首页 > news >正文

JS Map使用方法

news 2025/5/14 6:55:20

JS Map使用方法

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

文章目录

JS Map使用方法
- 基本特性
- 基本用法
- - 创建 Map
  - 常用方法
  - 遍历方法
- 与 Object 的区别
- 实际应用示例
- - 示例1：统计字符出现次数
  - 示例2：缓存计算结果
  - 示例3：对象作为键
- 注意事项

基本特性

任意类型的键：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' }