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

相关推荐
codingWhat2 分钟前
uniapp 多地区、多平台、多环境打包方案
前端·架构·node.js
HelloReader5 分钟前
从 Tauri 2.0 Beta 升级到 2.0 Release Candidate Capabilities 权限前缀与内置 Dev Server 网络策略变
前端
只与明月听36 分钟前
RAG深入学习之Chunk
前端·人工智能·python
一枚前端小姐姐1 小时前
低代码平台表单设计系统架构分析(实战一)
前端·低代码·架构
HelloReader1 小时前
Tauri 1.0 升级到 Tauri 2.0从“能跑”到“跑得稳”的迁移实战指南(含移动端准备、配置重构、插件化 API、权限系统)
前端
JunjunZ1 小时前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
_Eleven1 小时前
React 19 深度解析:Actions 与 use API 源码揭秘
前端
_AaronWong2 小时前
Vue3+Element Plus 通用表格组件封装与使用实践
前端·javascript·vue.js
前端西瓜哥2 小时前
图形编辑器开发:文字排版如何实现自动换行?
前端
全栈老石2 小时前
手写一个无限画布 #3:如何在Canvas 层上建立事件体系
前端·javascript·canvas