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 键值对)和相应的操作方法。选择使用哪一个取决于你的具体需求。

相关推荐
Xp021911031 分钟前
知网研学、万方、WPS、大以论文四大排版工具横评,新用户免费排版等你领!
前端·css·html·生活·wps·论文排版
全栈技术负责人2 分钟前
老项目新需求AI前端开发指南
前端·ai编程
周凡12311 分钟前
AI 时代的 Web JavaScript 逆向分析实践与思考
前端·javascript·人工智能
jerryinwuhan16 分钟前
marker BiBERTo解释
java·前端·人工智能
zhoumeina9925 分钟前
分段创建产品,tab 页切换又要保留缓存
前端·javascript
SilentSamsara25 分钟前
命令行工具开发:Click/Typer + 打包为独立二进制
linux·服务器·开发语言·前端·python·青少年编程·fastapi
恋猫de小郭28 分钟前
能在手机本地跑的图像生成模型 Bonsai Image ,效果还不错
前端·aigc·ai编程
Bigger29 分钟前
实战:搭建 AI Code Review 自动化流水线
前端·ci/cd·自动化运维
IT_陈寒36 分钟前
被Vite的HMR坑惨了,原来这样配置才能用对!
前端·人工智能·后端
怕浪猫42 分钟前
Electron 开发实战(七):网络通信与 API 集成全解
前端·javascript·electron