ES6 Set 数据结构

作为ES6提供的一种新数据结构, Set 类似于数组,但其成员却是唯一的,不会有重复的成员出现.Set 本身是一个构造函数,可以生成Set数据结构

实例化

• 方法1

// 接受数组作为参数
const arr = [1,2,3]
const s0 = new Set(arr)
console.log(s0)  //Set(3) {1, 2, 3}

• 方法2

// html
<span>1</span>
<span>2</span>
<span>3</span>

// 接受类似数组的对象作为参数
const spans = document.querySelectorAll('span')
console.log(spans)
console.log(new Set(spans))  //Set(3) {span, span, span}

• 方法3

// 实例化后通过add()方法添加元素
const s = new Set()
s.add(1).add(2).add(2).add('2')
console.log(s) //Set(3) {1, 2, "2"}

由此还可以看出来Number类型的2和String类型的 '2'是不一样的.Set内部判断两个值是否相等的算法类似于 全等运算符( === ) ,最主要的区别在于Set里面 NaN等于自身, 但是 === 比较中认为 NaN !== NaN,这个从下面的代码中可以看出来

s.add(NaN)
console.log(s)  //Set(4) {1, 2, "2", NaN}
s.add(NaN)
console.log(s)  //Set(4) {1, 2, "2", NaN}

第二次add(NaN)之后再次打印set的数据结构,发现没有变化,印证了上面的结论

实例方法

操作方法

• add(value)
  说明: 添加值,返回Set本身,因此add可以链式调用
• delete(value)
  说明: 删除值,返回一个Boolean表示删除是否成功
• has(value)
  说明: 表示是否有这个成员,返回Boolean类型
• clear()
  说明: 清除所有成员

add()

const s2 = new Set()
s2.add(1).add(2)
console.log(s2)  //Set(2) {1, 2}

delete()

const isSuccess = s2.delete(2)
console.log(isSuccess)  //true
console.log(s2)  //Set(1) {1}

has()

console.log(s2.has(1))  //true
console.log(s2.has(2))  //false

clear()

s2.clear()
console.log(s2)  //Set(0) {}

遍历方法

• keys()
  说明: 返回键名
• values()
  说明: 返回键值
• entries()
  说明: 返回键值对
• forEach()
  说明: 使用回调遍历每个成员

keys()

const nameArr = ['zhangsan','lisi','wangwu']
const nameSet = new Set(nameArr)
console.log(nameSet.keys())  //SetIterator {"zhangsan", "lisi", "wangwu"}
for(let item of nameSet.keys()){
  console.log(item)
}
// zhangsan
// lisi
// wangwu

values()

console.log(nameSet.values())  //SetIterator {"zhangsan", "lisi", "wangwu"}
for(let item of nameSet.values()){
  console.log(item)
}
// zhangsan
// lisi
// wangwu

entries()

console.log(nameSet.entries())  //SetIterator {"zhangsan" => "zhangsan", "lisi" => "lisi", "wangwu" => "wangwu"}
for(let item of nameSet.entries()){
  console.log(item)
}
// ["zhangsan", "zhangsan"]
// ["lisi", "lisi"]
// ["wangwu", "wangwu"]

for(let item of nameSet){
  console.log(item)
}
// zhangsan
// lisi
// wangwu

实例默认就可以被遍历,默认的就是values()方法

forEach()

nameSet.forEach((v,k) => console.log('key: %s, value: %s',k,v))
// key: zhangsan, value: zhangsan
// key: lisi, value: lisi
// key: wangwu, value: wangwu

Set实现数组去重

• 方法1

const tmpArr = [1,2,2,3]
console.log([...new Set(tmpArr)])  // [1, 2, 3]

• 方法2

const tmpArr = [1,2,2,3]
console.log(Array.from(new Set(tmpArr)))  // [1, 2, 3]

WeakSet

WeakSet()的成员只能是对象,而不能是其他的数据类型,这是它与Set()的第一点区别

const wSet = new WeakSet()
console.log(wSet)  // WeakSet {}

try{
  wSet.add(1) 
}catch(e){
  console.warn(e)  //TypeError: Invalid value used in weak set
}

wSet.add({}) 
console.log(wSet)  //WeakSet {{…}}

第二点区别是WeakSet中对象都是弱引用,垃圾回收机制不考虑WeakSet对该对象的引用,因此WeakSet也是不可遍历的

const wArr = [3,4]
try{
  console.log(new WeakSet(wArr))  //TypeError: Invalid value used in weak set
}catch(e){
  console.warn(e)
}

const wArr2 = [[1],[2]]
console.log(new WeakSet(wArr2)) //WeakSet {Array(1), Array(1)}

上面的例子说明数组的成员只能是对象

总结

Set和 WeakSet 的关系类似于 Map 和 WeakMap 的关系,想要了解 Map 数据结构,可以看另外一篇文章 链接: ES6 Map 数据结构