【前端】js Map集合的使用方法

在 JavaScript 中，Map 是一种用于存储键值对的数据结构。它比普通对象更灵活，因为它的键可以是任意数据类型（包括对象、函数等），且能记住键的原始插入顺序。以下是 Map 的详细使用方法：

---

1. 创建 Map

const map = new Map(); // 空Map
const mapWithValues = new Map([['key1', 'value1'],['key2', 'value2']
]); // 用二维数组初始化

---

2. 添加键值对：set(key, value)

map.set('name', 'Alice'); // 字符串键
map.set(42, 'The Answer'); // 数字键
map.set({ id: 1 }, 'Object Key'); // 对象键

---

3. 获取值：get(key)

console.log(map.get('name')); // 'Alice'
console.log(map.get(42)); // 'The Answer'
console.log(map.get('unknown')); // undefined（键不存在）

---

4. 检查键是否存在：has(key)

console.log(map.has('name')); // true
console.log(map.has('age')); // false

---

5. 删除键值对：delete(key)

map.delete('name'); // 删除成功返回 true
map.delete('invalid'); // 失败返回 false

---

6. 清空所有条目：clear()

map.clear(); // 清空整个Map

---

7. 获取元素数量：size 属性

console.log(map.size); // 当前条目数（非函数）

---

8. 遍历 Map

(1) forEach() 方法

map.forEach((value, key) => {console.log(key, value); // 值在前，键在后
});

(2) for...of 循环

for (const [key, value] of map) {console.log(key, value); // 直接解构键值对
}// 遍历键
for (const key of map.keys()) { /* ... */ }// 遍历值
for (const value of map.values()) { /* ... */ }// 遍历键值对
for (const entry of map.entries()) { /* ... */ }

---

9. 与其他数据结构的转换

Map → 数组

const arr = Array.from(map);
// 或
const arr2 = [...map]; // [ ['key1','val1'], ['key2','val2'] ]

对象 → Map

const obj = { a: 1, b: 2 };
const mapFromObj = new Map(Object.entries(obj));

Map → 对象

const mapToObj = Object.fromEntries(map);
// 注意：非字符串键会被转为字符串（如 '[object Object]'）

---

重要特性

1. 键可以是任意类型（包括 NaN、对象、函数），不会隐式转换成字符串。
2. 保持插入顺序，遍历时按插入先后返回。
3. 性能优化：频繁增删时比对象更高效。
4. 键的相等性：基于引用（对象）或值（基本类型），与 === 一致（但 NaN 被视为相等）。

---

示例代码

const userMap = new Map();
userMap.set('id', 1001);
userMap.set({ name: 'Bob' }, 'VIP User');console.log(userMap.size); // 2// 遍历
userMap.forEach((val, key) => {console.log(`${typeof key}: ${key} => ${val}`);
});
// 输出:
//   string: id => 1001
//   object: [object Object] => VIP User// 转换到数组
console.log([...userMap]); 
// [ ['id', 1001], [{name:'Bob'}, 'VIP User'] ]

---

使用场景

• 需要键不是字符串/符号
• 需要严格保持插入顺序
• 频繁增删键值对（性能更优）
• 需要额外方法（如直接获取长度 size）

通过灵活运用 Map，可以更高效地处理复杂键值映射关系！