【金秋打卡】第16天Set参数及应用
2022/11/9 4:24:07
本文主要是介绍【金秋打卡】第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相关知识的理解更加清晰,还再次对现今所学的去重知识进行了回顾,继续加油!
这篇关于【金秋打卡】第16天Set参数及应用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性
- 2024-05-29哪些无用敏捷指标正在破坏敏捷转型?
- 2024-05-29鸿蒙原生应用再新丁!新华社 入局鸿蒙
- 2024-05-29设计模式 之 迭代器模式(Iterator)