什么是JS的Map和Set？

map和Set是es6引入的高效数据结构，Map支持任意类型键、保持插入顺序且性能更优，适用于动态键值对存储；Set确保值唯一，常用于数组去重和快速查找。WeakMap与WeakSet通过弱引用避免内存泄漏，适合关联对象元数据。

JavaScript中的

Map

和

Set

，简单来说，它们是ES6引入的两种新的数据结构，用来解决传统JavaScript对象和数组在特定场景下的局限性。

Map

提供了一种更灵活的键值对存储方式，而

Set

则专注于存储独一无二的值。在我看来，它们是现代JS开发中提升代码可读性、效率和健壮性的利器。

解决方案

理解

Map

和

Set

，关键在于把握它们各自的核心能力。

Map：更强大的键值对集合

在ES6之前，我们通常会用普通JavaScript对象（

{}

）来模拟键值对存储，也就是所谓的“哈希表”或“字典”。但这玩意儿其实有不少限制，比如对象的键只能是字符串或symbol，如果你想用一个对象或者函数作为键，那就不行了，它会被隐式转换成字符串，导致意想不到的覆盖。而且，遍历对象的键值对，其顺序在ES2015之前也并非完全可靠。

Map

的出现，就是为了解决这些痛点。它是一个真正的键值对集合，它的强大之处在于：

• 键可以是任何数据类型：你可以用对象、函数、甚至其他

  Map

  实例作为键。这打开了非常多的可能性，比如你可以把dom元素作为键，来存储与该元素相关的特定数据，而不用在DOM元素上直接添加自定义属性。

• 保持插入顺序：

  Map

  会记住键值对的插入顺序，当你遍历

  Map

  时，会按照这个顺序来。这对于某些需要顺序敏感的场景非常有用。

• 性能优化：在频繁添加和删除键值对时，

  Map

  的性能通常比普通对象更好。

• 内置

  size

  属性：可以直接获取

  Map

  中元素的数量，而不用像对象那样需要

  Object.keys(obj).Length

  。

常用方法：

• new Map()

  : 创建一个空的Map。

• map.set(key, value)

  : 添加或更新一个键值对。

• map.get(key)

  : 获取指定键的值。

• map.has(key)

  : 检查Map中是否存在某个键。

• map.delete(key)

  : 删除指定键的键值对。

• map.clear()

  : 清空Map。

• map.size

  : 返回Map中键值对的数量。

const myMap = new Map();  const objKey = { id: 1 }; const funcKey = () => console.log('I am a key');  myMap.set('name', 'Alice'); myMap.set(objKey, '这是一个对象作为键的值'); myMap.set(funcKey, '这是一个函数作为键的值'); myMap.set(123, '数字键');  console.log(myMap.get('name')); // Alice console.log(myMap.get(objKey)); // 这是一个对象作为键的值 console.log(myMap.has('name')); // true console.log(myMap.size); // 4  myMap.delete(123); console.log(myMap.size); // 3  // 遍历Map for (const [key, value] of myMap) {     console.log(`${typeof key}: ${key} => ${value}`); } // 输出示例: // string: name => Alice // object: [object Object] => 这是一个对象作为键的值 // function: () => console.log('I am a key') => 这是一个函数作为键的值

Set：独一无二值的集合

Set

则是一种只存储不重复值的集合。如果你有一个数组，想快速去除重复项，或者需要一个高效的方式来检查某个值是否存在于一个集合中，

Set

就是你的好帮手。

• 值唯一性：

  Set

  中的每个值都是唯一的。当你尝试添加一个已经存在的值时，

  Set

  会忽略这次操作。

• 保持插入顺序：和

  Map

  一样，

  Set

  也会记住值的插入顺序。

• 内置

  size

  属性：直接获取

  Set

  中元素的数量。

常用方法：

• new Set()

  : 创建一个空的Set。

• set.add(value)

  : 添加一个值。如果值已存在，则不进行任何操作。

• set.has(value)

  : 检查Set中是否存在某个值。

• set.delete(value)

  : 删除指定值。

• set.clear()

  : 清空Set。

• set.size

  : 返回Set中值的数量。

const mySet = new Set();  mySet.add(1); mySet.add(5); mySet.add('text'); mySet.add(1); // 再次添加1，不会有任何效果  console.log(mySet.size); // 3 console.log(mySet.has(5)); // true console.log(mySet.has(2)); // false  const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArr = [...new Set(arr)]; // 快速去重 console.log(uniqueArr); // [1, 2, 3, 4, 5]  // 遍历Set for (const value of mySet) {     console.log(value); } // 输出示例: // 1 // 5 // text

Map和Object有什么区别？什么时候该用Map，什么时候用Object？

这真的是一个非常核心的问题，很多初学者会混淆。在我看来，

Map

和

Object

虽然都能存储键值对，但它们的“设计哲学”和适用场景是完全不同的。

核心区别：

