ES6的Set与Map

ops/2024/9/24 8:13:43/

在ES6之前,我们存储数据的结构主要有两种:数组、对象,而在ES6中新增了另外两种数据结构:Set、Map。

一、什么是Set?

Set是ES6新增的数据结构,类似数组,但是它的元素成员是唯一的。

Set的使用,属性和方法
1. 创建Set

① new Set()方式创建

javascript">let a = new Set()

 ② 通过传入数组方式创建

javascript">let a = new Set([1, 2, 'akun'])
 2. Set.size:返回Set中元素的数量
javascript">let a = new Set([1, 2, 'akun'])a.size // 3
3. Set.has(key):查找Set对象中是否存在key,返回一个布尔值
javascript">let a = new Set([1, 2, 'akun'])a.has('akun') // true
 4. Set.add(key):往Set对象中添加一个元素
javascript">let a = new Set()a.add(1)
5. Set.delete(key):删除元素key 
javascript">let a = new Set([1, 2, 'akun'])a.delete("akun")
6. Set.clear(): 清空Set的全部元素 
javascript">let a = new Set([1, 2, 'akun'])a.clear()
 7. 遍历 Set

① forEach 遍历 

javascript">let a = new Set([1, 2, 'akun'])a.forEach(item => {console.log(item)
})

 ② for of 遍历

javascript">let a = new Set([1, 2, 'akun'])for(let item of a) {console.log(item)
}
8. Set 转 数组 

① 使用 Array.from 方法 

javascript">let a = new Set([1, 2, 'akun'])let arr = Array.from(a)

② 使用扩展运算符

javascript">let a = new Set([1, 2, 'akun'])let arr = [...a]

Set的使用场景:如可以利用元素成员唯一性实现数组去重,方法has()判断是否有某个元素等等。 

代码的实现:

javascript"> // 数组去重let arr = [1, 1, 2, 3]let unique = [...new Set(arr)] // [1, 2, 3]let a = new Set([1, 2, 'akun'])let b = new Set([2, 3, 4])// 并集let union = [...new Set([...a, ...b])] // [1, 2, 'akun', 3, 4]// 交集let intersect = [...new Set([...a].filter(item => b.has(item)))] // [2]// 差集let difference = [...new Set([...a].filter(item => !b.has(item))),...new Set([...b].filter(item => !a.has(item))),] //  [1, 'akun', 3, 4]

二、什么是Map?

Map是ES6新增的数据结构,类似于对象,本质上就是键值对的集合,对象的键只能是字符串或者Symbols,但Map的键可以为任意类型。

Map的使用,属性和方法 
1. 创建Map 

① new Map()方式创建 

javascript">let a = new Map()

② 通过传入二维数组方式创建 

javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
2. Map.size:返回Map对象中键值对数量 
javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.size // 2
3. Map.has(key):查找Map对象中是否存在key,返回一个布尔值 
javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.has('key1') // true
4. Map.set(key, value):设置Map对象的键值对(键名,键值),返回当前对象 
javascript">let a = new Map()
a.set(0, 'zero')
a.set('key1', 'value1')
 5. Map.get(key):返回key值对应的value,如果key不存在则返回undefined
javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.get('key1') // value1
6. Map.delete(key):删除Map对象中键名为key的键值对 
javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.delete("key1")
7. Map.clear():移除Map对象中保存的所有键名/键值对
javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
a.clear()
 8. 遍历 Map

① forEach 遍历 

javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)a.forEach((value, key) => {console.log(key, value)
})

 ② for of 遍历

javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)for (let [key, value] of a) {console.log(key, value)
}
 9. Map.keys():返回一个新的Iterator对象,它包含按照顺序插入Map对象中每个元素的key值
javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)for (let key of a.keys()) {console.log(key)
}
 10. Map.values():返回一个新的Iterator对象,它包含按照顺序插入Map对象中每个元素的value值
javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)for (let value of a.values()) {console.log(value)
}
 11. Map.entries():该方法返回一个新的Iterator对象,它包含按顺序插入Map对象中每个[key, value]数组
javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)for (let [key, value] of a.entries()) {console.log(key, value)
}
 12. Map 转 数组

① 使用 Array.from 方法

javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
let arr = Array.from(a)

② 使用扩展运算符

javascript">let kvArray = [['key1', 'value1'],['key2', 'value2'],
]let a = new Map(kvArray)
let arr = [...a]

 Map的使用场景:不关心键值对的键名到底是什么,那么在这种情况下,可以用Map。

 三、总结

 1、Set:是一组Key的集合,但不存储Value,由于Key不能重复,因此他最大的特点是所有的元素都是唯一的;

2、Map:是键值对的集合,为JS带来了真正的键值存储机制;允许任何类型的键,具有极快的查找速度(存储键值较少的情况下)。


http://www.ppmy.cn/ops/12440.html

相关文章

.NET StackExchange.Redis 操作redis

下面是一个简单的示例,展示了如何使用 C# 中的 StackExchange.Redis 库与 Redis 进行交互,包括字符串(String)、哈希(Hash)、列表(List)、集合(Set)和有序集合…

数据结构--排序

排序:就是重新排列表中的数据 排序算法:分两种 内部排序和外部排序 内部排序:排序期间元素全部存放在内存中的排序, 外部排序:排序期间元素无法同时存放在内存中,必须在排序的过程中根据要求不断地在内、…

Linux——界面和用户

本篇文章所写的都是基于centos 7 64位(通过虚拟机运行)。 一、Linux的界面 Linux操作系统提供了多种用户界面,主要分为图形用户界面(GUI)和命令行界面(CLI)。 1、图形用户界面(GUI)&#xff…

陈文自媒体:快手影视100万播放量,涨粉2万+

干过抖音快手的老铁都知道,这些平台竟然出现100万以上,1000万,甚至一个亿的作品,但是这玩意有前提,那就是你的号要做的足够久,运营能力要足够强,内容要足够优秀。 昨天我稍微看了一下工作室的前…

HTTPS和HTTP有什么区别,如何启用HTTPS

HTTP和HTTPS是两个非常重要的概念。它们分别代表了“超文本传输协议”和“安全超文本传输协议”。虽然它们的名字非常相似,但它们之间却存在着一些关键性的区别。本文将详细解析这两种协议的不同之处,并介绍如何申请HTTPS。 HTTP详解 HTTP是一种用于分…

计算机网络——应用层协议(1)

在这篇文章初识网络中,我介绍了关于计算机网络的相关知识,以及在这两篇文章中Socket编程和Socket编程——tcp,介绍了使用套接字在两种协议下的网络间通信方式。本篇文章中我将会进一步介绍网络中网络协议的部分,而这将会从应用层开…

【OceanBase诊断调优 】—— 如何快速定位SQL问题

作者简介: 花名:洪波,OceanBase 数据库解决方案架构师,目前负责 OceanBase 数据库在各大型互联网公司及企事业单位的落地与技术指导,曾就职于互联网大厂和金融科技公司,主导过多项数据库升级、迁移、国产化…

代码随想录算法训练营day49

121. 买卖股票的最佳时机 五部曲: dp数组下标及含义:dp[i][0] 表示第i天持有股票所得最多现金 ;dp[i][1] 表示第i天不持有股票所得最多现金 dp数组初始化:dp[0][0] - prices[0];dp[0][1] 0; 递推公式: dp[i][0] ma…