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

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

news 来源：原创 2025/6/10 12:11:52

在 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]'）

重要特性

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