JavaScript中对于Map的简单介绍

前言

JS里对于Map的简单介绍

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

一、Map

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

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

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

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

• 更好的性能：在频繁的插入、删除和查找操作时，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 提供了多种方法来遍历键值对：

• keys(): 返回一个包含 Map 中所有键的迭代器。
• values(): 返回一个包含 Map 中所有值的迭代器。
• 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与其它数据结构的转换

• Map转数组

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

• 数组转Map

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

• Map转对象

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

• 对象转Map

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

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

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

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

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

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

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

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

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

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

5. 注意事项！！！

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

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

• 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是更好的选择。

到此这篇关于JavaScript中对于Map的文章就介绍到这了,更多相关JS Map简单介绍内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论