Java教程

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

本文主要是介绍【金秋打卡】第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

 https://img4.sycdn.imooc.com/63685b6e0001c70304200237.jpg

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相关知识的理解更加清晰,还再次对现今所学的去重知识进行了回顾,继续加油!


这篇关于【金秋打卡】第16天Set参数及应用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!