一、Map简介
Map是JavaScript中ES6新增的一种数据结构,用于存储键值对的集合。与Object类似,但是Map提供了更为灵活与强大的数据结构。
二、Map的基础用法
1. 创建Map实例
const map = new Map();
2. 添加键值对
map.set('name', 'Alice');
map.set('age', 28);
3. 获取键值对
map.get('name'); // 'Alice'
4. 检查键是否存在
map.has('name'); // true
5. 获取键值对数量
map.size; // 2
三、Map的高级用法
1. 可以使用任何类型作为键
除了undefined,可以使用任何类型的值作为键:
const map2 = new Map();
const key1 = {};
const key2 = {};
map2.set(key1, 'value1');
map2.set(key2, 'value2');
map2.get(key1); // 'value1'
这是Object无法做到的。
2. 链式调用
Map的set方法返回Map实例本身,因此可以使用链式调用:
map.set('name', 'Bob')
.set('age', 30);
3. 可以使用迭代器遍历Map
可以使用for...of语句遍历Map,或者使用forEach()方法遍历键值对:
for (const [key, value] of map) {
console.log(key, value);
}
map.forEach((value, key) => {
console.log(key, value);
});
4. 可以使用数组初始化Map
可以使用数组创建Map对象。数组的每一项应为一个键值对的数组:
const arr = [['name', 'Charlie'], ['age', 32]];
const map3 = new Map(arr);
5. 可以使用spread运算符初始化Map
可以使用spread运算符将一个Map转化为数组,或者将一个数组转化为Map:
// Map转化为数组
const map4 = new Map([['name', 'David'], ['age', 22]]);
const arr2 = [...map4];
// 数组转化为Map
const arr3 = [['name', 'Emma'], ['age', 25]];
const map5 = new Map(arr3);
四、Map的应用场景
由于Map可以使用任何类型作为键,因此在处理一些特殊的数据结构且需要设置其他类型的键时,Map更加方便。以下是一些Map常见的使用场景:
1. 存储函数的参数和返回值
const memoize = (fn) => {
const cache = new Map();
return (...args) => {
const key = JSON.stringify(args);
if (cache.has(key)) {
console.log('Cache hit!');
return cache.get(key);
}
console.log('Cache miss!');
const result = fn(...args);
cache.set(key, result);
return result;
}
};
const fibonacci = memoize((n) => {
if (n < 2) {
return n;
}
return fibonacci(n - 1) + fibonacci(n - 2);
});
fibonacci(10); // 第一次计算,输出Cache miss!,计算结果为55
fibonacci(10); // 第二次计算,输出Cache hit!,返回缓存中的结果55
2. 存储DOM元素的数据
当需要在DOM元素上存储数据时,使用Map比在元素上设置属性更安全。因为在某些情况下,属性的名字可能会被覆盖,而Map不会出现这个问题。
const map6 = new Map();
const button = document.querySelector('button');
map6.set(button, { count: 0 });
button.addEventListener('click', () => {
const data = map6.get(button);
data.count += 1;
console.log(`Button clicked ${data.count} times!`);
});
3. 存储异步操作的状态
Map可以容易存储异步操作的状态,并且保持键值对的顺序不变。以下是一个Map存储Promise对象的例子:
const map7 = new Map();
const p1 = new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 1 resolved!');
}, 1000);
});
const p2 = new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 2 resolved!');
}, 2000);
});
map7.set(p1, 1);
map7.set(p2, 2);
Promise.all([p1, p2]).then((values) => {
values.forEach((value) => {
console.log(map7.get(value));
});
});
// 输出为
// 1
// 2
五、总结
通过本篇文章,我们介绍了JavaScript中Map的基础用法和高级用法,学习了Map与Object的区别和应用场景。在日常的开发中,我们可以根据具体情况选择使用Map或者Object,以提高代码的效率和可读性。