当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptMap和Set使用全解析

JavaScriptMap和Set使用全解析

2025-12-31 23:11:56 0浏览收藏

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JavaScript Map与Set数据结构详解》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

Map和Set是ES6引入的数据结构，Map支持任意类型键、保持插入顺序且性能更优，适用于非字符串键或需高效增删的场景；Set确保值唯一，适合去重和高效查找。与对象相比，Map避免了键的隐式转换，提供更可靠的键值对管理；Set通过has()实现O(1)查找，远快于数组includes()。高级用法包括缓存计算结果、集合运算及关联元数据，但需注意对象键按引用比较、无法直接序列化等问题。（共498字符）

JavaScript中的Map和Set数据结构

JavaScript中的Map和Set数据结构，说白了，就是为了弥补传统JavaScript对象和数组在某些特定场景下的不足而生的。它们提供了一种更灵活、更高效的方式来存储和管理数据，尤其是在处理键值对或需要存储唯一值时，它们能让你写出更清晰、更健壮的代码。

Map和Set是ES6引入的两种非常有用的数据结构，它们各自解决了传统JavaScript数据结构的一些痛点。

Map 想象一下，你有一个普通的JavaScript对象，比如const obj = { 'name': 'Alice', 'age': 30 };。这里，name和age都是字符串键。但如果我想用一个DOM元素或者一个函数作为键呢？传统对象就不行了，它会把非字符串键自动转换为字符串。Map就是来解决这个问题的。

Map是一种键值对的集合，与对象类似，但它的“键”可以是任何数据类型——对象、函数、甚至其他Map实例。这赋予了它极大的灵活性。

核心特性：

任意类型作键： 这是它与普通对象最显著的区别。
保持插入顺序： Map会记住键值对的插入顺序，这在某些场景下非常有用，比如需要按特定顺序处理数据时。
size属性： 可以直接获取Map中键值对的数量，而不用像对象那样Object.keys(obj).length。
方法丰富： 提供了set(key, value)、get(key)、has(key)、delete(key)、clear()等直观的操作方法。
可迭代： Map实例可以直接通过for...of循环进行迭代，获取[key, value]对。

SetSet则更简单直接，它是一个值的集合，里面的值都是唯一的。如果你有一个数组，想快速去除重复项，或者需要一个高效的方式来检查某个值是否存在于一个集合中，Set就是你的理想选择。

核心特性：

值唯一性： 这是Set最核心的特性。当你尝试添加一个已经存在的值时，Set会忽略它。
任意类型作值： 和Map的键一样，Set中的值也可以是任何数据类型。
保持插入顺序： Set也会记住值的插入顺序。
size属性： 直接获取Set中值的数量。
方法简洁： 提供了add(value)、has(value)、delete(value)、clear()等方法。
可迭代： Set实例同样可以直接通过for...of循环进行迭代，获取集合中的值。

Map与普通JavaScript对象有什么本质区别，我该如何选择？

要理解Map和普通JavaScript对象（{}）之间的区别，我们得从它们的底层机制和设计哲学看起。在我看来，最根本的区别在于它们如何处理“键”以及它们被设计用来解决的问题。

普通对象，本质上是字符串到值的映射。当你用一个非字符串类型（比如数字、布尔值、甚至是对象）作为键时，JavaScript引擎会悄悄地把它转换成字符串。比如，obj[1] = 'one' 和 obj['1'] = 'one' 最终都是以字符串 '1' 作为键。这种自动类型转换有时会带来意想不到的行为，尤其是在你期望用对象实例作为键来存储数据时，它就彻底失效了。

而Map则不然。它被设计成一个真正的“键值对”集合，它的键可以是任何JavaScript值——数字、布尔值、对象、函数，甚至是NaN。Map使用“SameValueZero”算法来比较键的相等性，这意味着NaN被认为是等于NaN的（这在普通对象中是做不到的，因为NaN === NaN是false）。更重要的是，它能正确地处理对象作为键的情况，每个对象实例都是一个独特的键，即使它们看起来内容相同。

选择指南：

