ES6的Set结构用法总结

一.关于Set结构

Set是es6中新推出的一种数据结构
先通过代码来说一下Set的特性

const set = new Set()
      const arr1 = [1, 2, 3, 4, 5, 5]
      arr1.forEach(item => set.add(item))
      console.log(set) // 1,2,3,4,5
      for (const i of set) {
        console.log(i)
      }

• 可以看出来Set是一个构造函数，通过new关键字进行实例化的。

• 并且set结构中的数据不会重复（那么说明Set可以进行数据的去重）

下面再看一段代码

const set = new Set()
      set.add(5)
      set.add('5')
      console.log(set)
const newSet = new Set()
      const a = NaN
      const b = NaN
      newSet.add(a)
      newSet.add(b)
      console.log(newSet)

通过这段代码 发现NaN只输出了一个 并且5不等于’5’的，他相似于 === 但并不完全是 ===

const set = new Set()
      set.add({}) // 向set中添加一个空对象
      console.log(set.size) // 1
      set.add({}) // 向set中添加另一个空对象
      console.log(set.size) // 2

• 两个空对象在set中是不相等的

通过以上的例子，可以总结出Set结构有以下几个特性

• Set是一个构造函数，想要使用必须用new关键字
• Set中的数据不会重复，往Set中添加数据时会进行去重
• Set中两个空对象是不相等的

二.关于Set的一些属性与方法

这是通过构造函数实例化后 打印出来的Set

属性：

• size 类似于数组的length长度 返回set实例的成员总数

方法：

• add() 向set实例中添加成员，并返回set本身
• delete() 删除set实例中的某个成员，返回一个Boolean值，用于判断是否删除成功
• has() 返回一个Boolean值，判断set示例中是否有这个成员
• clear() 清除Set结构中的所有成员，并且没有返回值
• keys() 返回键名的遍历器
• values() 返回键值的遍历器
• entries() 返回键值对的遍历器（键名：键值）
• forEach() 通过回调函数遍历每个成员

以上是总结出来的一些常用属性与方法，下面将会介绍它们

1. size属性，add(),has(),delete(),clear()方法

const set = new Set()
      set.add(1)
      set.add(2)
      set.add(3).add(4).add(5)
      console.log(set.size)
      console.log(set)
      console.log(set.has(3))
      console.log(set.delete(2))
      set.clear()
      console.log(set)

• add()上面已经用过，主要是用于向Set结构中添加成员
• has方法用于判断set结构中是否有此值，返回布尔值
• delete方法用于删除此值，成功或者失败都返回布尔值
• clear方法用于清空此set结构中所有的值，没有返回值

2. keys()、values()、entries()、forEach()方法

• keys方法、values方法、entries方法返回的都是遍历器对象
• 由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致

 const set = new Set(['red', 'blue', 'black'])
      for (const key of set.keys()) {
        console.log(key)     // red,blue,green
      }
      for (const value of set.values()) {
        console.log(value)  // red,blue,green
      }
      for (const item of set.entries()) {
        console.log(item)   // ['red','red'],['blue','blue'],['green','green']
      }
      set.forEach((key, value) => {
        console.log(key + ':' + value)
      })

3.Array.from()方法

Array.from()可以将set结构转为数组，这就提供了去除数组重复成员的另一种方法

const items = new Set([1, 2, 3, 4, 5])
      console.log(items) // 1,2,3,4,5
      const array = Array.from(items)
      console.log(array) // 1.2.3,4,5
      // Array.from()方法实现数组去重
      function dedupe (arr) {
        return Array.from(new Set(arr))
      }
      console.log(dedupe([1, 1, 2, 3])) // 1,2,3
    }
  }

三.Set的遍历应用

1.数组去重以及字符串去重

function dedupe (arr) {
        return Array.from(new Set(arr))
      }
      console.log(dedupe([1, 1, 2, 3])) // 1,2,3
      const arrs = [1, 1, 3, 3, 4, 5, 6]
      const unique = [...new Set(arrs)]
      console.log(unique) // 1,3,4,5,6
// 字符串去重
      const set = [...new Set('aabbccdefg')].join('')
      console.log(set)

2.间接使用数组的遍历方法

• 内部使用（…）扩展运算符，与set结构相结合，可以使用数组的map或filter方法

 let set = new Set([1, 2, 3, 4, 5])
      set = new Set([...set].map(x => x * 2)) // 使用数组的map方法
      console.log(set) // 2,4,6,8,10
      let mySet = new Set([1, 2, 3, 4, 5])
      mySet = new Set([...mySet].filter(x => x % 2 === 0)) // 使用数组的filter方法
      console.log(mySet) // 2,4

3.通过Set实现并集，交集，差集

const set1 = new Set([1, 2, 3])
      const set2 = new Set([2, 3, 4])
      let union = new Set([...set1, ...set2])
      // 如果需要数组结构 通过Array.from即可转变为数组
      union = Array.from(union)
      console.log(union)
      let combind = new Set([...set1].filter(x => set2.has(x)))
      // 如果需要数组结构 通过Array.from即可转变为数组
      combind = Array.from(combind)
      console.log(combind)
      const diffrence = new Set([...set1].filter(x => !set2.has(x)))
      console.log(diffrence)

以上是总结的一些常用的Set结构的用法