【金秋打卡】第16天Set参数及应用

一、课程名称：前端工程师2022版

二、课程章节：ES6语法扩展-Set和Map数据结构

三、课程讲师：Alex

四、课程内容

1、Set构造函数的参数

（1）数组

        const s = new Set([1,2,1]);

        console.log(s); //Set(2) {1, 2}

（2）字符串、arguments、NodeList、Set（Set实例）等

      //  字符串

      console.log(new Set("hi")); //Set(2) {'h', 'i'}

      //  arguments

      function func() {

        console.log(new Set(arguments)); //Set(2) {1, 2}

      }

      func(1, 2, 1);

      //NodeList

      console.log(new Set(document.querySelectorAll("p"))); //Set(3) {p, p, p}

      //Set

      const s = new Set([1, 2, 1]);

      console.log(s); //Set(2) {1, 2}

      console.log(new Set(s)); //Set(2) {1, 2}

      console.log(new Set(s)===s); //false

 

2、Set的注意事项

（1）判断重复的方式：Set对重复值的判断基本遵循严格相等（===），但是对于NaN的判断与（===）不同，Set中NaN等于NaN

        const s = new Set([NaN,2,NaN]);

        console.log(s); //Set(2) {NaN, 2}

        //判断对象是否相等，应当从地址出发，不是同一个地址，就算长得一样也可以添加

        const s = new Set();

        s.add({}).add({});

        console.log(s);   //Set(2) {{…}, {…}}

（2）什么时候使用Set（后两种使用数组或Set都是可以的，只是建议使用Set）

①当需要对数组或字符串去重时

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

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

3、Set的应用（重要）

（1）数组去重

      // 数组去重

      // [1,2,1]

      const s = new Set([1, 2, 1]);

      console.log(s);

      // 把Set转换为数组

      // 方法1：使用forEach

      // 方法2：只需要在数组中使用展开运算符

      //   console.log(...s); //1 2

      console.log([...s]); //(2) [1, 2]

     //  数组去重一步到位

      console.log([...new Set([1, 2, 1])]); //(2) [1, 2]

（2）字符串去重

       // 字符串去重 

      const s = new Set("abbacbd");

      console.log([...s].join(''));

      //  字符串去重一步到位

      console.log([...new Set("abbacbd")].join("")); //abcd

（3）存放DOM元素

      // 存放DOM元素

      // console.log(document.querySelectorAll('p'));

      // 以前的做法：使用for()循环

      const s = new Set(document.querySelectorAll("p"));

      console.log(s);

      s.forEach(function (elem) {

        elem.style.color = "red";

        elem.style.backgroundColor = "yellow";

      })

五、课程心得

今天学习了Set的参数、使用时的注意事项以及Set的应用，对Set相关知识的理解更加清晰，还再次对现今所学的去重知识进行了回顾，继续加油！