Set的数据结构，非常详细！！！

1、什么是Set

   Set是一系列无序，没有重复值的是数据集合；

let s = new Set();
let arr = [1, 2, 3];
console.log(s); // Set(0) {1, 2, 3}
console.log(arr); // [1, 2, 3]

2、Set实例的方法和属性

    ①、add方法

• 用于向Set数据中添加成员

  • let s = new Set();
    s.add('a');
    console.log(s) // {'a'}
    // add()方法可以连写
    s.add('b').add('c').add('d');
    console.log(a); // ['a', 'b', 'c', 'd']

    ②、has方法

• 用来判断Set数据中是否含有指定成员，返回值是布尔值；

• s.has(val) ，这是val参数是Set数据结构中的成员，如果是，则返回true，如果不是则返回false；

  • x let s = new Set();
    s.add('a');
    s.add('b').add('c').add('d');
    console.log(s.has('c')); // true
    console.log(s.has(0)); // false

  ③、delete方法

• 用来删除Set数据结构中的成员；

• s.delete(val) ，这个val参数也是Set数据结构中的成员；

  • x let s = new Set();
    s.add('a');
    s.add('b').add('c').add('d');
    s.delete('b');
    console.log(s) // ['a', 'c', 'd']

   ④、clear方法  

•  用来清除Set数据结构中所有成员

  • let s = new Set();
    s.add('a');
    s.add('b').add('c').add('d');
    s.clear();
    console.log(s); // {size: 0}

   ⑤、forEach方法

• 作用：用于遍历Set；
• forEach 方法可以接收两个参数，第一个是：回调函数，第二个是：指定回调函数的this指向；

  • 回调函数会接收三个参数，第一个和第二个都是Set结构的成员，第三个表示Set结构本身；

  • let s = new Set();
    s.add('a').add('b').add('c').add('d');
    s.forEach(function(value, key, set) {
        console.log(value); // a b c d
        console.log(this); // document document document document 
    },document);

  • 在这里的this指向，默认值是window

   ⑥、size属性

• size ：用来代表Set数据结构的长度；

  • let s = new Set();
    console.log(s.size);
    s.add('a').add('b');
    console.log(s.size); // 2

3、Set构造函数的参数

• 数组

• 字符串、arguments、NodeList、Set等;

 ①、数组

let s = new Set(['a', 'b', 'c', 'd']);
console.log(s); // {'a', 'b', 'c', 'd'} 

②、字符串

let s = new Set('hello');
console.log(s); // {'h', 'e', 'l', 'o'}
console.log(s.size); // 4

③、arguments

function fn() {
    console.log(new Set(arguments));
}
function fn(...a) {
    console.log(new Set([...a]));
}
fn('a', 'b', 'c') // {'a', 'b', 'c'}

④、NodeList

let div = document.querySelector('div');
let last = div[div.length - 1].cloneNode();
document.body.appendChild(last);
div = document.querySelector('div'); 
console.log(div); // {div, div, div, div, div}
let s = new Set(div);
console.log(s); // {div, div, div, div, div}

⑤、Set

let s1=new Set([1, 2, 1]);
let s2=new Set(s1);
console.log(s1); // {1, 2}
console.log(s2); //{1, 2}
console.log(s1 == s2); // false

4、Set注意事项

①、Set如何判断重复

• Set对重复值的判断基本遵循严格相等（===）;

• 但是对于NaN的判断与 === 不同，Set中NaN等于NaN；

  • let s = new Set();
    s.add(NaN).add(NaN);
    console.log(s); // {NaN}
    s.add({}).add({});
    console.log(s); // {NaN {...} {...}}
    console.log({} == {}); // false

 ②、什麽時候使用Set

• 数组或字符串需要去重时；

• 不要通过下标访问；

• 为了使用Set提供的方法和属性时；

5、Set的应用

  ①、数组去重

• let arr = [1, 2, 1, 3, 2, 4, 6, 8, 8];
  arr = Array.from(new Set(arr));
  arr = [...new Set(arr)];
  console.log(arr);

 ②、字符串去重

• let str = 'hello world';
  str = [...new Set(str)].join('');
  console.log(str); // helo wrd

 ③、DOM元素

• let divs = new Set(document.querySelector('div'));
  divs.forEach(item => {
      item.style.color = 'skyblue';
  })

 ④、遍历

• 数组的map方法和filter 方法可以间接用于Set

  • let s = new Set([1, 2, 3, 4, 5]);
    s = new Set([...s].map(x => x * 2));
    s = new Set([...s].map(function (x) {
        return x * 2
    }))
    console.log(s); // {2, 4, 6, 8, 10}
    
    let s = new Set([ 1, 2, 3, 4, 5]);
    s = new Set([...s].filter(x => x % 2 == 0));
    console.log(s); // {2, 4}

•  使用Set很容易实现并集、交集、差集；

  • let s1=new Set([1,2,3]);
    let s2=new Set([2,3,4]);
    
    //并集
    let res1=new Set([...s1,...s2]);
    console.log(res1);
    
    //交集
    let res2=new Set([...s1].filter(x=>s2.has(x)));
    console.log(res2); // {2, 3}
    
    //差集
    let res3=new Set([...s1].filter(x=>s2.has(x)));
    console.log(res3); // {1}