boxmoe_header_banner_img

Hello! 欢迎来到悠悠畅享网!

文章导读

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


avatar
悠悠站长 2025年6月6日 5

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

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

在JavaScript中,Set和Map是两个常用的数据结构,它们都是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比较友好(即NaN和NaN视为相同)。


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 的区别总结

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

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



评论(已关闭)

评论已关闭