前言
初衷: 最近在读《深入理解Es6》这本书,之前没好好全面学过Es6语法,也是趁着不忙的阶段重新好好研究一下整理一下笔记分享给大家,不喜勿喷。
适合人群:前端初级开发,大佬绕道。
内容结构:概念 -> 基本语法 -> 应用场景
在Es6之前,数组一直是JavaScript
中唯一的集合类型,不过有一些开发者们认为非数组对象的也是集合,只不过是键值对集合。但是在Es6之前,开发者们只能使用数组集合,但是数组是用下标索引index
取值,所以经常被用于创建队列和栈,如果开发者们要使用非数组索引集合,就会使用对象字面量场景所需的结构。
Set是什么
Set是一个无重复元素的集合,但不会像数组那样用索引值去访问数组值,通常的做法是检测某个值是否存在这个集合中。
为什么要出Set
我们来看两个案例讲解一下为什么要出Set
案例一
代码语言:javascript复制let o = {}
let key1 = {}
let key2 = {}
o[key1] = "val"
console.log(o[key1]) // val
console.log(o[key2]) // val
上面example中, 对象的键值都会转换为字符串[object Object]
,内部都会调用toString
,所以不管使用key1
还是key2
都会返回相同的val
值。
案例二
代码语言:javascript复制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
方法没有返回值。
单个移除
代码语言:javascript复制let o = new Set()
o.add("蛙人")
o.delete("蛙人") // true
console.log(o.size) 0
全部移除
代码语言:javascript复制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不一样,所以就统一了参数。
应用场景
去重
代码语言:javascript复制let list = [1,3,1,2,3,5]
let o = new Set(list);
console.log(o) // 1 3 2 5
let newList = [...o] // 将遍历对象集合转换为真数组
上面example中,我们大部分场景下使用该方法都是去重,然后去重完在转换为真数组。