关于JavaScript中Set的操作和应用

目录

  • JavaScript中Set的操作和应用
    • Set的基本操作
      • 创建Set
      • 添加元素
      • 删除元素
      • 判断元素是否存在
      • 获取Set的长度
      • 清空Set
    • Set的遍历
      • for...of循环
      • forEach方法
      • 转换成数组后遍历
      • 使用Set的entries方法遍历
    • Set的应用
      • 数组去重
      • 判断两个数组是否有重复元素
      • 实现并集、交集和差集
    • 总结

JavaScript中Set的操作和应用

Set是ES6中新增的一种数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,可以用来生成Set数据结构。

Set的基本操作

创建Set

可以通过以下两种方式来创建Set:

// 通过Set构造函数创建
const set1 = new Set([1, 2, 3]);
console.log(set1); // Set {1, 2, 3}// 直接创建一个空Set
const set2 = new Set();

添加元素

可以使用add方法向Set中添加元素:

const set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set); // Set {1, 2, 3}

删除元素

可以使用delete方法删除Set中的元素:

const set = new Set([1, 2, 3]);
set.delete(2);
console.log(set); // Set {1, 3}

判断元素是否存在

可以使用has方法判断Set中是否存在某个元素:

const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
console.log(set.has(4)); // false

获取Set的长度

可以使用size属性获取Set的长度:

const set = new Set([1, 2, 3]);
console.log(set.size); // 3

清空Set

可以使用clear方法清空Set中的所有元素:

const set = new Set([1, 2, 3]);
set.clear();
console.log(set); // Set {}

Set的遍历

Set有四种遍历方法,分别是:

for…of循环

const set = new Set([1, 2, 3]);
for (const item of set) {console.log(item);
}
// 1
// 2
// 3

forEach方法

const set = new Set([1, 2, 3]);
set.forEach(item => {console.log(item);
});
// 1
// 2
// 3

转换成数组后遍历

const set = new Set([1, 2, 3]);
const arr = [...set];
for (const item of arr) {console.log(item);
}
// 1
// 2
// 3

使用Set的entries方法遍历

const set = new Set([1, 2, 3]);
for (const [key, value] of set.entries()) {console.log(key, value);
}
// 1 1
// 2 2
// 3 3

Set的应用

数组去重

由于Set中元素的值都是唯一的,因此可以使用Set来实现数组去重:

const arr = [1, 2, 3, 2, 1];
const set = new Set(arr);
const newArr = [...set];
console.log(newArr); // [1, 2, 3]

判断两个数组是否有重复元素

可以将两个数组转换成Set,然后判断它们的交集是否为空:

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const set1 = new Set(arr1);
const set2 = new Set(arr2);
const intersection = new Set([...set1].filter(item => set2.has(item)));
console.log(intersection.size > 0); // true

实现并集、交集和差集

可以使用Set的方法来实现两个Set的并集、交集和差集:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);// 并集
const union = new Set([...set1, ...set2]);
console.log(union); // Set {1, 2, 3, 4}// 交集
const intersection = new Set([...set1].filter(item => set2.has(item)));
console.log(intersection); // Set {2, 3}// 差集
const difference = new Set([...set1].filter(item => !set2.has(item)));
console.log(difference); // Set {1}

总结

Set是ES6中新增的一种数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值。Set有基本的操作和遍历方法,还可以用来实现数组去重、判断两个数组是否有重复元素以及实现并集、交集和差集等操作。

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

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

相关文章

云和恩墨面试(部分)

一面 软件架构设计方案应该包含哪些内容,哪些维度 二面 架构师如何保证软件产品质量线程屏障(或者说线程栅栏)是什么,为什么要使用线程屏障事务传播⾏为为NESTED时,当内部事务发生异常时,外部事务会回滚吗?newBing:…

ThinkPHP 集成 jwt 技术 token 验证

ThinkPHP 集成 jwt 技术 token 验证 一、思路流程二、安装 firebase/php-jwt三、封装token类四、创建中间件,检验Token校验时效性五、配置路由中间件六、写几个测试方法,通过postman去验证 一、思路流程 客户端使用用户名和密码请求登录服务端收到请求&…

论文阅读 FCOS: Fully Convolutional One-Stage Object Detection

文章目录 FCOS: Fully Convolutional One-Stage Object DetectionAbstract1. Introduction2. Related Work3. Our Approach3.1. Fully Convolutional One-Stage Object Detector3.2. Multi-level Prediction with FPN for FCOS3.3. Center-ness for FCOS 4. Experiments4.1. Ab…

字符串匹配的Rabin–Karp算法

leetcode-28 实现strStr() 更熟悉的字符串匹配算法可能是KMP算法, 但在Golang中,使用的是Rabin–Karp算法 一般中文译作 拉宾-卡普算法,由迈克尔拉宾与理查德卡普于1987年提出 “ 要在一段文本中找出单个模式串的一个匹配,此算法具有线性时间的平均复杂度&#xff0…

Elasticsearch 高级搜索技巧和最佳实践

Elasticsearch 高级搜索技巧和最佳实践 Elasticsearch 是一个开源的分布式搜索和分析引擎,它支持实时地存储、搜索和分析大规模数据。它被广泛应用于各行各业,用于构建高性能的搜索引擎、日志分析系统、电子商务推荐系统等。 本文将介…

【LeetCode-中等题】230. 二叉搜索树中第K小的元素

