ES6之Set集合(通俗易懂,含实践)

Set是什么?它的方法有哪些?它在实例开发中有什么作用?
让我为大家介绍一下吧!
ES6提供了新的数据结构 Set(集合) 。它类似于数组,但成员的值是唯一的。

创建方法:

    let s = new Set()console.log(s)

在这里插入图片描述
它属于什么类型?

    console.log(typeof s) //object

我们通常在set中写入数组

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])console.log(s)

在这里插入图片描述
由此可见,set 可以自动帮我们去重

Set 对象的几个常用方法和属性

1.size
可以获取元素的个数

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])console.log(s.size) //4 

2.add( )
向 Set 添加新元素

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])s.add("四大名著")console.log(s) 

在这里插入图片描述
3.delete( )
删除由其值指定的元素

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])s.add("四大名著")s.delete("四大名著")console.log(s) 

在这里插入图片描述
4.has( )
如果值存在则返回 true,否则false

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])console.log(s.has("西游记")) //trueconsole.log(s.has("四大名著")) //false

5.clear( )
清空

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])s.clear()console.log(s)

在这里插入图片描述

6.我们可以使用for…of遍历

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])for(let v of s) {console.log(v)}

在这里插入图片描述
7.keys( )

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])console.log(s.keys())

在这里插入图片描述
8.forEach( )
为每个元素调用回调

    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])s.forEach(item=>{console.log(item)})

在这里插入图片描述

实践

1.数组去重

    let arr = [1, 2, 3, 3, 2, 1, 4, 5, 1]let result = [...new Set(arr)]console.log(result)

在这里插入图片描述

