es6中set和map的区别

在ES6(ECMAScript 2015)中,SetMap 是两种新的集合类型,它们提供了更高级的数据结构来存储唯一值或键值对集合。尽管它们在功能上有些相似,但它们在用途和内部机制上存在一些关键区别。

1. 基本概念

  • Set:一个集合(Set)是一种包含唯一值的数据结构。它的每个元素都是唯一的,没有重复的值。Set 类似于数组,但成员的值都是唯一的,没有重复的值。

  • Map:一个Map对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值)都可以作为一个键或一个值。

2. 主要区别

2.1 存储的数据类型
  • Set:只存储唯一的值(无论是原始值还是对象引用)。
  • Map:存储键值对,键和值都可以是任何类型。
2.2 插入和访问
  • Set :通过 .add() 方法添加新元素,.has() 方法检查元素是否存在,.delete() 方法删除元素,.clear() 方法清空集合。没有直接按索引访问元素的方式,但可以遍历集合。
  • Map :通过 .set(key, value) 方法添加新的键值对,.get(key) 方法根据键获取值,.has(key) 方法检查键是否存在,.delete(key) 方法根据键删除键值对,.clear() 方法清空Map。
2.3 遍历
  • SetMap 都提供了遍历方法,如 .forEach().keys().values().entries()。但是,由于Map存储的是键值对,所以.entries() 方法对于Map特别有用,因为它返回一个包含每个键值对的数组。
2.4 顺序
  • SetMap 都保持了元素的插入顺序。这意味着,当你遍历它们时,元素将按照被添加到集合中的顺序返回。
2.5 默认值
  • Set 的默认值是 undefined(虽然你通常不会向Set中添加 undefined,因为它被视为唯一值)。
  • Map 的键和值都可以是 undefined,只要它们是唯一的或作为特定的键值对存在。

3. 应用场景

  • Set:适用于需要去重或者需要快速判断某个元素是否存在于集合中的场景。
  • Map:适用于需要存储键值对,并且需要保持键的插入顺序的场景,如实现字典、缓存等。

4. 示例

复制代码
// Set 示例  
let mySet = new Set();  
mySet.add(1);  
mySet.add(2);  
mySet.add(2); // 重复的值不会被添加  
console.log(mySet.has(2)); // true  
  
// Map 示例  
let myMap = new Map();  
myMap.set('a', 1);  
myMap.set('b', 2);  
console.log(myMap.get('a')); // 1  
console.log(myMap.has('b')); // true

总结,SetMap 在ES6中提供了强大的集合操作能力,它们的主要区别在于存储的数据类型(唯一值 vs 键值对)和相应的操作方法。选择使用哪一个取决于你的具体需求。

相关推荐
吃饭睡觉打豆豆嘛13 分钟前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端19 分钟前
claude code 原理分析
前端
GalaxyMeteor20 分钟前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man20 分钟前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮20 分钟前
最全Scss语法,赶紧收藏起来吧
前端·css
小高00721 分钟前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon33 分钟前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible1 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua1 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12041 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画