前言
初衷: 最近在读《深刻了解Es6》这本书,之前没好好全面学过Es6语法,也是趁着不忙的阶段从新好好钻研一下整顿一下笔记分享给大家,不喜勿喷。
适宜人群:前端高级开发,大佬绕道。
内容构造:概念 -> 根本语法 -> 利用场景
在Es6之前,数组始终是JavaScript
中惟一的汇合类型,不过有一些开发者们认为非数组对象的也是汇合,只不过是键值对汇合。然而在Es6之前,开发者们只能应用数组汇合,然而数组是用下标索引index
取值,所以常常被用于创立队列和栈,如果开发者们要应用非数组索引汇合,就会应用对象字面量场景所需的构造。
Set是什么
Set是一个无反复元素的汇合,但不会像数组那样用索引值去拜访数组值,通常的做法是检测某个值是否存在这个汇合中。
为什么要出Set
咱们来看两个案例解说一下为什么要出Set
案例一
let o = {}let key1 = {}let key2 = {}o[key1] = "val"console.log(o[key1]) // valconsole.log(o[key2]) // val
下面example中, 对象的键值都会转换为字符串[object Object]
,外部都会调用toString
,所以不论应用key1
还是key2
都会返回雷同的val
值。
案例二
let o = {}o.count = 1;if (o.count) { console.log(o.count)}
下面example中,存在两个问题是到底是判断有没有这个属性呢,还是检测值是否非零,如果对象这个值真的等于0那么这个判断就不会执行,如果呈现在大型项目中这种问题不容易被发现。(有的小伙伴可能认为,检测对象有没有这个属性谁这样写啊,能够应用in
操作符或者getOwnProperty
)心愿这里不要跟我杠啊!,只管能够应用,但要明确本文这里讲的是Set
那么咱们来说说Set
,Set
汇合是一个有序列表,外面不会呈现反复的值,惟一例外的是在Set
中+0
和-0
是相等的。Set
中也不会对所存储的值进行转换,如下面的{}
间接转换为[object Object]
在Set
中不会存在这种状况,当然也包含数值类型和字符串类型24
和"24"
这两种也不会存在抵触。
let o = new Set()let key1 = {}let key2 = {}o.add(key1)o.add(key2)console.log(o.size) // 2
下面example中,能够看到增加了2个对象{}
,size
是有2条数据也就是并没有被笼罩。上面咱们来认识一下它们的语法吧
根底语法
Set
是一个构造函数,它参数接管所有可迭代对象(Iterator),数组、字符串、Set汇合等这些都是可迭代的。
增加元素
调用new Set()
创立Set
汇合,应用add
办法给汇合里增加对象。
let o = new Set()o.add(24)o.add("24")console.log(o.size) // 查看汇合的元素数量 2
下面这个example,能够分明的看到Set
汇合中是没有将键值强制转换为字符串的,不同类型和指针都会彼此独立。
下面咱们也说了Set
汇合中不会从新反复值
let o = new Set()o.add(24)o.add(24) // 这一行代码则会疏忽,let arr = new Set([1,1,2,3,4,5,1])
下面example中,第二次跟第一个传入的值并且类型都一样,所以Set
则会疏忽该代码不会增加到汇合中。看下方那个arr
变量申明间接初始化了一些数组值,而这些外面数值反复的会间接过滤掉,在生成的时候会只有一个。
检测元素
调用has
办法来检测汇合中是否存在某个值,返回值为Boolean
值,汇合不能像数组那样获取索引值,在Set
汇合中是没有index
索引值的。
let o = new Set()o.add("蛙人")console.log(o.has("蛙人")) // true
移除元素
调用delete
办法能够移除Set
汇合中某一个元素,返回值返回Boolean
,也能够调用clear
办法将汇合中元素全副移除,clear
办法没有返回值。
单个移除
let o = new Set()o.add("蛙人")o.delete("蛙人") // trueconsole.log(o.size) 0
全副移除
let o = new Set()o.add("蛙人")o.clear()console.log(o.size) 0
Set汇合应用forEach遍历
这里Set
的forEach遍历和数组的forEach遍历应用办法截然不同,就是参数返回值有些不同。该Set
办法的forEach也接管三个参数。
- Set汇合里索引地位
- 与第一个参数一样的值
- Set汇合自身
let o = new Set(["蛙人", 24, "male"])o.forEach((value, key, self) => { console.log(value, key, self) // 蛙人 蛙人 set对象 // 24 24 set对象 // male male set对象})
下面exmaple中,只所以forEach第一个参数和第二个参数一样的起因是因为,Set
对象中本没有索引值,所以它的索引值参数也是值,Es6官网本能够去掉这个参数的,然而思考到怕开发者误会和传统的forEach不一样,所以就对立了参数。
利用场景
去重
let list = [1,3,1,2,3,5]let o = new Set(list);console.log(o) // 1 3 2 5let newList = [...o] // 将遍历对象汇合转换为真数组
下面example中,咱们大部分场景下应用该办法都是去重,而后去重完在转换为真数组。
感激
谢谢各位在百忙之中点开这篇文章,心愿对你们能有所帮忙,如有问题欢送各位大佬斧正。
如果感觉写得还行的话,那就点个赞吧。
感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