什么是JS的Map和Set？

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

JavaScript中的

Map

Set

Map

Set

解决方案

理解

Map

Set

Map：更强大的键值对集合

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

{}

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

• 使用

  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

  登录后复制
  对象来辅助。
  

  新鲜水果网站销售模板

  网站模板是能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东西？Javascript就是适应动态网页制作的需要而诞生的

  70

  查看详情

有了

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

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

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元素从文档中移除并

以上就是什么是JS的Map和Set？的详细内容，更多请关注php中文网其它相关文章！