JavaScript 中 Map 的完整解析

Map 是 ES6 新增的键值对集合类型，专门用于解决普通对象（{}）作为键值存储的痛点（比如键只能是字符串 / 符号、无法直接获取长度等）。

1. 核心特性

2. 基础用法

1. 创建 Map

1// 方式1：创建空 Map
2const map1 = new Map();
3
4// 方式2：初始化带键值对（传入二维数组，每一项是 [键, 值]）
5const map2 = new Map([
6  [1, '数字1'],        // 数字键
7  ['name', '张三'],    // 字符串键
8  [true, '布尔值'],    // 布尔键
9  [{id: 1}, '对象键'], // 对象键（普通对象做不到！）
10  [() => {}, '函数键'] // 函数键
11]);
12
13console.log(map2.size); // 输出 5（获取键值对数量）

2. 新增 / 修改键值对（set）

set(键, 值)：若键已存在则修改值，不存在则新增，返回 Map 本身（可链式调用）。

1const map = new Map();
2map.set('age', 20); // 新增
3map.set('age', 21); // 修改（覆盖原有值）
4map.set('name', '李四').set('gender', '男'); // 链式调用
5
6console.log(map.get('age')); // 输出 21
7console.log(map.get('name')); // 输出 李四

3. 获取值（get）

get(键)：返回对应值，若键不存在则返回 undefined。

1const map = new Map([['name', '张三']]);
2console.log(map.get('name')); // 张三
3console.log(map.get('age'));  // undefined

4. 检查键是否存在（has）

has(键)：返回布尔值（true/false）。

1const map = new Map([['name', '张三']]);
2console.log(map.has('name')); // true
3console.log(map.has('age'));  // false

5. 删除键值对（delete）

delete(键)：删除指定键，成功返回 true，失败（键不存在）返回 false。

1const map = new Map([['name', '张三'], ['age', 20]]);
2map.delete('age'); // true
3console.log(map.size); // 1
4console.log(map.delete('gender')); // false（键不存在）

6. 清空所有键值对（clear）

1const map = new Map([['name', '张三']]);
2map.clear();
3console.log(map.size); // 0

3. 遍历 Map（重点！）

Map 支持多种遍历方式，且遍历顺序永远等于插入顺序：

（1）forEach 遍历（最常用）

1const map = new Map([['name', '张三'], ['age', 20]]);
2// forEach(值, 键, 原Map)
3map.forEach((value, key) => {
4  console.log(`键：${key}，值：${value}`);
5});
6// 输出：
7// 键：name，值：张三
8// 键：age，值：20

（2）for...of 遍历

1const map = new Map([['name', '张三'], ['age', 20]]);
2
3// 方式1：遍历 [键, 值] 对
4for (const [key, value] of map) {
5  console.log(key, value); // name 张三 → age 20
6}
7
8// 方式2：只遍历键（map.keys()）
9for (const key of map.keys()) {
10  console.log(key); // name → age
11}
12
13// 方式3：只遍历值（map.values()）
14for (const value of map.values()) {
15  console.log(value); // 张三 → 20
16}

4. Map 与普通对象（{}）的核心区别

《JavaScript 中 Map 的完整解析》 是转载文章，点击查看原文。