ES6中的 Set 理解

之前 ES5 中是没有 Set这种数据集合的，ES6才把它添加进来了。
Set 是 key 的集合，很类似于一维数组，而且里面的值是不重复的。
下面分别详细说说我对它特性及使用的了解。

Set 数据集合

1、通过 new Set() 来创建 Set 实例

let set = new Set()

2、Set 添加值

// 方式 1: 通过 add() 方法进行添加---注意会去除重复添加的值
let set1 = new Set()
set1.add(0.222)
set1.add(11)
set1.add(11)
set1.add(true)
set1.add('aaa')
set1.add({a: 222})
set1.add([1, 2, 3, 4])

// 方式 2：通过直接传入一维数组进行添加---注意会去除重复的值
let set2 = new Set([.222, 1, false, false, 'bbb', {a: 333}, [1, 2, 3]])

// 方式 3：通过直接传入字符串---注意会去除重复的字符
let set3 = new Set('werds1234444')

3、Set 基础类型重复添加去重，引用类型重复添加不去重

let set1 = new Set()
set1.add(11)
set1.add(11)
set1.add(true)
set1.add(true)
set1.add('aaa')
set1.add('aaa')
set1.add({})
set1.add({})
set1.add({a: 222})
set1.add({a: 222})
set1.add([1, 2, 3, 4])
set1.add([1, 2, 3, 4])

4、Set 数据集合 转为一维数组

// 方式 1：通过展开运算符实现
let set1 = new Set([.222, 1, false, 'bbb', {a: 333}, [1, 2, 3]])
let arr1 = [...set1] 

// 方式 1：通过 Array.from()
let arr2 = Array.from(set1)

// 方式 3：通过 forEach 遍历
let arr3 = []
set1.forEach(item => {
    arr3.push(item);
})

// 方式 4：通过 for...of 遍历
let arr4 = []
for(let key of set1){
    arr4.push(key);
}

5、Set 数据集合的 size、add()、delete()、clear() 及 has() 方法

let set = new Set([1, true, [1, 2], {a: 111}])
set.add(NaN) // 添加成员 NaN
set.add(NaN) // 添加成员 NaN
set.size // set 的成员个数 --> 5
set.delete(true) // 删除成员 true
set.has(true) // 是否有成员 true ----> true    基础数据类型
set.has([1,2]) // 是否有成员 [1,2] ----> false   引用类型的指针地址不一样
set.clear() // 删除所有成员

6、Set 数据集合的遍历 keys()、 values()、 entries()、 for…of 及 forEach

let set = new Set([ 1, {a: 333}, [1, 2, 3]])

// ① set.keys() 返回遍历器，里面只有键（键和值相等）
for(let item of set.keys()){
    console.log(item)
}
/* 输出结果：
1
{a: 333}
[1, 2, 3]
*/

// ② set.values() 返回遍历器，里面只有键（键和值相等）
for(let item of set.values()){
    console.log(item)
}
/* 输出结果：
1
{a: 333}
[1, 2, 3]
*/

// ③ set.entries() 返回遍历器，返回键和值，并且键和值相等
for(let item of set.entries()){
    console.log(item)
}
/* 输出结果：
[1, 1]
[{a: 333}, {a: 333}]
[[1, 2, 3], [1, 2, 3]]
*/

// ④ forEach 返回遍历器，返回键和值，并且键和值相等
set.forEach((item, index) => {
    console.log(item, index)
})
/* 输出结果：
1          1
{a: 333}   {a: 333}
[1, 2, 3]  [1, 2, 3]
*/

7、实现两个集合的 交集、并集、差集

let set1 = new Set([1, 2, 3, 4])
let set2 = new Set([3, 4, 5, 6])
 
// 并集
let resSet1 = new Set([...set1, ...set2]) // 返回成员 1 2 3 4 5 6

// 交集
let resSet2 = new Set([...set1].filter(item => set2.has(item))) // 返回成员 3 4

// 差集 set1相对于 set2 的差集
let resSet3 = new Set([...set1].filter(item => !set2.has(item))) // 返回成员 1 2
// 差集 set2相对于 set1 的差集
let resSet4 = new Set([...set2].filter(item => !set1.has(item))) // 返回成员 5 6

扩展
1、WeakSet 结构适合 Set 类似，通过 new WeakSet() 创建
2、WeakSet 的成员只能是对象（数组、对象），它也有 add() 、delete() 和 has()方法，没有 size 及 forEach()

let weakSet1 = new WeakSet([ [1, 2], [3, 4] ])

let weakSet2 = new WeakSet()
weakSet2.add({})
weakSet2.add({a: 111})
weakSet2.add([1, 2])

let weakSet3 = new WeakSet()
let obj = {}
let arr = [1, 2]
weakSet3.add(obj)
weakSet3.add(arr)
weakSet3.delete(obj)
weakSet3.has(arr)

就记录到这，祝大家开心~

标签：ES6,Set,set,add,理解,let,set1,new
来源： https://blog.csdn.net/qq_37600506/article/details/122712950