当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptMap与Set集合使用教程

JavaScriptMap与Set集合使用教程

2025-11-10 11:26:51 0浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript中Map与Set集合详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

Map和Set是ES6引入的集合类型，Map支持任意类型键值对并保持插入顺序，适合频繁增删和非字符串键场景；Set存储唯一值，自动去重，适用于去重、成员检查和集合运算；WeakMap和WeakSet使用弱引用避免内存泄漏，适用于DOM元数据存储和私有变量。

如何理解JavaScript中的Map与Set集合？

Map和Set是JavaScript中ES6引入的两种新的集合类型，它们提供了更灵活和高效的数据存储和操作方式。Map用于存储键值对，允许使用任何类型作为键，而Set则用于存储唯一值的集合。

Map和Set在处理特定类型的数据时，相比传统的对象和数组，具有显著的优势。

Map集合：更灵活的键值对存储

Map对象本质上就是一个键值对的集合，与对象（Object）类似，但Map的键可以是任何数据类型，包括对象、函数甚至NaN。这解决了传统对象只能使用字符串作为键的限制。

使用场景：

当你需要使用非字符串作为键时，Map是理想选择。例如，使用DOM元素作为键，存储与该元素相关的数据。
需要保持键值对的插入顺序时，Map会按照插入顺序迭代，而对象的属性遍历顺序是不确定的。
频繁增删键值对时，Map的性能通常优于对象，因为它针对此类操作进行了优化。

示例：

const myMap = new Map();
const objKey = { id: 1 };

myMap.set(objKey, "关联对象的数据");
myMap.set("字符串键", 123);
myMap.set(NaN, "这是一个NaN键");

console.log(myMap.get(objKey)); // 输出: 关联对象的数据
console.log(myMap.get("字符串键")); // 输出: 123
console.log(myMap.get(NaN)); // 输出: 这是一个NaN键
console.log(myMap.size); // 输出: 3

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

与Object的对比：

特性	Object	Map
键的类型	字符串或Symbol	任何数据类型
键的顺序	不确定	按照插入顺序
大小	手动计算	内置size属性
迭代	需手动获取键数组	直接迭代键值对
性能	增删操作较慢	增删操作优化

Set集合：高效的唯一值存储

Set对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。Set会自动去重，因此非常适合用于过滤数组中的重复元素。

使用场景：

需要存储一组唯一值，并快速检查某个值是否存在。
需要对数组进行去重操作。
需要进行集合运算，如并集、交集、差集等。

示例：

const mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(2); // 重复添加，不会生效
mySet.add("字符串");
mySet.add({ id: 1 });
mySet.add({ id: 1 }); // 不同的对象引用，会被视为不同的值

console.log(mySet.size); // 输出: 4
console.log(mySet.has(1)); // 输出: true
console.log(mySet.has({ id: 1 })); // 输出: false (因为是不同的对象引用)

mySet.forEach(value => {
  console.log(value);
});

// 数组去重
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]

Set的集合运算：

虽然Set本身没有直接提供并集、交集、差集等方法，但可以利用Set的特性和数组的扩展运算符来实现。

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);

// 并集
const union = new Set([...setA, ...setB]); // {1, 2, 3, 4}

// 交集
const intersection = new Set([...setA].filter(x => setB.has(x))); // {2, 3}

// 差集 (A - B)
const difference = new Set([...setA].filter(x => !setB.has(x))); // {1}

Map和Set的性能考量

Map和Set在设计上针对特定操作进行了优化，通常在以下情况下性能优于传统的对象和数组：

大量数据存储： 当需要存储大量数据时，Map和Set的查找、插入和删除操作通常比对象和数组更高效。
频繁增删操作： Map和Set在增删操作上的性能优势更加明显，因为它们使用了哈希表等数据结构。
唯一值存储： Set在存储唯一值时，可以避免手动去重，并提供快速的成员检查。

但是，在数据量较小或操作不频繁的情况下，对象和数组的性能可能与Map和Set相差不大。因此，在选择使用哪种数据结构时，需要根据具体的应用场景进行权衡。例如，如果仅仅需要存储少量键值对，并且键都是字符串，那么使用对象可能更简单方便。

WeakMap和WeakSet：弱引用集合

除了Map和Set，ES6还引入了WeakMap和WeakSet。它们与Map和Set类似，但具有以下关键区别：

弱引用： WeakMap和WeakSet中的键（WeakMap）或值（WeakSet）是弱引用。这意味着，如果没有其他强引用指向这些键或值，垃圾回收器可以回收它们，而不会阻止内存释放。
只能使用对象作为键（WeakMap）或值（WeakSet）： 这是因为只有对象才能作为弱引用，原始值会被自动装箱，导致每次访问都是不同的对象。
不可迭代： WeakMap和WeakSet不支持迭代，因此无法使用forEach、keys、values等方法。

使用场景：

存储DOM元素的元数据： 可以使用WeakMap将DOM元素作为键，存储与该元素相关的数据，而无需担心内存泄漏。当DOM元素被移除时，WeakMap中对应的数据也会被自动回收。
私有变量： 可以使用WeakMap在对象中存储私有变量，防止外部访问。

示例：

const weakMap = new WeakMap();
const element = document.getElementById('myElement');

weakMap.set(element, { data: '一些数据' });

// 当element从DOM中移除后，weakMap中对应的数据也会被自动回收

总结

Map和Set是JavaScript中非常有用的集合类型，它们提供了更灵活和高效的数据存储和操作方式。选择使用哪种数据结构，需要根据具体的应用场景进行权衡。理解Map、Set、WeakMap和WeakSet的区别和适用场景，可以帮助你编写更高效、更健壮的JavaScript代码。它们不是银弹，但绝对是工具箱中不可或缺的工具。

今天关于《JavaScriptMap与Set集合使用教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于map,set,WeakMap,WeakSet,集合类型的内容请关注golang学习网公众号！

map set WeakMap WeakSet 集合类型