Map和Set是ES6引入的数据结构，Map支持任意类型键、保持插入顺序且性能更优，适用于非字符串键或需高效增删的场景；Set确保值唯一，适合去重和高效查找。与对象相比，Map避免了键的隐式转换，提供更可靠的键值对管理；Set通过has()实现O(1)查找，远快于数组includes()。高级用法包括缓存计算结果、集合运算及关联元数据，但需注意对象键按引用比较、无法直接序列化等问题。（共498字符）
JavaScript中的Map和Set数据结构，说白了，就是为了弥补传统JavaScript对象和数组在某些特定场景下的不足而生的。它们提供了一种更灵活、更高效的方式来存储和管理数据，尤其是在处理键值对或需要存储唯一值时，它们能让你写出更清晰、更健壮的代码。
Map和Set是ES6引入的两种非常有用的数据结构，它们各自解决了传统JavaScript数据结构的一些痛点。
Map想象一下，你有一个普通的JavaScript对象，比如const obj = { 'name': 'Alice', 'age': 30 };。这里，name和age都是字符串键。但如果我想用一个DOM元素或者一个函数作为键呢？传统对象就不行了，它会把非字符串键自动转换为字符串。Map就是来解决这个问题的。
Map是一种键值对的集合，与对象类似，但它的“键”可以是任何数据类型——对象、函数、甚至其他Map实例。这赋予了它极大的灵活性。
核心特性：
立即学习“Java免费学习笔记（深入）”；
任意类型作键： 这是它与普通对象最显著的区别。保持插入顺序： Map会记住键值对的插入顺序，这在某些场景下非常有用，比如需要按特定顺序处理数据时。size属性： 可以直接获取Map中键值对的数量，而不用像对象那样Object.keys(obj).length。方法丰富： 提供了set(key, value)、get(key)、has(key)、delete(key)、clear()等直观的操作方法。可迭代： Map实例可以直接通过for...of循环进行迭代，获取[key, value]对。
SetSet则更简单直接，它是一个值的集合，里面的值都是唯一的。如果你有一个数组，想快速去除重复项，或者需要一个高效的方式来检查某个值是否存在于一个集合中，Set就是你的理想选择。
核心特性：
立即学习“Java免费学习笔记（深入）”；
值唯一性： 这是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)); // {}，或者在某些环境中是空数组
如果你需要将它们序列化，通常需要手动转换为数组或普通对象：
// 序列化Mapconst mapToArray = Array.from(myMap); // [['a', 1], ['b', 2]]const mapToObject = Object.fromEntries(myMap); // { a: 1, b: 2 } (如果键都是字符串)// 序列化Setconst 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可以作为有用的键或值，但如果你不了解，可能会感到困惑。
理解这些细节能让你更自如地运用Map和Set，避免一些常见的“坑”，并写出更健壮、更高效的JavaScript代码。
以上就是JavaScript中的Map和Set数据结构的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525462.html
微信扫一扫 
支付宝扫一扫 
