商丘网站制作报价信赖赛憬科技微信公众号功能模块

---

前言

JS里对于Map的简单介绍
Map 是一种用于存储键值对的数据结构（与传统对象（Object）类似）

---

一、Map

Map 是一种用于存储键值对的数据结构。它的主要特性包括：

1. 键值对存储：Map 存储的是一组键值对（key-value pairs）。每个键都是唯一的，与传统对象（Object）类似，但 Map 允许使用任何类型的值作为键，包括对象、函数、甚至是另一个 Map。

2. 保持插入顺序：Map 会按照键值对的插入顺序维护遍历的顺序。当你使用 forEach 或其他遍历方法时，键值对会按照插入的顺序返回。

3. 可变大小：Map 可以动态添加或删除键值对，可以使用 size 属性来获取当前键值对的数量。

4. 更好的性能：在频繁的插入、删除和查找操作时，Map 的性能通常优于普通的对象，特别是在处理大量数据时。

二、基本使用

1. 创建Map

可以通过 new Map() 来创建一个新的Map

// 创建空Map
const map1 = new Map();// 用数组初始化Map
const map2 = new Map([['name', 'Alice'],['age', 25]
]);// 使用对象作为键
const objKey = {id: 1};
const map3 = new Map();
map3.set(objKey, 'value for object');
console.log(map3); // Map(1) { { id: 1 } => 'value for object' }

2. 添加/修改元素

使用 set() 方法向Map中添加元素

map.set(key, value);  // 返回Map对象本身，支持链式调用

3. 获取元素

使用 get()方法获取Map中的元素

map.get(key);  // 返回与键关联的值，不存在则返回undefined

4. 检查元素

可以使用 has() 方法检查Map中是否包含特定元素

map.has(key);  // 返回布尔值，表示键是否存在

5. 删除元素

使用 delete() 方法从Map中删除键值对

mySet.delete(key); // 删除成功返回true，否则返回false

6. 清空Map

使用 clear() 方法可以移除集合中的所有元素

mySet.clear();
console.log(mySet); // Set {}

7. Map的大小

使用 size 属性可以获取Map中键值对的数量

const myMap = new Map([['name', 'Alice'],['age', 25]
]);
console.log(myMap .size); // 2

---

三、扩展使用

1. 遍历 Map

Map 提供了多种方法来遍历键值对：

1. keys(): 返回一个包含 Map 中所有键的迭代器。
2. values(): 返回一个包含 Map 中所有值的迭代器。
3. entries(): 返回一个包含 Map 中所有 [key, value] 对的迭代器。

可以用 forEach 方法遍历 Map：

myMap.forEach((value, key) => {console.log(`${key}: ${value}`);
});

keys() / values() / entries()：

// 遍历键
for (const key of map.keys()) {}// 遍历值
for (const value of map.values()) {}// 遍历键值对
for (const [key, value] of map.entries()) {}

直接使用for…of

for (const [key, value] of map) {}

---

2. Map与其它数据结构的转换

1. Map转数组

const arr = [...map];  // 或 Array.from(map)

2. 数组转Map

const map = new Map( [['a', 1], ['b', 2]] )

3. Map转对象

const obj = {};
for (const [key, value] of map) {obj[key] = value
}

4. 对象转Map

const map = new Map(Object.entries(obj))

3. Map的应用场景（含 Map的 特性 ）

1. ！！！需要使用任意类型的键时（这也是Map的特性）：当键需要是对象、函数等复杂类型时

2. ！！！频繁增删键值对：Map在增删操作上性能优于Object

3. ！！！需要保持插入顺序：如实现LRU缓存

4. 避免原型链污染：安全存储用户提供的键值

5. 大数据量存储：Map比Object占用更少内存

4. 性能比较（与Object相比较）

优：创建：Object比Map更快，内存占用更少
优：插入：Map比Object快，内存占用少约78%
优：删除：Map略快于Object

劣：查询：两者性能相近，Object略快
劣：在键为连续非负整数时，Object性能会显著优于Map

5. 注意事项！！！

1. 键的相等性：Map使用"SameValueZero"算法比较键，NaN与NaN视为相等

2. ！！！不要使用属性访问：map[‘key’] = value这种方式不会修改Map数据结构

3. JSON序列化：Map默认不支持JSON序列化，需要自定义转换

6. WeakMap

WeakMap是Map的弱引用版本，区别在于：

• 键必须是对象
• 键是弱引用，不会阻止垃圾回收
• 不可遍历，没有size属性
• 只有get、set、has、delete方法

const wm = new WeakMap();
const obj = {};
wm.set(obj, 'value');

四、总结

Map是JavaScript中强大的数据结构，在需要键值对存储且Object不能满足需求时，Map是更好的选择。