当键的类型不确定，或者需要使用非字符串/Symbol类型作为键时，果断选择Map。 比如，你需要将数据关联到DOM元素，或者将某个函数的计算结果缓存起来，而缓存的键就是函数的参数对象。
当你需要保持键值对的插入顺序时，Map更可靠。 虽然现代JavaScript引擎已经普遍保证了普通对象字符串键的插入顺序，但Map在规范层面就明确了这一点，更具确定性。
当需要频繁添加和删除键值对时，Map的性能通常优于普通对象。 这是因为Map的内部实现针对这种操作进行了优化。
当你需要轻松获取集合大小（size属性）和直接迭代时，Map提供了更简洁的API。
如果你只是需要一个简单的配置对象，或者数据结构需要方便地进行JSON序列化（JSON.stringify()），那么普通对象依然是首选。 Map不能直接被JSON.stringify()序列化，需要手动转换。

Set在数组去重和高效查找方面有哪些优势？

Set在处理集合操作，特别是数组去重和高效查找方面，简直是“神器”级别的存在。它让这些原本可能需要几行甚至十几行代码才能完成的任务，变得异常简洁和高效。

数组去重： 这是Set最直观、最常用的一个场景。传统的数组去重方法，比如使用filter结合indexOf，或者嵌套循环，往往效率不高，代码也比较冗长。但有了Set，去重就变得异常简单：

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

const objects = [{id: 1}, {id: 2}, {id: 1}, {id: 3}];
// 注意：对于对象去重，Set默认是按引用去重，
// 所以这里会保留所有对象，因为它们是不同的引用。
const uniqueObjects = [...new Set(objects)];
console.log(uniqueObjects); // 输出: [{id: 1}, {id: 2}, {id: 1}, {id: 3}]

// 如果要根据对象的某个属性去重，需要一些额外的逻辑
const uniqueById = Array.from(new Map(objects.map(obj => [obj.id, obj])).values());
console.log(uniqueById); // 输出: [{id: 2}, {id: 1}, {id: 3}] (顺序可能因Map实现而异，这里保留最后出现的)

可以看到，对于基本数据类型，Set的去重能力是开箱即用的。对于复杂对象，虽然直接new Set()是按引用去重，但结合Map或其他逻辑，依然能实现基于属性的去重，而且通常比手动循环判断要简洁得多。

高效查找： 当你需要判断一个值是否存在于一个大型集合中时，Set的has()方法提供了极高的效率。

数组查找： array.includes(value)。在最坏情况下，它需要遍历整个数组，时间复杂度是O(n)。如果数组非常大，这个操作会变得很慢。
Set查找： set.has(value)。由于Set内部通常使用哈希表（或类似的结构）来实现，它的查找操作在平均情况下的时间复杂度是O(1)。这意味着无论Set有多大，查找一个值所需的时间几乎是恒定的。

示例：

const largeArray = Array.from({ length: 100000 }, (_, i) => i);
const largeSet = new Set(largeArray);

console.time('Array includes');
largeArray.includes(99999); // 查找最后一个元素
console.timeEnd('Array includes'); // 可能会是几毫秒

console.time('Set has');
largeSet.has(99999); // 查找最后一个元素
console.timeEnd('Set has'); // 通常是0.x毫秒，非常快

这种性能上的差异在处理大量数据时尤为明显。当你有一个白名单、黑名单或者需要快速判断某个ID是否已经存在时，将数据存储在Set中，然后使用has()进行查找，会比使用数组快得多。

Map和Set在实际开发中还有哪些高级用法或潜在陷阱？

Map和Set虽然强大，但在实际应用中，也有一些高级用法值得探索，以及一些可能让你“踩坑”的地方，需要我们提前了解。

高级用法：

Map作为缓存/Memoization： 当你的应用中有一些计算成本高昂的函数，并且这些函数在给定相同输入时总是返回相同的结果，你可以使用Map来缓存这些结果。

const cache = new Map();

function expensiveCalculation(param1, param2) {
    // 创建一个唯一的键，比如将参数拼接成字符串，或者直接用数组/对象作为键
    const key = JSON.stringify([param1, param2]); // 简单示例，复杂对象可能需要更精细的键生成
    if (cache.has(key)) {
        console.log('从缓存中获取结果');
        return cache.get(key);
    }

    console.log('执行昂贵计算...');
    const result = param1 * param2 * 1000; // 模拟耗时操作
    cache.set(key, result);
    return result;
}

