new Set( )的基本使用以及如何去重对象数组

目录

Set 对象方法

Set 对象作用

实现数组的去重

实现字符串的去重 

实现并集 · 交集 · 差集

实现去重对象数组

相关参考资料


  

在 ES6 中,引入了一个新的数据结构类型:Set。而 Set 与 Array 的结构是很类似的,且 Set 和 Array 可以相互进行转换 ——使用 Array.from(new Set( ))转为new Set( )数据结构为数组

Set 对象允许你存储任何类型的唯一值(Set 对象存储的值总是唯一的),无论是原始值或者是对象引用。

Set 对象方法

方法描述
add添加某个值,返回Set对象本身。
clear删除所有的键/值对,没有返回值。
delete删除某个键,返回true。如果删除失败,返回false。
forEach对每个元素执行指定操作。
has返回一个布尔值,表示某个键是否在当前 Set 对象之中。

Set 对象作用

实现数组的去重

// 操作数组
var arr = [1, 2, 3, 3, 1, 4];
Array.from(new Set(arr)); // [1, 2, 3, 4]
[...new Set(arr)]; // [1, 2, 3, 4]

实现字符串的去重 

// 操作字符串
new Set('ice doughnut'); // Set(11) {"i", "c", "e", " ", "d", …}
[...new Set('ababbc')].join(''); // "abc" 字符串去重

注:... ES6扩展运算符  

实现并集 · 交集 · 差集

Set 是如此强大,因此,使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。 

并集

并集:以属于A或属于B的元素为元素的集合成为A与B的并(集)

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

交集

交集: 以属于A且属于B的元素为元素的集合成为A与B的交(集)

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

差集

差集:以属于A而不属于B的元素为元素的集合成为A与B的差(集)

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

实现去重对象数组

方法一:使用Map数据结构,当然这就跟Set就没有关系了

