es6--set

 Set（重点）

a.Set是什么

• Set是一系列无序、唯一值、没有重复值的数据集合
• Set没有下标去标示每一个值，因此Set是无序的，也不能像数组那样通过下标去访问Set的成员
• Set只能通过构造函数的形式创建
• 本身是一个构造函数，用来生成 Set 数据结构

示例：

 <script>
        const set = new Set();
        set.add(1);
        set.add(1);
        set.add(2);
        console.log(set[0]);
        console.log(set);
</script>

b.Set实例的方法和属性

Set 实例的属性和方法 Set 结构的实例有以下属性：

Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）

下面先介绍四个操作方法

Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear()：清除所有成员，没有返回值。

 方法：

 add();--添加成员

         <script>

        const set = new Set();

        set.add(1).add(5).add(8);

        console.log(set);

        </script>

去除数组的重复成员，

[...new Set('ababbc')].join('')
// "abc"

向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值

Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身

has()--判断是否包含某一成员

         <script>

        const set = new Set();

        set.add(1).add(5).add(8);

        console.log(set.has(5));

        </script>

delete()--删除指定成员

 使用delete删除不存在的成员时，什么也不会发生，也不会报错

        <script>

        const set = new Set();

        set.add(1).add(5).add(8);

        console.log(set.delete(5));

         console.log(set.delete(2));

        </script>

clear()--删除所有成员

        <script>

        const set = new Set();

        set.add(1).add(5).add(8);

        console.log(set.clear());

        </script>

遍历操作：

Set 结构的实例有四个遍历方法，可以用于遍历成员。

Set.prototype.keys()：返回键名的遍历器
Set.prototype.values()：返回键值的遍历器
Set.prototype.entries()：返回键值对的遍历器
Set.prototype.forEach()：使用回调函数遍历每个成员
需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。

 forEach(value,key,set)--遍历成员，按照成员添加进集合的顺序遍历

Set中的value=key，这里的set指的是set本身
 示例1：

<script>
        const set = new Set();

        set.add(1).add(5).add(8);

        set.forEach(function(value, key, set) {

            console.log(value, key, set);

            console.log(set === set);

            console.log(this); //非严格模式下指向window

        }, document); //改变this指向
</script>

示例2：

 <script>
        const set = new Set();

        set.add(1).add(5).add(8);

        set.forEach(setResult = (value, key, set) => {

            console.log(value, key, set);

            console.log(set === set);

            console.log(this); //非严格模式下指向window

        }, document); //改变this指向后还是指向window
</script>

       

属性

size属性，类似于数组的length属性

  <script>

        const set = new Set();

        set.add(1).add(5).add(8);

        console.log(set.size);

</script>

 c.Set构造函数的参数

数组（常用的）

 <script>
        const s = new Set([1, 4, 7, 7, 8, 7]);

        console.log(s);
</script>

  

       

字符串、arguments、NodeList、Set等

 <p>1</p>
    <p>2</p>
    <p>3</p>

 <script>
        console.log(new Set('jack'));

        function func() {
            console.log(new Set(arguments));
        }
        func(7, 8, 9, 7, 4, 1, 1);

        console.log(new Set(document.querySelectorAll('p')));

        const s1 = new Set([1, 2, 4, 1]);
        console.log(new Set(s1));
        console.log(s1); //其实就是复制
        console.log(new Set(s1) === s1);
</script>

d.Set的注意事项

如何判断重复值

 Set对重复值的判断基本遵循严格相等(===)，但是对于NaN的判断与===不同，Set中NaN等于NaN
   

<script>
        const set = new Set([1, 2, 3, 4, 1]);

        set.add({}).add({});

        console.log(set);

        console.log({} === {});


        // const s = new Set(NaN, 2, NaN)

        console.log(1 === 1);

        // console.log(NaN === NaN);
</script>

Array.from方法可以将 Set 结构转为数组：

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

这就提供了去除数组重复成员的另一种方法

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]

什么时候可以使用Set

        数组或字符串去重时

        不需要通过下标去访问，只需遍历时

        为了使用Set提供的方法和属性时(add() delete() clear() has forEach() size等)

e.Set的应用

示例1：

<script>
        // 数组去重
        const s = new Set([1, 2, 3, 1]);
        console.log(s);
        console.log(...s);
        console.log([...s]);
</script>

示例2：

 <script>
        // 字符串去重
        const s = new Set('jackoane');
        console.log([...s].join(''));
</script>

示例3：

<p>1</p>
    <p>2</p>
    <p>3</p>

<script>
        // 存放DOM元素
        const s = new Set(document.querySelectorAll('p'));
        console.log(s);
        s.forEach(resultSet = (elem) => {
            elem.style.color = '#f40';
            elem.style.backgroundColor = 'yellow';
        })
</script>