2.交集

    let result = [...new Set(arr1)].filter(item=>new Set(arr2).has(item)// {//     // 把arr2也变成一个集合//     let s2 = new Set(arr2)//     // 判断arr2里是否有arr1里的元素//     if(s2.has(item)){//         return true//     }else {//         return false//     }// }) )console.log(result)

在这里插入图片描述

3.并集

    let arr1 = [1, 2, 3, 3, 2, 1, 4, 5, 1]let arr2 = [1,2,3,3,2,4]let result = [...new Set([...arr1,...arr2])]console.log(result)

在这里插入图片描述

4.差集

    let arr1 = [1, 2, 3, 3, 2, 1, 4, 5, 1]let arr2 = [1,2,3,3,2,4]// 取反let result = [...new Set(arr1)].filter(item=>!(new Set(arr2).has(item)))console.log(result);

在这里插入图片描述
感谢大家的阅读,如有不对的地方,可以向我指出,感谢大家!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/117760.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一套成熟的ERP系统,应具备哪些能力?

随着制造业数字化、智能化的不断升级,企业的金字塔静态管理模式也在向扁平化动态管理模式转变,而企业管理系统则是推动这一趋势发展的重要载体。 为了更好地实现企业管理信息化,越来越多的企业在应用ERP系统。ERP对企业经营起着至关重要的辅…

计时的vue写法

<el-input type"text" id"timetext" value"00时00分00秒" readonly></el-input> <el-button type"button" click"start()">开始</el-button> <el-button type"button" click"st…

el-input无法输入的问题和表单验证失败问题(亲测有效)-开发bug总结4

大部分无法输入的问题&#xff1a;基本都是没有进行v-model双向数据绑定&#xff0c;这个很好解决。 本人项目中遇到的bug问题如下&#xff1a; 点击添加&#xff0c;表单内可输入用户名 和 用户姓名&#xff0c;但有时会偶发出现无法这两个input框里面无法输入内容。 原因&a…

mariadb主主

服务器环境 ip1:10.10.0.11 ip2:10.10.0.12 1.分别导入配置文件 mkdir -p /data/mariadb/conf/ vim my.cnf [client] default-character-set utf8mb4[mysql] default-character-set utf8mb4[mysqld] lower_case_table_names1 wait_timeout1800 max_allowed_packet 512M …

常见排序算法之冒泡排序

冒泡排序&#xff0c;英文名Bubble Sort&#xff0c;是一种相对基础的 交换排序方法。这种排序算法的名字来源于它操作的过程&#xff0c;可以类比为数列中的每一个元素都可以像小气泡一样&#xff0c;根据自身的大小一点一点向数组的一侧移动。具体到冒泡排序的工作原理&#…

SSL证书:网络通信安全的基石

随着互联网的深入发展和电子商务的普及&#xff0c;网络安全问题变得越来越重要。SSL证书作为保障网络通信安全的重要组成部分&#xff0c;扮演着至关重要的角色。本文将深入剖析SSL证书的底层原理、作用、应用场景以及优缺点&#xff0c;帮助您更好地理解网络通信安全。 一、…

开启生成式AI的探索之旅,亚马逊云科技分享生成式AI热门案例

现今&#xff0c;生成式AI为企业争先讨论的热门话题&#xff0c;上云出海为企业转型的重中之重。无论你是行业新贵还是中小企业&#xff0c;探索新的模式、创新迭代业务都是不容忽视的重点&#xff0c;下面就来介绍几个亚马逊云科技帮助企业创新的案例。 开启生成式AI的探索之旅…

02333软件工程串讲

完整笔记在语雀 https://www.yuque.com/huangzhanqi/nrt1l4/zoa0g0osnrmog0xdhttps://www.yuque.com/huangzhanqi/nrt1l4/zoa0g0osnrmog0xd 《软件工程》串讲讲义 应考指导 一、课程介绍 1、课程性质 《软件工程》是全国高等教育自学考试计算机及应用&#xff08;独立本科…

曼哈顿距离

曼哈顿距离 以7*7为例 在d<n/2时&#xff1a;打印的图案为菱形 例题&#xff1a; 输入奇数n&#xff0c;显示n行星塔。若输入5&#xff0c;则显示 #include<stdio.h> #include<math.h> int main() {int n, i, j, x, y;scanf("%d", &n);x y n …

naive-ui的n-data-table标签奇特bug记录

具体参考之前的博文&#xff1a;vueday02——使用naive-ui做一个ACM看榜-CSDN博客 具体代码在这里面 原因&#xff1a;在本地运行的时候&#xff0c;datatable里面使用列表渲染成字符串前端设置样式进行转换&#xff0c;但是在正式部署的时候&#xff0c;这个组件没有将其自动…

8.JavaScript-注释

题记 javascript注释 单行注释 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>实例</title> </head> <body><h1 id"myH1"></h1> <p id"myP"></p>…

Kubernetes速成课程:掌握容器编排的精髓

微服务演进方向 • 面向分布式设计(Distribution):容器、微服务、API 驱动的开发; • 面向配置设计(Configuration):⼀个镜像&#xff0c;多个环境配置; • 面向韧性设计(Resistancy):故障容忍和自愈; • 面向弹性设计(Elasticity):弹性扩展和对环境变化(负载)做出响应; •…

Linux开机默认进入命令行或图形化模式

开机默认进入命令行 sudo systemctl set - default multi-user.target 执行上面命令后重新启动 reboot开机默认进入图形化界面 sudo systemctl set - default graphical.target 执行上面命令后重新启动 reboot或者 先进入root之后 su 在执行 systemctl set - default …

js回调函数

JavaScript回调函数是一种常见的编程概念&#xff0c;用于处理异步操作和事件处理。回调函数是一种函数&#xff0c;它作为参数传递给另一个函数&#xff0c;并且在某个特定的事件发生或异步操作完成时被调用。这允许您在需要时执行代码&#xff0c;而不必等待长时间运行的操作…

rust学习——操作字符串、字符串转义、操作UTF8-字符串 (操作中文字符串)

文章目录 操作字符串追加 (Push)插入 (Insert)替换 (Replace)1、replace2、replacen3、replace_range 删除 (Delete)1、 pop —— 删除并返回字符串的最后一个字符2、 remove —— 删除并返回字符串中指定位置的字符3、truncate —— 删除字符串中从指定位置开始到结尾的全部字…

【尘缘赠书活动:01期】Python数据挖掘——入门进阶与实用案例分析

引言 本案例将根据已收集到的电力数据&#xff0c;深度挖掘各电力设备的电流、电压和功率等情况&#xff0c;分析各电力设备的实际用电量&#xff0c;进而为电力公司制定电能能源策略提供一定的参考依据。更多详细内容请参考**《Python数据挖掘&#xff1a;入门进阶与实用案例…

CSS设置超出范围滚动条和滚动条样式

CSS设置超出范围滚动条和滚动条样式 效果展示 当块级内容区域超出块级元素范围的时候&#xff0c;就会以滚动条的形式展示&#xff0c;你可以滚动里面的内容&#xff0c;里面的内容不会超出块级区域范围。 未设置超出隐藏&#xff0c;显示滚动条 超出隐藏&#xff0c;显示滚动…

财报解读:双轮驱动下,香飘飘究竟能打开多大的获利空间?

2023年以来&#xff0c;食品饮料行业稳中求进&#xff0c;消费市场情绪逐步上扬。 数据显示&#xff0c;2023年上半年&#xff0c;食品饮料行业实现营收5338.86亿元&#xff0c;同比增长9.65%&#xff1b;归母净利润1125.03亿元&#xff0c;同比增长14.93%&#xff0c;营收和归…

开源博客项目Blog .NET Core源码学习(4:生成验证码)

开源博客项目Blog中的后台管理登录界面中支持输入验证码&#xff08;如下图所示&#xff09;&#xff0c;本文学习并记录项目中验证码的生成及调用方式。   博客项目中调用VerifyCode类生成验证码&#xff0c;该类位于App.Framwork项目中&#xff0c;命名空间为App.Framwork…

python实验13_科学计算

实验13&#xff1a;科学计算 文章目录 实验13&#xff1a;科学计算1.实验目标及要求2. 实验主要内容3. 心得体会 1.实验目标及要求 &#xff08;1&#xff09;掌握numpy库的常用方法。 &#xff08;2&#xff09;掌握使用matplotlib库的常用方法。 2. 实验主要内容 ① 利用…