Map是一组键值对的结构,用于解决以往不能用对象做为键的问题,具有极快的查找速度。(注:函数、对象、基本类型都可以作为键或值。

参考:ES6中的Map数据结构 | Map 和 Set 的特点和区别

const ary = [{id: 1, text: "1"}, {id: 1, text: "1"}, {id: 2, text: "2"}, {id: 3, text: "3"}];

const myseta = (ary) => {
  const map = new Map();
  return ary.filter((ary) => !map.has(ary.id) && map.set(ary.id, 1))
};

console.log(myseta(ary)); // [{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}]

方法二:JSON.stringify + new Set( ) + Array.from() + JSON.parse

使用Set数据结构去除重复对象,必须把对象转为string字符串形式,才可以实现对象去重,所以需要new Set(strings)进行转型。new Set去重对象 - 简书

因为Set数据结构并非真正的数组,它类似于数组,并且成员值都是唯一的,没有重复,所以可以用来做去重操作。但是因为它是一个类似数组结构,所以需要转型为真正的数组去使用。所以,需要用Array.from

const ary = [{id: 1, text: "1"}, {id: 1, text: "1"}, {id: 2, text: "2"}, {id: 3, text: "3"}];
const myseta = (ary) => {
  const strings = ary.map((item) => JSON.stringify(item))
  // 使用Set数据结构去重对象
  // return new Set(strings)

  // 使用Array.from()把Set数据结构去重对象后的结构,转为数组
  // return Array.from(new Set(strings))

  // 使用Array.from()转为数组,然后再使用数组的map方法把数组里面的字符串类型转化为对象类型:
  return Array.from(new Set(strings)).map((item) => JSON.parse(item))

};

// console.log(myseta(ary)); // Set(3) {'{"id":1,"text":"1"}', '{"id":2,"text":"2"}', '{"id":3,"text":"3"}'}
// console.log(myseta(ary)); // ['{"id":1,"text":"1"}', '{"id":2,"text":"2"}', '{"id":3,"text":"3"}']
console.log(myseta(ary)); // [{"id":1,"text":"1"}', '{"id":2,"text":"2"}', '{"id":3,"text":"3"}]

番外:JavaScript Array map() 方法

定义和用法

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。


相关参考资料

new Set去重对象数组 - 简书 | Map 和 Set 的特点和区别 

JS中的Map数据结构 | new Set()的基础用法

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL学习——创建MySQL Workbench中的Connections

在MySQL Workbench中,Connections(连接)是用户与MySQL数据库进行交互的桥梁。 本文将添加一个新连接,该连接可以是初始连接,也可以是附加连接。在开始之前,必须安装、启动MySQL服务器的实例,并…

算法体系-19 第十九节 暴力递归到动态规划

一 动画规划的概念 优化出现重复解的递归 一旦写出递归来,改动态规划就很快 尝试策略和状态转移方程是一码事 学会尝试是攻克动态规划最本质的能力 如果你发现你有重复调用的过程,动态规划在算过一次之后把答案记下来,下回在越到重复调用过程…

基于springboot实现农产品直卖平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现农产品直卖平台系统的设计演示 摘要 计算机网络发展到现在已经好几十年了,在理论上面已经有了很丰富的基础,并且在现实生活中也到处都在使用,可以说,经过几十年的发展,互联网技术已经把地域信息的隔…

【安卓设备】通过adb批量安装apk

1、adb链接设备 H:\tv\apk>adb connect 127.0.0.1:21503 2、批量安装apk 如果地址不一致需要将 H:\tv\apk\ 改成自己的路径地址,同时注意该命令只能安装文件名为英文的不支持中文名称,如果有需要先更改文件名称。 H:\tv\apk>for %f in (H:\tv\a…

IT入门知识博客文章大纲第一部分《IT基础知识》(1/10)

目录 IT入门知识博客文章大纲第一部分《IT基础知识》(1/10) 1.引言 2.第一部分:IT基础知识 2.1 计算机硬件 CPU:计算机的心脏 内存:数据的临时居所 存储设备:数据的长期仓库 输入输出设备&#xff1…

Node.js和npm的安装及配置

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞 I/O 的模型。 npm(node package manager)是一个 Node.js 包管理和分发工具,也是整个 Node.js 社区最流行、支持第三方模块最多的包管理器。使…

【YashanDB知识库】PHP使用ODBC使用数据库绑定参数功能异常

【问题分类】驱动使用 【关键字】ODBC、驱动使用、PHP 【问题描述】 PHP使用PDO_ODBC连接yashan数据库,使用绑定参数获取数据时,客户现场出现报错 本地复现未出现异常报错,但是无法正确获取数据。 【问题原因分析】开启ODBC报错日志后&am…

使用 Python 进行测试(1)测试基础

原文 总结 我们将从unittest开始,尽管它并不那么好用,但它是Python标准库中的测试工具。 使用unittest编写测试看起来像这样: import unittest# 需要测试的代码 def add(a, b):return a b# The tests class TestAddFunction(unittest.Test…

网络安全攻防基础入门笔记--操作系统名词解释文件下载反弹shell防火墙绕过

渗透测试常用专业术语 POC,EXP,Payload,Shellcode POC 全程Proof of Concept,中文"概念验证",常指一段漏洞证明的代码 EXP 全程Exploit ,中文"利用",指利用系统漏洞进行攻击的动作 Payload 中文"有效载荷",指成功Exploit之后,真正在目标系…

车道偏离预警系统技术规范(简化版)

车道偏离预警系统技术规范(简化版) 1 系统概述2 预警区域3 功能条件4 显示需求5 指标需求 1 系统概述 车道偏离预警系统工作在中高速驾驶的情况下,当驾驶员因注意力不集中导致车辆偏离本车道时,系统通过光学和声学信号对驾驶员进行…

MySQL 使用 MyFlash 快速恢复误删除、误修改数据

一、MyFlash MyFlash 是由美团点评公司技术工程部开发并维护的一个开源工具,主要用于MySQL数据库的DML操作的回滚。这个工具通过解析binlog日志,帮助用户高效、方便地进行数据恢复。MyFlash的优势在于它提供了更多的过滤选项,使得回滚操作变…

UC Berkeley简介以及和Stanford的区别与联系

UC Berkeley Source: Google Map 中文版 UC Berkeley,全称University of California, Berkeley,是一所位于美国加利福尼亚州伯克利市的世界知名公立研究型大学。以下是关于UC Berkeley的详细介绍: 学术声誉和排名 学术声誉: U…

欧洲杯德语词汇与表达,柯桥零基础德语培训

欧洲杯 - die Europameisterschaft 足球 - der Fuball 比赛 - das Spiel / die Partie 球员 - der Spieler 教练 - der Trainer 裁判 - der Schiedsrichter 球迷 - die Fans 进球 - das Tor 守门员 - der Torwart / der Torhter 前锋 - der Strmer 中场 - der Mittelf…

2024最值得入手骨传导耳机指南,精选五款分享!

作为前几年在蓝牙耳机市场杀出的一匹黑马,黑科技加持的骨传导耳机受到广大运动爱好者的喜爱。利用骨传导技术,通过头骨、颌骨把声音传到听觉神经引起听觉,同时又不阻碍外接声音的通过,保证了佩戴的舒适性也带来安全使用的最佳体验…

判断两张图片是否相似

判断两张图片是否相似 要判断两张图片是否相似,你可以使用多种方法,其中包括结构相似性指数(SSIM)和 perception hash 等。以下是使用 SSIM 和 perception hash 进行判断的示例代码。 安装必要的包 确保你已经安装了 scikit-im…

帕金森病的食疗建议

帕金森病(PD)是一种慢性、进展性的神经退行性疾病,主要影响中老年人。虽然目前尚无法根治,但及早规范治疗可显著改善症状,提高患者的生活质量。饮食调理作为帕金森病综合治疗的重要组成部分,对于维持患者较…

unity数独游戏

using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class MainMenuPanel : MonoBehaviour {public Button btnPlay; // 开始按钮public Slider sldDifficulty; // 难度滑动条private void Awake(){/…

RabbitMQ实践——利用一致性Hash交换器做带权重的调度

在《RabbitMQ实践——利用一致性Hash交换器做负载均衡》一文中,我们介绍了如何开启一致性hash交换器,并实现了消息的负载均衡,以达到横向扩展消费者数量的能力。 但是现实中,可能存在这样的场景:一些队列所在的机器配置…

【vue】终端 常用代码 和其他注意

🥑这里目录 一、【安装】1. 搜版本2.卸载3.安装 带版本4. 纯安装(自动最新) 二、【官网】官网源码及用法讲解1.【npm】2.【printjs】打印 一、【安装】 以下全拿 qrcode.vue 举例 1. 搜版本 例子:搜 qrcode.vue的版本代码&…

电子行业实施MES管理系统的时机是什么

随着信息技术的飞速发展,MES生产管理系统逐渐成为电子企业实现自动化生产和信息化管理的必备工具。那么,何时是电子企业实施MES管理系统的最佳时机呢? 1.生产过程中出现了问题,需要优化和改进。 2.企业需要提高产品交付和响应速…