文章目录 题目方法一:层序遍历 集合排序方法二:中序遍历(栈 或者 递归 )方法三(方法二改进):中序遍历(栈 ) 题目 该题最大的特点就是这个树是二叉树: 所以…

【java中的Set集合】HashSet、LinkedHashSet、TreeSet(最通俗易懂版!!)

目录 一、HashSet集合 1.HashSet集合的特点 2.HashSet常用方法 二、LinkedHashSet集合 LinkedHashSet集合的特点 三、TreeSet集合 1.TreeSet集合的特点 2.TreeSet的基本使用 四、HashSet、LinkedHashSet、TreeSet的使用场景 五、list和set集合的区别 一、HashSet集合 …

go中的函数

demo1:函数的几种定义方式 package mainimport ("errors""fmt" )/* 函数的用法 跟其他语言的区别:支持多个返回值*///函数定义方法1 func add(a, b int) int {return a b }//函数定义方法2 func add2(a, b int) (sun int) {sun a breturn s…

数据库面试题分享(一)

文章目录 请简述数据库三大范式 ? 简述什么是SQL Server ? MySQL 如何优化SQL查询语句?重点 简述优化MySQL数据库的方法?重点 MySQL数据库,一天五万条以上的增量,预计运维三年怎么优化? 解释为什么Oracle type4驱动被称作瘦驱动? 如何理解数据库表设计的时候字段…

网页接口导入postman进行接口请求

postman版本:v10.17.4 一、拷贝接口信息 网页打开开发者工具-networkk,在网页上请求一次接口,鼠标指在接口上,点击鼠标右键-copy-copy as cURL(bash) 二、导入postman 打开postman,点击import-Raw text,…

YOLOv5、YOLOv7 注意力机制改进SEAM、MultiSEAM、TripletAttention

用于学习记录 文章目录 前言一、SEAM、MultiSEAM1.1 models/common.py1.2 models/yolo.py1.3 models/SEAM.yaml1.4 models/MultiSEAM.yaml1.5 SEAM 训练结果图1.6 MultiSEAM 训练结果图二、TripletAttention2.1 models/common.py2.2 models/yolo.py2.3 yolov7/cfg/training/Tri…

Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421

文章目录 0.前言1.参考文档2.基础介绍3.漏洞利用原理3.解决方案1. 升级Spring Boot版本2. 限制端点的访问3. 禁用环境端点4. 不公开敏感的Actuator端点5. 开启安全审计 0.前言 背景: Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421。被扫描到…

三维数据的显示及 L0D 模型

三维显示通常采用截面图、等距平面、多层平面和立体块状图等多种表现形 式,大多数三维显示技术局限于 CRT 屏幕和绘图纸的二维表现形式,人们可以观 察到地理现象的三维形状,但不能将它们作为离散的实体进行分析,如立体不能被 测…

【C51基础实验 LED闪烁】

51单片机项目基础篇 LED闪烁1、硬件电路设计和原理分析2、软件设计2.1、功能实现:LED闪烁2.2、通过 KEIL 软件自带仿真查看延时时间 4、编译结果5、结束语 LED闪烁 前言: 前一篇学会了点亮一颗LED以及驱动原理,那么这篇紧接着就来解锁LED的新…

【业务功能篇90】微服务-springcloud-检索服务-ElasticSearch实战运用-DSL语句

商城检索服务 1.检索页面的搭建 商品检索页面我们放在search服务中处理&#xff0c;首页我们需要在mall-search服务中支持Thymeleaf。添加对应的依赖 <!-- 添加Thymeleaf的依赖 --><dependency><groupId>org.springframework.boot</groupId><artifa…

Nginx 通过userAgent判断是否时搜索引擎蜘蛛

Nginx配置如下 #爬虫转发if ($http_user_agent ~* "(Baiduspider|baiduspider|Baiduspider-render|bcebos-spider-1.0|baiduboxapp|360Spider|Sogou|Sogou web spider|Yisouspider|Googlebot|yahoo|ToutiaoSpider|bytespider|bingbot|YandexBot)") {rewrite ^/(.)/(.…

服务器安装 anaconda 及 conda: command not found [解决方案]

[解决方案] conda: command not found Anaconda3 安装conda: command not found Anaconda3 安装 由于连接的服务器&#xff0c;无法直接在anaconda官网上下载安装文件&#xff0c;所以使用如下方法&#xff1a; wget https://repo.anaconda.com/archive/Anaconda3-2023.03-Li…

(笔记二)利用opencv调用鼠标事件在图像上绘制图形

目录 &#xff08;1&#xff09;查看cv2所支持的鼠标事件&#xff08;2&#xff09;通过鼠标事件在图像上做标记&#xff08;3&#xff09;高级操作&#xff1a;通过移动鼠标在图像绘制图形、曲线 该功能主要创建一个鼠标事件发生时执行的回调函数。鼠标事件可以是任何与鼠标有…

根据身高重建队列【贪心算法】

根据身高重建队列 假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &#xff0c;前面 正好 有 ki 个身高大于或等于 hi 的人。 请你重新构造并返…

SQL注入漏洞复现(CVE-2017-8917)

文章目录 搭建环境启动环境漏洞复现报错注入使用sqlmap 前提条件&#xff1a; 1.安装docker docker pull medicean/vulapps:j_joomla_22.安装docker-compose docker run -d -p 8000:80 medicean/vulapps:j_joomla_23.下载vulhub Docker Compose是 docker 提供的一个命令行工具&…