ES6 map的作用
ES6 引入了 Map 数据结构，它是一种键值对的集合，与传统的对象（Object）相比，Map 的键可以是任意类型的值（包括对象），而不仅仅是字符串或 Symbol。Map 提供了更强大的功能和更直观的 API，适用于需要复杂键值对的场景。
以下是 Map 的主要作用和应用场景：
- 键的类型更灵活
Map 的键可以是任意类型的值，包括对象、函数、基本类型等，而 Object 的键只能是字符串或 Symbol。
示例：
const map = new Map();
const key1 = { name: 'Alice' };
const key2 = function() {};
const key3 = 'key3';
map.set(key1, 'value1');
map.set(key2, 'value2');
map.set(key3, 'value3');
console.log(map.get(key1)); // value1
console.log(map.get(key2)); // value2
console.log(map.get(key3)); // value3
- 保持插入顺序
Map 会严格保持键值对的插入顺序，而 Object 的键顺序是不确定的。
示例：
const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
for (let [key, value] of map) {
console.log(key, value); // a 1, b 2, c 3
}
- 常用操作
Map 提供了一些常用的方法来操作键值对：
set(key, value)：添加或更新键值对。get(key)：获取指定键对应的值。has(key)：检查Map中是否包含某个键。delete(key)：删除指定键的键值对。clear()：清空Map中的所有键值对。size：获取Map中键值对的数量。
示例：
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.size); // 2
console.log(map.get('name')); // Alice
console.log(map.has('age')); // true
map.delete('age');
console.log(map.size); // 1
map.clear();
console.log(map.size); // 0
- 遍历 Map
Map 是可迭代的，可以使用 for...of 循环或 forEach 方法遍历其中的键值对。
示例：
const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
// 使用 for...of 遍历
for (let [key, value] of map) {
console.log(key, value); // a 1, b 2, c 3
}
// 使用 forEach 遍历
map.forEach((value, key) => {
console.log(key, value); // a 1, b 2, c 3
});
- 与对象的区别
| 特性 | Map | Object |
|---|---|---|
| 键的类型 | 任意类型（包括对象） | 字符串或 Symbol |
| 键的顺序 | 严格保持插入顺序 | 不确定 |
| 大小 | 通过size 属性获取 | 需要手动计算 |
| 性能 | 频繁增删键值对时性能更好 | 频繁增删键值对时性能较差 |
| 默认键 | 无默认键 | 有原型链上的默认键 |
- 应用场景
- 复杂键值对：当键需要是对象或其他复杂类型时，使用
Map。 - 保持顺序：当需要严格保持键值对的插入顺序时，使用
Map。 - 频繁增删：当需要频繁添加或删除键值对时，
Map的性能更好。 - 数据缓存：可以用
Map实现简单的缓存机制。
示例：数据缓存
const cache = new Map();
function getData(key) {
if (cache.has(key)) {
return cache.get(key);
}
const data = fetchDataFromServer(key); // 假设从服务器获取数据
cache.set(key, data);
return data;
}
- WeakMap
ES6 还引入了 WeakMap，它与 Map 类似，但有以下区别：
WeakMap的键必须是对象，不能是基本类型。WeakMap中的键是弱引用的，不会阻止垃圾回收。WeakMap不可遍历。
示例：
const weakMap = new WeakMap();
const obj = { name: 'Alice' };
weakMap.set(obj, 'value1');
console.log(weakMap.get(obj)); // value1
// 当 obj 被垃圾回收后，weakMap 中的键值对也会自动消失
- 与数组的转换
Map 可以轻松地与数组相互转换。
示例：
// 数组转 Map
const array = [['a', 1], ['b', 2], ['c', 3]];
const map = new Map(array);
console.log(map.get('a')); // 1
// Map 转数组
const newArray = [...map];
console.log(newArray); // [['a', 1], ['b', 2], ['c', 3]]
总结
Map 是 ES6 引入的一种强大的键值对集合，支持任意类型的键，并保持插入顺序。它比传统的 Object 更适合处理复杂键值对和频繁增删的场景。如果需要存储对象键并且不希望阻止垃圾回收，可以使用 WeakMap。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