1. 键的类型：这是最根本的区别。

   • Object

     ：键必须是字符串或Symbol。如果你传入其他类型，它会尝试将其转换为字符串（比如

     obj[1]

     会变成

     obj['1']

     ，

     obj[{}]

     会变成

     obj['[object Object]']

     ，这常常导致键冲突）。

   • Map

     ：键可以是任何数据类型，包括对象、函数、数字、布尔值等。

     Map

     会严格区分这些键。

2. 迭代顺序：

   • Object

     ：在ES2015之前，对象的属性遍历顺序是不可靠的。虽然现代JS引擎对于非整数字符串键通常会保持插入顺序，但对于数字字符串键（如

     '1'

     ,

     '2'

     ）则会按数字大小排序。这在使用上可能会带来一些不确定性。

   • Map

     ：明确保证按照键值对的插入顺序进行迭代。这一点在需要保持数据顺序的场景下非常重要。

3. 大小获取：

   • Object

     ：没有直接获取属性数量的属性。你需要用

     Object.keys(obj).length

     或

     Object.entries(obj).length

     。

   • Map

     ：有内置的

     size

     属性，直接

     map.size

     即可获取。

4. 原型链：

   • Object

     ：有原型链。这意味着你可能会意外地访问到原型链上的属性（比如

     toString

     ），或者需要使用

     hasOwnProperty

     来判断属性是否是对象自身的。

   • Map

     ：没有原型链上的属性，它是一个纯粹的键值对集合，不会有这些“干扰”。

5. 性能：对于频繁的添加、删除操作，尤其是在数据量较大时，

   Map

   通常比

   Object

   有更好的性能表现。这是因为

   Map

   是专门为这种用途优化的。

什么时候用Map？

• 你需要用非字符串作为键：比如你想把DOM元素、react组件实例、或者其他对象作为键来存储额外数据。这是

  Map

  最独有的优势。

• 你需要保持键值对的插入顺序：比如处理配置项或缓存，希望按照添加的顺序进行处理。
• 你需要频繁地添加和删除键值对：比如在算法中构建动态查找表。
• 你需要一个真正的“字典”或“哈希表”：没有原型链的干扰，更纯粹的数据结构。

什么时候用Object？

• 当你需要一个简单的“记录”或“结构体”：比如表示一个用户的个人信息

  { name: 'Alice', age: 30 }

  ，键是固定的、可预测的字符串。

• 你需要将数据序列化为json：

  Object

  可以直接通过

  JSON.stringify

  转换为JSON字符串，而

  Map

  则需要手动转换。

• 你主要使用硬编码的字符串键：或者键的数量相对固定且较少。
• 你需要在对象上定义方法：

  Object

  是JavaScript面向对象的基础，可以定义方法、继承等。

总结来说，如果你的需求只是一个简单的、键为字符串的静态数据集合，

Object

可能更简洁方便。但一旦涉及到动态键类型、顺序要求或高性能的增删查改，

Map

无疑是更现代、更强大的选择。

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

Set

在处理数组去重和高效数据查找方面，简直是“神来之笔”，极大地简化了代码并提升了性能。在我看来，这是它最直接、最实用的两个应用场景。

1. 数组去重：简洁与高效的完美结合

在

Set

出现之前，JavaScript数组去重通常需要一些相对繁琐的逻辑，比如：

• 使用

  Array.prototype.Filter()

  结合

  indexOf()

  ：

  const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArrOld = arr.filter((item, index, self) => self.indexOf(item) === index); console.log(uniqueArrOld); // [1, 2, 3, 4, 5]

  这种方法虽然能去重，但

  indexOf

  在每次迭代中都会遍历数组，导致时间复杂度是O(n²)，对于大型数组来说性能非常差。

• 使用循环和临时对象/数组：

  const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArrLoop = []; const seen = {}; for (const item of arr) {     if (!seen[item]) {         uniqueArrLoop.push(item);         seen[item] = true;     } } console.log(uniqueArrLoop); // [1, 2, 3, 4, 5]

  这种方法性能较好（接近O(n)），但代码量相对较多，且需要一个额外的

  seen

  对象来辅助。

有了

Set

之后，数组去重变得异常简洁和高效：

const arr = [1, 2, 2, 3, 4, 4, 5, 'a', 'a', {id:1}, {id:1}]; const uniqueArrNew = [...new Set(arr)]; // 或者 Array.from(new Set(arr)) console.log(uniqueArrNew); // [1, 2, 3, 4, 5, 'a', {id:1}, {id:1}] // 注意：对象字面量 {id:1} 被视为不同的引用，所以不会被去重。 // Set对于对象是基于引用地址判断唯一性的。  const arrWithObjects = [{id:1, name:'A'}, {id:2, name:'B'}, {id:1, name:'A'}]; // 如果想根据对象的某个属性去重，需要一些额外逻辑 const uniqueObjects = Array.from(new Set(arrWithObjects.map(o => JSON.stringify(o))))                             .map(s => JSON.parse(s)); console.log(uniqueObjects); // [{id:1, name:'A'}, {id:2, name:'B'}]

[...new Set(arr)]

这行代码的优雅之处在于，它首先将数组转换为

Set

，

Set

会自动处理重复项，然后通过展开运算符

...

或者

Array.from()

将

Set

