ES6——数组扩展之Set数组

在ES6(ECMAScript 2015)中,JavaScript的Set对象提供了一种存储任何值唯一性的方式,类似于数组但又不需要索引访问。这对于需要确保元素唯一性的场景非常有用。Set对象本身并不直接提供数组那样的方法来操作数据(例如mapfilterreduce等),但是可以通过将Set转换成数组来实现这些操作。下面是一些常用的数组方法及其在Set上的应用方式:

方法描述

Set

Set转换成数组

map()

Set中的每个元素应用一个函数,可以将Set转换为数组后使用map()方法。

filter()

使用filter()方法可以筛选出满足条件的元素。

reduce()

reduce()方法可以用来将Set中的元素组合起来,例如求和。

find() 、 findIndex()

虽然原生Set没有直接提供这些方法,但可以通过转换为数组来使用。

some() 、 every()

这些方法可以用来检查Set中的元素是否满足特定条件。

使用场景和示例代码: 

1. 将Set转换为数组

const set = new Set([1, 2, 3, 4]);// 使用扩展运算符
const array1 = [...set];// 使用Array.from()
const array2 = Array.from(set);

2. map() 方法

const set = new Set([1, 2, 3, 4]);
const mappedArray = Array.from(set).map(x => x * 2);
console.log(mappedArray); // [2, 4, 6, 8]

3. filter() 方法

const set = new Set([1, 2, 3, 4, 5]);
const filteredArray = Array.from(set).filter(x => x > 3);
console.log(filteredArray); // [4, 5]

4. reduce() 方法

const set = new Set([1, 2, 3, 4]);
const sum = Array.from(set).reduce((acc, current) => acc + current, 0);
console.log(sum); // 10

5. find() 和 findIndex() 方法

const set = new Set(['apple', 'banana', 'cherry']);
const foundItem = Array.from(set).find(item => item === 'banana');
console.log(foundItem); // 'banana'

6. some() 和 every() 方法

const set = new Set([1, 2, 3, 4]);
const hasEven = Array.from(set).some(x => x % 2 === 0); // 检查是否有偶数
console.log(hasEven); // true

补充

数组去重:
var arr = [1,1,2,2,3,3,1,4,4];
[...new Set(arr)]; // [1, 2, 3, 4]
Array.from(new Set(arr)); // [1, 2, 3, 4]
[...new Set('abababcd')].join(''); // "abcd" 可以字符串去重
new Set(('Hello world').split(' ')); //["Hello","world"]

数组交集:

var a = new Set([1, 2, 3, 4]);
var b = new Set([4, 3, 2, 5]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3, 4}

数组并集:

var a = new Set([1, 2, 3, 4]);
var b = new Set([4, 3, 2, 5]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4, 5}

数组差集:

var a = new Set([1, 2, 3, 4]);
var b = new Set([4, 3, 2, 5]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1, 5}

小结:

[...new Set()]‌ 是一种在JavaScript中用于去重和展开集合的操作。具体来说,new Set() 创建一个新的 Set 对象,该对象存储的元素是唯一的,不会出现重复的值。通过使用扩展运算符(...),可以将 Set 对象中的元素展开成数组形式。

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

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

相关文章

日志收集工具-logstash

提示:Windows 环境下 安装部署 logstash 采集日志文件 文章目录 一、下载二、解压部署三、常用插件四、常用配置 Logstash 服务器数据处理管道,能够从多个来源采集数据,转换数据,然后将数据发送到您最喜欢的存储库中。Logstash 没…

6个月Python学习计划 Day 21 - Python 学习前三周回顾总结

✅ 第一周:基础入门与流程控制(Day 1 - 7) “打地基”的一周,我们走完了从变量、输入输出、判断、循环到第一个小型系统的完整链路。 📘 学习重点: Python 基础语法:变量类型、字符串格式化、注…

Spring Boot SQL数据库功能详解

Spring Boot自动配置与数据源管理 数据源自动配置机制 当在Spring Boot项目中添加数据库驱动依赖(如org.postgresql:postgresql)后,应用启动时自动配置系统会尝试创建DataSource实现。开发者只需提供基础连接信息: 数据库URL格…

java每日精进 6.11【消息队列】

