8.新增类型Set

Set

Set是一种数据结构，类似于数组，但是项(对于对象来说是指针喔~)都是唯一的，可用于数组去重，

new Set([1,2,3,2])
// 结构如下
Set(3){
  [[Entries]]:{'0': 1, '1': 2, '2': 3},
  size: 3
}

属性

size: 返回Set实例的项数

方法

add(item): 向Set添加某个值，并返回操作完后的自身（意味可以链式调用）
delete(item): 删除某个项，返回boolean表示是否删除成功
has(item): 检查是否含有某个项，返回boolean
clear(): 清除所有项
[Symbol.iterator](): Set类型预置了迭代器，可以进行迭代操作`for-of`、`...`

示例如下:

let s = new Set([1,2]).add(3).add(4) // [1,2,3,4]
s.add(5) // [1,2,3,4,5]
s.delete(5) // true,删除成功:[1,2,3,4]
for(let item of s){ alert(item) } // 1,2,3,4
s.has(1) // true
s.clear() // s.size === 0, true

遍历操作

keys(): 返回键名遍历器
values(): 返回键值遍历器
entries(): 返回键值对遍历器
forEach(function(item)=>{ ... }): 使用回调函数遍历每一项 

示例如下

const {log} = console
const s = new Set(); // 生成Set
[1,2,2,3].forEach(item => s.add(item)) 
s // Set(3){1,2,3} 唯一性

for(let key of s.keys()){ log(key) } // 1,2,3 Set结构键名和键值是同一个值
for(let val of s.values()){ log(val) } // 1,2,3
s.forEach(item=>log(item)) // 1,2,3
for(let entry of s.entries()){ log(entry) } // [1,1],[2,2],[3,3]

Set函数可以接收一个数组或者具有Iterable接口的其他数据结构作为参数，用来初始化，放进set结构里

const set = new Set([1,2,2,3])

const set1 = new Set(document.querySelectorAll('div'))
// 等价于
const set1 = new Set()
document.querySelectorAll('div').forEach(div => set1.add(div))

数组去重和字符串去重

[...new Set([1,2,2,3])]
[...new Set('abbc')].join('')

遍历操作

由于Set结构键名和键值是同一个值（这样能实现值的唯一性，我菜的），故keys和values方法行为一致

  let set = new Set(['id', 'name', 'sex'])

  for (const item of set.keys()) {
    console.log(item) // id name sex
  }
  for (const item of set.values()) {
    console.log(item) // id name sex
  }
  for (const item of set.entries()) {
    console.log(item) // ['id','id'] ['name','name'] ['sex','sex']
  }
  set.forEach((value, key, set) => {
    console.log(value, key, set) // id id set(3){'id','name','sex'} ...略
  })

Set结构默认遍历器生成函数就是它的values方法,即：

Set.prototype[Symbol.iterator] === Set.prototype.values

for(let item of set){
  console.log(item) // id name sex
}

☆Set结构借用数组的迭代方法可以实现 交集、并集、差集

  let arr1 = [1, 1, 2, 3]
  let arr2 = [2, 3, 4]
  // 并集
  function union(arr1, arr2) {
    return [...new Set([...arr1, ...arr2])]
  }
  // 交集
  function intersect(arr1, arr2) {
    return [...new Set(arr1)].filter(item => arr2.indexOf(item) !== -1)
  }
  // 差集
  function difference(arr1, arr2) {
    return [...new Set(arr1)].filter(item => arr2.indexOf(item) === -1)
  }