expensiveCalculation(10, 20); // 执行计算并缓存
expensiveCalculation(10, 20); // 从缓存中获取
expensiveCalculation(5, 7);   // 执行计算并缓存

这种模式在React Hooks中的useMemo或Redux的reselect库中都有体现，核心思想就是避免不必要的重复计算。

Set实现数学集合操作： 虽然JavaScript的Set本身没有内置像Python那样丰富的集合操作方法（如并集、交集、差集），但我们可以很容易地用它来实现这些功能。

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

// 并集 (Union): 所有元素的集合
const union = new Set([...setA, ...setB]); // Set {1, 2, 3, 4, 5, 6}

// 交集 (Intersection): 两个集合共有的元素
const intersection = new Set([...setA].filter(x => setB.has(x))); // Set {3, 4}

// 差集 (Difference): 存在于A但不存在于B的元素
const difference = new Set([...setA].filter(x => !setB.has(x))); // Set {1, 2}

这让处理数据集合的关系变得异常简洁。

Map关联私有数据或元数据： 当你想给一个对象添加一些“私有”数据或元数据，但又不想直接修改该对象（比如它来自第三方库，或者你不想污染它的属性），Map就非常有用。你可以用对象实例本身作为键。
```
const element = document.getElementById('myDiv');
const elementData = new Map();

elementData.set(element, { clickCount: 0, lastAction: 'none' });

element.addEventListener('click', () => {
    const data = elementData.get(element);
    data.clickCount++;
    data.lastAction = 'clicked';
    console.log(`点击次数: ${data.clickCount}`);
});
```
这样，即使element对象被垃圾回收了，elementData中的对应条目也会因为键的引用消失而最终被回收（如果使用WeakMap会更彻底，但那是另一个话题了）。

潜在陷阱：

对象作为Map键或Set值时的引用问题：Map和Set在比较键或值时，使用的是“SameValueZero”算法。对于对象，这意味着它们是按引用进行比较的。
```
const map = new Map();
const obj1 = { id: 1 };
const obj2 = { id: 1 };

map.set(obj1, 'value1');
console.log(map.get(obj2)); // undefined，因为obj1和obj2是两个不同的对象引用

const set = new Set();
set.add(obj1);
set.add(obj2);
console.log(set.size); // 2，因为obj1和obj2是两个不同的对象
```
如果你期望的是基于对象内容进行比较（即“深比较”），那么Map和Set无法直接满足，你需要自己实现一个序列化键或自定义比较逻辑。

序列化问题：Map和Set实例不能直接被JSON.stringify()序列化。

const myMap = new Map([['a', 1], ['b', 2]]);
console.log(JSON.stringify(myMap)); // {}，或者在某些环境中是空数组，但不是你期望的键值对

const mySet = new Set([1, 2, 3]);
console.log(JSON.stringify(mySet)); // {}，或者在某些环境中是空数组

如果你需要将它们序列化，通常需要手动转换为数组或普通对象：

// 序列化Map
const mapToArray = Array.from(myMap); // [['a', 1], ['b', 2]]
const mapToObject = Object.fromEntries(myMap); // { a: 1, b: 2 } (如果键都是字符串)

// 序列化Set
const setToArray = Array.from(mySet); // [1, 2, 3]

反序列化时也需要进行相应的转换。

性能考量： 尽管Map和Set在特定场景下（如大规模数据查找、频繁增删）性能优越，但对于非常小的数据集，或者当你的操作模式更适合传统数组和对象时，它们引入的额外开销可能反而让性能略低于预期。总的来说，这通常不是一个大问题，但在极致优化时值得注意。
NaN的特殊性： 在Map的键和Set的值中，NaN被认为是相等的。
```
const mapWithNaN = new Map();
mapWithNaN.set(NaN, '这是一个NaN键');
console.log(mapWithNaN.get(NaN)); // '这是一个NaN键'

const setWithNaN = new Set();
setWithNaN.add(NaN);
setWithNaN.add(NaN);
console.log(setWithNaN.size); // 1
```
这与NaN === NaN为false的JavaScript常规行为不同，是SameValueZero算法的一个特点。这通常是好事，因为它让NaN可以作为有用的键或值，但如果你不了解，可能会感到困惑。