学习笔记 JavaScript ES6 Set

学习内容：

• 常用方法
• 遍历
• 应用场景
• WeakSet

一种新的数据结构

set和array数组很像，不过array中可以有重复的值，而set里的值是唯一的：

let s = new Set()
console.log(s)

let s1 = new Set([1,2,3,2]) // 这里有重复的2，打印时变成了一个
console.log(s1)

------------------
Set(0) {size: 0}
Set(3) {1, 2, 3}

Set的常用方法

添加元素add()

let s1 = new Set([1,2,3,2])
s1.add('ABC')
s1.add('XYZ')
console.log(s1)

// 也可以写成链式操作
let s2 = new Set([1,2,3])
s2.add('666').add('777')
console.log(s2)

------------------------------
Set(5) {1, 2, 3, 'ABC', 'XYZ'}
Set(5) {1, 2, 3, '666', '777'}

删除元素delete()

let s2 = new Set([1,2,3])
s2.add('666').add('777')
s2.delete(2)

console.log(s2)

---------------------------
Set(4) {1, 3, '666', '777'}

清空操作clear()

let s2 = new Set([1,2,3])
s2.add('666').add('777')
s2.clear()

console.log(s2)

---------------------------
Set(0) {size: 0}

判断set中是否包含某个值has()

let s2 = new Set([1,2,3])
s2.add('666').add('777')

console.log(s2.has('666'))

---------------------------
true

set的长度，就是有几个值size，注意没有括号，数组是length别弄混了

let s2 = new Set([1,2,3])
s2.add('666').add('777')

console.log(s2.size)

------
5

遍历

forEach

let s2 = new Set([1,2,3])
s2.add('666').add('777')

s2.forEach(item => console.log(item))
---------------------------
1
2
3
666
777

for ( of ) { } 

let s2 = new Set([1,2,3])
s2.add('666').add('777')

for(let item of s2) {
    console.log(item)
}
---------------------------
1
2
3
666
777

for ( of .keys() ) {

let s2 = new Set([1,2,3])
s2.add('666').add('777')

for(let item of s2.keys()) {
    console.log(item)
}
---------------------------
1
2
3
666
777

for ( of .values() ) { }

let s2 = new Set([1,2,3])
s2.add('666').add('777')

for(let item of s2.values()) {
    console.log(item)
}
---------------------------
1
2
3
666
777

 for ( of .entries() ) { }，又能输出key，又能输出value

let s2 = new Set([1,2,3])
s2.add('666').add('777')

for(let item of s2.entries()) {
    console.log(item)
}
---------------------------
(2) [1, 1]
(2) [2, 2]
(2) [3, 3]
(2) ['666', '666']
(2) ['777', '777']

应用场景 

对数组进行去重

let arr = [1,2,3,4,1,2,3]
let s = new Set(arr)

console.log(s)

----------------------
Set(4) {1, 2, 3, 4}

对数组进行合并去重后得到set

let arr1 = [1,2,3,4]
let arr2 = [2,3,4,5]
let s = new Set([...arr1,...arr2])

console.log(s)

----------------------
Set(5) {1, 2, 3, 4, 5}

对数组进行合并去重后得到数组

let arr1 = [1,2,3,4]
let arr2 = [2,3,4,5]
let s = new Set([...arr1,...arr2])

console.log([...s]) // 第一种方法转为数组
console.log(Array.from(s)) // 第二种方法转为数组

----------------------
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]

取得两个数组的交集

let arr1 = [1,2,3,4]
let arr2 = [2,3,4,5]

let s1 = new Set(arr1)
let s2 = new Set(arr2)

// filter会返回一个符合条件的数组
let result = new Set(arr1.filter(item => s2.has(item))) // 通过has()方法实现
console.log(result)

---------------------
Set(3) {2, 3, 4}

取得两个数组的差集

let arr1 = [1,2,3,4]
let arr2 = [2,3,4,5]

let s1 = new Set(arr1)
let s2 = new Set(arr2)

let arr3 = new Set(arr1.filter(item => !s2.has(item)))
let arr4 = new Set(arr2.filter(item => !s1.has(item)))

console.log([...arr3,...arr4])

---------------------
(2) [1, 5]

WeakSet

weakset只能放对象，不能放数字或字符串。

weakset也有add、delete，用法和set一样，但是weakset不可以遍历，weakset中的对象都是弱引用，不会被GC。ES中的GC是一种计数的GC方式，对象被引用一次，计数+1，如果计数=0，GC才回收。

weakset用于临时存放一些对象，跟对象去绑定一些相关的信息。当对象被销毁后，weakset中的对象也被销毁。

Set和WeakSet的区别

• weakset只能存放对象，不能存储数字或字符串
• set可以遍历，weakset不可以遍历
• weakset是弱引用，不会被GC