引言
JavaScript 中的 Map 数据结构是一种特殊的键值对集合，它的键可以是任何类型的值（包括对象），且键值对的顺序是可以被保留的。相比传统的 Object，Map 提供了更加强大且灵活的数据存储和检索功能。
Map 对象创建
// 1.创建一个空的 Map 对象
let myMap = new Map();
// 2. 或者通过 new Map(iterable) 初始化，参数是键值对的数组或其他可迭代对象
let myMap = new Map([
['key1', 'value1'],
['key2', 'value2'],
[123, 'numericValue'],
[{objKey: true}, 'objectValue']
]);Map 方法
- set(key, value)： 向
Map对象添加或更新一个指定的键值对。
const myMap = new Map();
// 将一个新元素添加到 Map 对象
myMap.set("bar", "foo");
myMap.set(1, "foobar");
// 在 Map 对象中更新某个元素的值
myMap.set("bar", "baz");
// 链式添加元素
myMap.set("bar", "foo").set(1, "foobar").set(2, "baz");- get(key)： 获取与给定键关联的值。
const myMap = new Map();
myMap.set("bar", "foo");
console.log(myMap.get("bar")); // 返回 "foo"
console.log(myMap.get("baz")); // 返回 undefined
// 使用 get() 获取对对象的引用
const arr = [];
const myMap = new Map();
myMap.set("bar", arr);
myMap.get("bar").push("foo");
console.log(arr); // ["foo"]
console.log(myMap.get("bar")); // ["foo"]
- has(key)： 用于测试
Map对象中是否存在的元素的键。如果Map对象中存在具有指定键的元素，则返回true；否则返回false。
const myMap = new Map();
myMap.set("bar", "foo");
console.log(myMap.has("bar")); // true
console.log(myMap.has("baz")); // false
- delete(key)： 从该 map 中删除指定键的元素。如果 Map 对象中的元素存在并已被移除，则为 true；如果该元素不存在，则为 false。
const myMap = new Map();
myMap.set("bar", "foo");
console.log(myMap.delete("bar")); // 返回 true。成功地移除元素
console.log(myMap.has("bar")); // 返回 false。"bar" 元素将不再存在于 Map 实例中
- clear()： 移除该
map中的所有元素。
const myMap = new Map();
myMap.set("bar", "baz");
myMap.set(1, "foo");
console.log(myMap.size); // 2
console.log(myMap.has("bar")); // true
myMap.clear();
console.log(myMap.size); // 0
console.log(myMap.has("bar")); // false
- size： 访问器属性返回此
map中元素的数量。
const myMap = new Map();
myMap.set("a", "alpha");
myMap.set("b", "beta");
myMap.set("g", "gamma");
console.log(myMap.size); // 3
- forEach(callback[, thisArg])： 按插入顺序对该 map 中的每个键/值对执行一次提供的函数。
function logMapElements(value, key, map) {
console.log(`map.get('${key}') = ${value}`);
}
new Map([
["foo", 3],
["bar", {}],
["baz", undefined],
]).forEach(logMapElements);
// 打印：
// "map.get('foo') = 3"
// "map.get('bar') = [object Object]"
// "map.get('baz') = undefined"
- entries()： 返回一个新的
map迭代器对象，该对象包含了此map中的每个元素的[key, value]对，按插入顺序排列。
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");
const mapIter = myMap.entries();
console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]
- keys()： 返回一个新的 map 迭代器对象，该对象包含了此 map 中每个元素的键，按插入顺序排列。
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");
const mapIter = myMap.keys();
console.log(mapIter.next().value); // "0"
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // {}
- values()： 返回一个新的 map 迭代器对象，该对象包含此 map 中每个元素的值，按插入顺序排列。
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");
const mapIter = myMap.values();
console.log(mapIter.next().value); // "foo"
console.log(mapIter.next().value); // "bar"
console.log(mapIter.next().value); // "baz"
应用场景案例分析
- 场景一：对象属性的快捷查找
在处理大量对象，尤其是对象属性众多时，直接通过 . 或 [] 访问属性可能效率不高，特别是在多次查找同一属性时。此时可以使用 Map 存储对象的唯一标识符（如 ID）与对应属性值的映射关系。
// 假设有一个用户列表
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
// ...
];
// 使用 Map 存储用户名
const userNameMap = new Map();
users.forEach(user => userNameMap.set(user.id, user.name));
// 快速查找用户名称
console.log(userNameMap.get(1)); // 输出 'Alice'- 场景二：事件监听器管理
在实现自定义事件系统时，可以用 Map 存储事件类型和对应的处理函数列表，以便于添加和移除事件监听器。
class EventBus {
constructor() {
this.eventListeners = new Map();
}
on(eventType, listener) {
if (!this.eventListeners.has(eventType)) {
this.eventListeners.set(eventType, []);
}
this.eventListeners.get(eventType).push(listener);
}
off(eventType, listener) {
const listeners = this.eventListeners.get(eventType);
if (listeners) {
this.eventListeners.set(
eventType,
listeners.filter(l => l !== listener)
);
}
}
emit(eventType, eventData) {
const listeners = this.eventListeners.get(eventType);
if (listeners) {
listeners.forEach(listener => listener(eventData));
}
}
}
// 使用示例
const bus = new EventBus();
bus.on('message', (data) => console.log(`Received message: ${data}`));
bus.emit('message', 'Hello World!');- 场景三：关联数据存储
在处理复杂的业务逻辑时，有时候需要将不同类型的数据关联起来。Map 可以用来存储这种关联关系。
const employeeProjects = new Map();
employeeProjects.set(employee1, [projectA, projectB]);
employeeProjects.set(employee2, [projectC, projectD]);
// 查找员工参与的项目
console.log(employeeProjects.get(employee1)); // 输出 [projectA, projectB]- 场景四：缓存
在需要临时存储数据且不关心数据何时被垃圾回收时，可以使用 Map 作为简单的缓存结构。
const cache = new Map();
function fetchExpensiveData(id) {
let data = cache.get(id);
if (data) {
return Promise.resolve(data);
} else {
return fetchDataFromServer(id)
.then(data => {
cache.set(id, data);
return data;
});
}
}
// 缓存远程获取的数据以减少服务器请求次数
fetchExpensiveData('some-id').then(handleData);- 场景五：通用去重（适用于简单类型和可哈希对象）
function removeDuplicates(arr) {
return Array.from(new Map(arr.map(item => [item, item])).values());
}
let arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 4, 5, 'a', 'a'];
let uniqueArray = removeDuplicates(arrayWithDuplicates);
console.log(uniqueArray); // 输出：[1, 2, 3, 4, 5, 'a']- 场景六：针对对象数组的去重（根据对象的某个或多个属性去重）
function removeDuplicatesByProperty(arr, property) {
const map = new Map();
return arr.filter(item => {
const key = item[property];
if (!map.has(key)) {
map.set(key, true);
return true;
}
return false;
});
}
let objectArrayWithDuplicates = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 2, name: 'Charlie' },
{ id: 3, name: 'Dave' },
];
let uniqueObjectsById = removeDuplicatesByProperty(objectArrayWithDuplicates, 'id');
console.log(uniqueObjectsById);
// 输出：[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Dave' }]写在最后
JavaScript 的 Map 数据结构在实际开发中有多种广泛的应用场景，它可以提供高效、灵活的数据存储和检索方案。尤其在需要存储和操作键值对数据时，Map 提供了优于原生对象（如 Object）的诸多优势。
喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~
程序员
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。