1.内存级Spring_Event 1.1 控制器层:StringTextController /*** 字符串文本管理控制器* 提供通过消息队列异步获取文本信息的接口*/ RestController RequestMapping("/api/string-text") public class StringTextController {Resourceprivate StringTex…

【凌智视觉模块】rv1106 部署 ppocrv4 检测模型 rknn 推理

PP-OCRv4 文本框检测 1. 模型介绍 如有需要可以前往我们的仓库进行查看 凌智视觉模块 PP-OCRv4在PP-OCRv3的基础上进一步升级。整体的框架图保持了与PP-OCRv3相同的pipeline,针对检测模型和识别模型进行了数据、网络结构、训练策略等多个模块的优化。 从算法改…

uniapp Vue2 获取电量的独家方法:绕过官方插件限制

在使用 uniapp 进行跨平台应用开发时,获取设备电量信息是一个常见的需求。然而,uniapp 官方提供的uni.getBatteryInfo方法存在一定的局限性,它不仅需要下载插件,而且目前仅支持 Vue3,这让使用 Vue2 进行开发的开发者陷…

Go语言中的if else控制语句

if else是Go语言中最基础也最常用的条件控制语句,用于根据条件执行不同的代码块。下面我将详细介绍Go语言中if else的各种用法和特性。 1. 基本语法 1.1. 最简单的if语句 if 条件表达式 {// 条件为true时执行的代码 } 示例: if x > 10 {fmt.Prin…

[Spring]-AOP

AOP场景 AOP: Aspect Oriented Programming (面向切面编程) OOP: Object Oriented Programming (面向对象编程) 场景设计 设计: 编写一个计算器接口和实现类,提供加减乘除四则运算 需求: 在加减乘除运算的时候需要记录操作日志(运算前参数、运算后结果)实现方案:…

Web3 借贷与清算机制全解析:链上金融的运行逻辑

Web3 借贷与清算机制全解析:链上金融的运行逻辑 超额抵押借款 例如,借款人用ETH为抵押借入DAI;借款人的ETH的价值一定是要超过DAI的价值;借款人可以任意自由的使用自己借出的DAI 稳定币 第一步:借款人需要去提供一定…

RK3588开发笔记-GNSS-RTK模块调试

目录 前言 一、什么是GNSS/RTK 二、硬件连接 三、内核配置 四、模块调试 五、ntripclient使用 总结 前言 在RK3588平台上集成高精度定位功能是许多工业级应用的需求。本文记录了我调试GNSS-RTK模块的全过程,包含硬件连接、驱动移植、数据解析和精度优化等关键环节,希望对…

Vue.js $emit的介绍和简单使用

前言 在 Vue.js 开发中,组件化是核心思想之一。但组件间的通信是一个重要课题,特别是子组件向父组件传递数据的场景。Vue 提供了多种通信方式,而$emit正是实现子→父通信的关键方法。本文将深入解析$emit的原理、使用场景及最佳实践。 一、$e…

【Linux 学习计划】-- 简易版shell编写

目录 思路 创建自己的命令行 获取用户命令 分割命令 检查是否是内建命令 cd命令实现 进程程序替换执行程序 总代码 结语 思路 int main() {while (1){// 1. 自己的命令行PrintCommandLine();// 2. 获取用户命令char command[SIZE];int n GetUserCommand(command, si…

一个完整的日志收集方案:Elasticsearch + Logstash + Kibana+Filebeat (二)

📄 本地 Windows 部署 Logstash 连接本地 Elasticsearch 指南 ✅ 目标 在本地 Windows 上安装并运行 Logstash配置 Logstash 将数据发送至本地 Elasticsearch测试数据采集与 ES 存储流程 🧰 前提条件 软件版本要求安装说明Java17Oracle JDK 下载 或 O…

Java使用Selenium反爬虫优化方案

当我们爬取大站的时候,就得需要对抗反爬虫机制的场景,因为项目要求使用Java和Selenium。Selenium通常用于模拟用户操作,但效率较低,所以需要我们结合其他技术来实现高效。 在 Java 中使用 Selenium 进行高效反爬虫对抗时&#xff…

状态管理方案对比与决策

1. 状态管理的基本概念 现代前端应用随着功能复杂度提升,状态管理已成为架构设计的核心挑战。状态管理本质上解决的是数据的存储、变更追踪和响应式更新问题,以确保UI与底层数据保持同步。 核心挑战: 状态共享与组件通信可预测的状态变更性能优化与重…

Fetch与Axios:区别、联系、优缺点及使用差异

Fetch与Axios:区别、联系、优缺点及使用差异 文章目录 Fetch与Axios:区别、联系、优缺点及使用差异一、联系二、区别1. 浏览器支持与兼容性2. 响应处理3. 请求拦截和响应拦截4. 错误处理 三、优缺点1. Fetch API优点缺点 2. Axios优点缺点 四、使用上的差…

【Docker】快速入门与项目部署实战

我们在部署一个项目时,会出现一系列问题比如: 命令太多了,记不住软件安装包名字复杂,不知道去哪里找安装和部署步骤复杂,容易出错 其实上述问题不仅仅是新手,即便是运维在安装、部署的时候一样会觉得麻烦…

Java面试题尚硅谷版第1季

1、写出如下代码运行结果 1.1、 使用局部变量表和操作数栈解题 1.2、使用前置和后置递增解题 2、写一个单例模式 2.1、考察知识点 2.2、单例模式实现 3、类加载和初始化顺序 package classload;public class Father {private int i test();private static int j method();st…

关于Qt阻断样式继承的解决办法

引言 在使用 Qt 开发桌面应用时,借助样式表(StyleSheet)来统一定义界面风格是非常常见的做法。通常,你会在主程序中通过 qApp->setStyleSheet(...) 或者直接给某个父控件设置样式表,让所有的子控件都采用相同的配色…

鼠标右键添加新建某种文件的方法

场景 我经常用到.emmx,.eddx文件,电脑上装的是wpsX亿图(因为有wps会员),没有开亿图会员。 然后问题就是,思维导图和流程图我都能正常开,正常编辑,但鼠标右键没有新建这两个文件的按…