再转换回数组。这个过程的时间复杂度接近O(n)，效率非常高。

2. 数据查找/存在性检查：从O(n)到近似O(1)的飞跃

当你需要频繁地检查一个值是否存在于一个大型集合中时，

Set

的

has()

方法提供了巨大的性能优势。

• 传统数组查找：使用

  Array.prototype.includes()

  或

  Array.prototype.indexOf()

  。

  const largeArray = Array.from({ length: 100000 }, (_, i) => i); console.time('Array includes'); const existsInArray = largeArray.includes(99999); // O(n) console.timeEnd('Array includes'); // 耗时可能在几毫秒到几十毫秒

  includes()

  方法需要遍历数组，其时间复杂度是O(n)。这意味着数组越大，查找所需的时间就越长。

• Set查找：使用

  Set.prototype.has()

  。

  const largeArray = Array.from({ length: 100000 }, (_, i) => i); const largeSet = new Set(largeArray); // 首次构建Set需要O(n)  console.time('Set has'); const existsInSet = largeSet.has(99999); // 平均O(1) console.timeEnd('Set has'); // 耗时通常在0.x毫秒，非常快

  Set

  内部实现了一个哈希表（或类似的结构），使得

  has()

  方法的平均时间复杂度接近O(1)。这意味着无论

  Set

  有多大，查找一个元素所需的时间几乎是恒定的。

何时利用Set的优势？

• 批量去重：当你从后端获取大量数据，或者用户输入的数据中可能存在重复项，需要快速清理时。
• 高效白名单/黑名单检查：比如在一个权限系统中，需要快速判断某个用户ID或资源ID是否在允许访问的列表中。将允许的ID放入

  Set

  ，然后用

  has()

  进行检查，效率极高。

• 避免重复处理：在一些循环或递归算法中，为了避免对同一个元素进行多次处理，可以维护一个

  Set

  来记录已经处理过的元素。

在我看来，

Set

和

Map

一样，都是现代JavaScript开发者工具箱中不可或缺的成员。它们不仅仅是语法糖，更是解决特定问题的优化方案。

Map和Set的弱引用版本：WeakMap和WeakSet又是什么？

当我们谈到

Map

和

Set

时，通常也会提及它们的“弱引用”版本：

WeakMap

和

WeakSet

。这俩兄弟听起来有点神秘，但它们在解决特定内存管理问题时，简直是救星。它们的核心区别在于“弱引用”这三个字。

理解“弱引用”

在JavaScript中，当一个对象被引用时，垃圾回收器（Garbage Collector, GC）就不会回收它，即使它在程序的其他地方已经不再被使用了。这叫“强引用”。如果一个对象只被“弱引用”所持有，那么当没有任何其他强引用指向它时，垃圾回收器就可以把它清理掉，从而释放内存。

WeakMap

和

WeakSet

就是利用了这种弱引用的特性。

WeakMap：弱引用的键值对集合

WeakMap

和

Map

非常相似，都是存储键值对的集合。但它有几个关键的不同点：

1. 键必须是对象：

   WeakMap

   的键只能是对象（包括函数），不能是原始值（如字符串、数字、布尔值、Symbol等）。这是因为它要追踪对象的生命周期。

2. 键是弱引用：这是最重要的。

   WeakMap

   对键的引用是弱引用。这意味着如果一个对象只被

   WeakMap

   作为键引用，而没有其他地方强引用它，那么这个对象就会被垃圾回收。一旦键被回收，

   WeakMap

   中对应的键值对也会自动消失。

3. 不可迭代，无

   size

   属性：由于键可能随时被垃圾回收，

   WeakMap

   的大小是不确定的，因此它没有

   size

   属性，也不能被遍历（比如

   for...of

   ）。你无法获取

   WeakMap

   中所有的键或值。

4. 方法受限：

   WeakMap

   只有

   set()

   ,

   get()

   ,

   has()

   ,

   delete()

   这四个方法。没有

   clear()

   。

WeakMap的典型应用场景：

WeakMap

主要用于将数据“私有地”关联到对象，而不会阻止这些对象被垃圾回收。

• 存储对象的私有数据：如果你想为一个对象添加一些额外的数据，但又不希望这些数据成为对象本身的一部分（比如避免枚举），并且希望当这个对象不再被使用时，这些额外数据也能自动被清理，

  WeakMap

  是完美的选择。

  const privateData = new WeakMap();  class MyClass {     constructor(id) {         privateData.set(this, { id: id, count: 0 }); // 将私有数据与实例关联     }      increment() {         const data = privateData.get(this);         if (data) {             data.count++;             console.log(`ID: ${data.id}, Count: ${data.count}`);         }     } }  let instance = new MyClass(101); instance.increment(); // ID: 101, Count: 1 instance.increment(); // ID: 101, Count: 2  // 当 instance 不再被强引用时，它和 WeakMap 中对应的数据都会被垃圾回收 instance = null; // 移除强引用 // 此时，WeakMap中 {id: 101, count: 2} 这个数据也会被GC清理

• DOM元素的元数据：给DOM元素附加一些数据，当DOM元素从文档中移除并