引言
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
,感谢您的关注~