Set数据结构
- 属性：
- 方法：
一、实例剖析
二、遍历的应用
三、set实例属性和方法
- 1、size属性
- 2、操作方法add()、delete()、has()、clear()
3、遍历方法keys()、values()、entries()、forEach()

Set数据结构

属性：

size：返回set实例的成员总数

方法：
add()：添加某个值，返回set本身
delete()：删除某个值，返回一个布尔值，判断删除是否成功
has()：返回一个布尔值，表示该值是否为set成员
clear()：清除所有成员，没有返回值
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器

forEach()：使用回调函数遍历每个成员

一、实例剖析

为了方便大家更好的了解和学习set，我在这里会将这些方法和属性进行分类整理和讲解

1、set的基本用法

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>数组去重</title>
  </head>
  <body>
      <script type="text/javascript">
          const set=new Set();    //创建set数据结构
          [1,1,2,3,4,5].forEach(x=>{
              set.add(x);
          })
          console.log(set);    //1,2,3,4,5
          for(let i of set){
              console.log(i);
          }
      </script>
  </body>
</html>

set详解 - 图1
可以看到向Set添加成员时，不会添加重复的值

2、数组作为参数传入到set结构中

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
  </head>
  <body>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <script type="text/javascript">
//            const set=new Set([1,2,3]);
//            console.log(...set);//1,2,3,使用扩展运算符
          const set=new Set(document.querySelectorAll('div'));
          console.log(set.size);//5 size返回set实例的成员总数
          //如上代码相当于
          const item=new Set();
          document.querySelectorAll('div').forEach(x=>{
              item.add(x);
          })
          console.log(item);
          console.log(item.size);//5
      </script>
  </body>
</html>

3、set中添加的值不会发生类型转换

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>向set中添加成员时，不会发生类型转换</title>
  </head>
  <body>
      <script type="text/javascript">
          let mySet=new Set();
          mySet.add(5);
          mySet.add('5');
          console.log(mySet);//5,'5'
          let set=new Set();
          let a=NaN;
          let b=NaN;
          set.add(a);
          set.add(b);
          console.log(set);//NaN
      </script>
  </body>
</html>

向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符(===)，主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。

4、set中添加的对象总是不想等的

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>向set中添加的对象总是不想等</title>
  </head>
  <body>
      <script type="text/javascript">
          let set=new Set();
          set.add({});//向set中添加一个空对象
          console.log(set.size);//1
          set.add({});//向set中添加另一个空对象
          console.log(set.size);//2
      </script>
  </body>
</html>

由于两个空对象不相等，所以它们被视为两个值

5、Array.from()方法

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

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>Array.from()方法</title>
  </head>
  <body>
      <script type="text/javascript">
          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
      </script>
  </body>
</html>

二、遍历的应用

1、数组去重

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>数组去重</title>
  </head>
  <body>
      <script type="text/javascript">
          let set=new Set(['red','blue','green']);
          let arr=[...set];
          console.log(arr);//red,blue,green
          //数组去重
          let arrs=[1,1,3,3,4,5,6];
          let unique=[...new Set(arrs)];
          console.log(unique);//1,3,4,5,6
      </script>
  </body>
</html>

2、间接使用数组的方法

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>间接使用数组的方法</title>
  </head>
  <body>
      <script type="text/javascript">
          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
      </script>
  </body>
</html>

3、实现并集，交集，差集

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>实现并集，交集，差集</title>
  </head>
  <body>
      <script type="text/javascript">
          let a=new Set([1,2,3]);
          let b=new Set([4,3,2]);
          //并集
          let union=new Set([...a, ...b]);
          console.log(union);//1,2,3,4
          //交集
          let intersect=new Set([...a].filter(x=>b.has(x)));
          console.log(intersect);//2,3
          //差集
          let difference=new Set([...a].filter(x=>!b.has(x)));
          console.log(difference);//1
      </script>
  </body>
</html>

4、同步改变原来的 Set 结构

如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；另一种是利用Array.from方法。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>同步改变原来的 Set 结构</title>
  </head>
  <body>
      <script type="text/javascript">
          //方法一
          let set=new Set([1,2,3]);
          set=new Set([...set].map(val=>val*2));
          console.log(set);//2,4,6
          //方法二
          let mySet=new Set([1,2,3]);
          mySet=new Set(Array.from(mySet,val=>val*2));
          console.log(mySet);//2,4,6
      </script>
  </body>
</html>

三、set实例属性和方法

1、size属性

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>set中的size属性</title>
  </head>
  <body>
      <script type="text/javascript">
          const set=new Set();
          //向set中添加成员
          set.add(1);
          set.add(2);
          set.add(3);
          //链式方法
          set.add(4).add(5).add(6);
          console.log(set.size);//6
      </script>
  </body>
</html>

2、操作方法add()、delete()、has()、clear()

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>set中的操作方法add()、delete()、has()、clear()</title>
  </head>
  <body>
      <script type="text/javascript">
          const set=new Set();
          //向set中添加成员
          set.add(1);
          set.add(2);
          set.add(3);
          //链式方法
          set.add(4).add(5).add(6);
          console.log(set.size);//6
          console.log(set.has(1));//true
          set.delete(1);
          console.log(set.has(1));//false
          set.clear();//清空全部set成员
          console.log(set.size);//0
      </script>
  </body>
</html>

3、遍历方法keys()、values()、entries()、forEach()

注意：set的遍历顺序就是插入顺序，由于set没有键名，只有键值(或者说键名和键值是同一个值)，所以keys()和values()方法的行为完全一致

set详解