网站首页 > 技术文章 正文
作者:Kyle Cook
网站:Web Dev Simplified Blog
字数:1000 字 (非直译)
阅读: 3 分钟
一、开篇语
你也许看过或曾经写过类似的代码:
const uniqueList = [1, 2, 3, 4, 5]
const newNumber = 4
if (!uniqueList.include(newNumber)) {
uniqueList.add(newNumber)
}
这段代码本身没啥问题,但是你要创建唯一项列表时,数组通常不是最好的选择,这时候 JS Set集合 则派上用场啦。
Set集合 其实是 JS 的 Class类,该类你可以像常规数组一样存储内容,但是其有一个重要的特性,强调内容的唯一性。这意味着 Set集合 是一个唯一性的列表集合(uniqueList) ,如果我们试图向其添加重复的内容时,集合则不会添加此内容。这一特点,对于确保列表的唯一性非常重要,关于其应用场景,文末将会介绍到。
JS Maps集合 与 Set集合 非常相似,只是其在键/值字典查找应用场景替代Object对象十分常用,关于JS Maps集合 文章的介绍大家可以去看下这篇文章 JS短文 | 5分钟了解 JS Maps 对象
二、如何使用Sets
集合和数组非常相似,但两者之间大部分的属性和方法又有不同。
1、创建Set(Creating A Set)
前面说过 Set集合 是一个 Class类,创建 Set集合时,我们需要进行实例化,刚实例化时,则是一个空Set集合,如果向其填充值,我们可以传递可迭代的列表,例如数组,如下段代码所示:
const emptySet = new Set()
const itemSet = new Set([1, 2, 3, 4])
2、添加元素(Adding Items)
实例化 Set集合 后,你很可能需要一个方法,往里填充内容。这很简单,我们使用 add 方法即可,由于add方法返回Set集合本身,我们可以使用链式语法进行添加内容,示例代码如下:
const itemSet = new Set()
itemSet.add(1)
itemSet.add(2)
itemSet.add(3).add(4) // Chaining
// [1, 2, 3, 4]
3、获取值(Getting Values)
到目前为止,获取元素的值是数组和Set集合最大的区别,在数组中,我们可以通过索引的方式获取对应的值,但是在 Set集合时,不能按索引的方式获取具体的值,如果你这么做了,则始终会返回undefined,如下段代码所示:
const array = [1, 2]
const itemSet = new Set(array)
console.log(array[0])
// 1
console.log(itemSet[0])
// undefined
虽然你不能像数组那样通过索引方式访问具体的值,但是你可能需要检查某个值是否存在或者遍历集合元素,这是Set集合中最常见的应用场景。
4、检查值是否存在(Checking For Values)
有时候,你需要检查集合中是否存在你想找的值,你可以使用 has方法,传递你想查找的值,其返回布尔值。
const itemSet = new Set([1, 2, 3, 4])
itemSet.has(1)
// true
itemSet.has(5)
// false
5、移除值(Removing Values)
你可能要删除具体的值,这对于Set集合也十分容易,你可以使用 delete 方法。
const itemSet = new Set([1, 2, 3, 4])
itemSet.delete(1)
itemSet.has(1)
// false
6、迭代集合(Iterating Over A Set)
迭代的集合方法比较多,但是最常见的就是使用 forEach方法,其使用方法和数组的 forEach方法类似。
const itemSet = new Set([1, 2, 3, 4])
itemSet.forEach(item => {
console.log(item)
})
// 1
// 2
// 3
// 4
三、其它有用的方法和属性
- 你可以使用 size属性 获取 Set集合 的长度。
- 你可以使用 clear()方法 清空 Set集合。
四、Set应用场景
很明显,Set集合的唯一性,对于一些业务场景的应用十分有用。
1、删除重复的内容
如果你的数组内容中包含重复的内容,你想进行去重,你该怎么做呢?首先将数组转换成集合,利用唯一性将重复的内容删掉,然后将处理过的集合对象再转换成数组,示例代码如下。
const arrayWithDups = [1, 1, 2, 3, 3]
const itemSet = new Set(arrayWithDups)
const array = [...itemSet] // Convert Set to array
console.log(array)
// [1, 2, 3]
2、判断列表的内容是否唯一性
基于上面的例子,我们可以更进一步,通过集合的长度是否相等,来判断一个数组列表是否具有唯一性,示例代码如下:
const arrayWithDups = [1, 1, 2, 3, 3]
const itemSet = new Set(arrayWithDups)
const isUnique = itemSet.size === arrayWithDups.length
console.log(isUnique)
// false
五、删除列表的元素很容易
删除数组中的元素并不是特别轻松,到目前为止也没有比较好的方法(虽然有方法,但是理解起来有些绕)。但是 Set 则不一样,它提供最接近人类删除的思维方式 delete() 方法进行删除,上面已介绍过。
六、结束语
Sets 集合是一个很好数据类型,当我们需要执行确保列表唯一性业务场景时,可以使用它代替数组。今天的内容就到这里,感谢你的阅读。
- 上一篇: js set 去重 查找元素 新增元素 太好用
- 下一篇: 访问者模式(Visitor模式)详解
猜你喜欢
- 2024-11-24 30、下面 Set 结构,打印出的 size 值是多少(高薪常问)
- 2024-11-24 ES6——set用法
- 2024-11-24 js 中,set 与 数组 相互转换
- 2024-11-24 JavaScript,ES6,Set(集合),新的数据结构,没有重复元素
- 2024-11-24 JavaScript中常用的去重方法;包括Set
- 2024-11-24 js 中set去重并转为数组
- 2024-11-24 WPS宏(JSA)教程——Map和Set
- 2024-11-24 访问者模式(Visitor模式)详解
- 2024-11-24 js set 去重 查找元素 新增元素 太好用
- 2024-11-24 ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-