登录
首页 >  文章 >  前端

JS中的Set与Map有何不同?一文教你快速掌握它们的用法

时间:2025-06-07 14:37:26 354浏览 收藏

怎么入门文章编程?需要学习哪些知识点?这是新手们刚接触编程时常见的问题;下面golang学习网就来给大家整理分享一些知识点,希望能够给初学者一些帮助。本篇文章就来介绍《JS中Set和Map的区别与用法详解》,涉及到,有需要的可以收藏一下

Set用于存储唯一值适合去重和存在性检查Map用于存储键值对支持任意类型键适合复杂映射和元数据存储。Set通过add/has/delete操作自动去重内部使用类似===的相等判断但对NaN友好;Map通过set/get操作允许对象、函数等作为键且遍历顺序保持插入顺序。两者均提供更高效的查找和更清晰的数据结构选择优于传统对象或数组的部分场景应用。

JS中的Set和Map有什么区别?怎么用?

在JavaScript中,SetMap是两个常用的数据结构,它们都是ES6引入的特性,适合处理需要高效查找、去重或键值映射的场景。虽然它们看起来有点像对象和数组,但各自有明确的使用场景和优势。

Set:用来存储唯一值

Set是一个集合,里面不能有重复的值。它特别适合做数据去重、判断是否存在某个元素等操作。

基本用法:

const s = new Set();
s.add(1);
s.add(2);
s.add(2); // 重复添加无效
console.log(s); // 输出: Set { 1, 2 }

常见用途和技巧:

  • 去重数组中的元素:

    const arr = [1, 2, 2, 3];
    const uniqueArr = [...new Set(arr)]; // [1, 2, 3]
  • 判断某个值是否存在:

    s.has(1); // true
  • 删除元素:

    s.delete(1);

注意:Set内部判断是否相等使用的机制类似于===,但对NaN比较友好(即NaNNaN视为相同)。


Map:用来存储键值对,支持任意类型的键

Map类似于对象,但它最大的特点是允许任何类型的键(比如对象、函数甚至NaN),不像普通对象只能用字符串或Symbol作为键。

基本用法:

const m = new Map();
m.set('name', 'Tom');
m.set(1, 'number key');
m.set({ id: 1 }, 'object key');

console.log(m.get('name')); // Tom
console.log(m.get(1));      // number key

常见用途和技巧:

  • 使用对象作为键来存储元数据,避免污染对象本身。
  • 比普通对象更安全地管理键值关系,尤其是键不确定的时候。
  • 遍历顺序保持插入顺序,这点比普通对象更可靠。

注意点:

  • map.get() 是获取值的方式,不是用.[]

  • 如果你用对象做键,每次传入一个新对象都会被当作不同的键:

    const key1 = {};
    const key2 = {};
    m.set(key1, 'a');
    m.set(key2, 'b');
    console.log(m.size); // 2

Set 和 Map 的区别总结

特性SetMap
存储内容单一值集合键值对集合
是否去重✅自动去重❌不自动去重
键类型不适用支持任意类型
获取方式遍历或检查存在通过.get(key)获取值
常见用途去重、集合运算缓存、元数据存储、复杂映射

基本上就这些了。掌握好SetMap之后,你会发现有些以前需要用对象或数组折腾的逻辑,现在用它们可以更清晰、高效地实现。

今天关于《JS中的Set与Map有何不同?一文教你快速掌握它们的用法》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于map,set的内容请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>