数组、数组对象去重

一、纯数组

1. 纯数组 - 利用new Set()集合 

Array.from(new Set(arr));

Set是es6新增的数据结构,似于数组,但并非真正的数组,我们可以称之为类数组对象,它的一大特性就是所有元素都是唯一的,没有重复的值。

Array.from的作用是允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等伪数组对象或可迭代对象) 上进行有用的转换。

我们可以利用Set的特性,进行去重,最后使用Array.from()将类数组对象转化成真正的数组。

2. 纯数组 - 利用filter()+indexOf()

arr.filter((item, index) => arr.indexOf(item) === index);

filter函数的作用是遍历数组并返回符合条件的元素组成的数组,第一个参数是数组元素,第二个参数是索引。

indexOf的作用是查询并返回数组中第一个符合条件的元素的索引。

两个方法组合起来,filter循环遍历数组,indexOf判断当前元素在数组中第一次出现的位置是否等于当前索引,如果等于(说明第一次出现)就返回true,如果不等于(说明该元素是重复的元素)返回false,通过filter过滤获得去重后的数组。

3. 纯数组 - 利用reduce()+includes()

arr.reduce((total, item) => (total?.includes(item) ? total : [...total, item]) , []);

reduce是一个累加器,第一个参数是回调函数,第二个参数是累加器但默认值。回调函数中第一个参数是累加的数组,第二个参数是遍历的元素,返回值是累加器的值。

includes用于查找数组中书否存在符合条件的元素,如果存在返回true,如果不存在返回false。

设置reduce累加器的默认值为空数组,开始遍历数组,通过includes判断累加器中是否存在当前元素,如果当前元素在累加器中不存在,就把它添加到累加器中,并返回出去,如果当前元素已经存在,直接把累加器返回出去,实现去重。

二、数组对象

1.数组对象 - 利用new Set()集合

Array.from(new Set(arr.map((item) => JSON.stringify(item)))).map(item=>JSON.parse(item))

 Set是es6新增的数据结构,似于数组,但并非真正的数组,我们可以称之为类数组对象,它的一大特性就是所有元素都是唯一的,没有重复的值。

Array.from的作用是允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等伪数组对象或可迭代对象) 上进行有用的转换。

JSON.stringify():将数据格式转化成JSON字符串格式

JSON.parse():将JSON字符串转化成数据格式

Set对象只能对简单的数组去重,无法对数组对象去重,我们可以遍历数组并通过JSON.stringify()将数组元素转化成JSON字符串,此时数组变成字符串组成的数组,通过Set特性去重,去重之后通过Array.form转化成真数组,最后遍历数组并通过JSON.parse将字符串转化成对象,实现数组去重。

2.数组对象 - 利用filter()+findIndex() 

arr.filter((item,index)=>item?.findIndex( i => i.id===item.id ) === index) 

filter函数的作用是遍历数组并返回符合条件的元素组成的数组,第一个参数是数组元素,第二个参数是索引。

findIndex的作用是遍历数组,查询并返回数组中第一个符合条件的元素的索引。

两个方法组合起来,filter循环遍历数组,findIndex遍历数组,根据id判断当前元素的在数组中第一次出现的位置是否等于当前索引,如果等于(说明第一次出现)就返回true,如果不等于(说明该元素是重复的元素)返回false,通过filter过滤获得去重后的数组。

3.数组对象 - 利用reduce()+some()

arr.reduce((total,item)=>total?.some( i => i.id===item.id ) ? total : [...total,item] , [] )

reduce是一个累加器,第一个参数是回调函数,第二个参数是累加器但默认值。回调函数中第一个参数是累加的数组,第二个参数是遍历的元素,返回值是累加器的值。

some遍历数组,判断数组中否存在符合条件的元素,如果存在返回true,如果不存在返回false。

设置reduce累加器的默认值为空数组,开始遍历数组,通过some遍历累加器,判断累加器中当前元素的id是否存在,如果不存在,就把它添加到累加器中,并返回出去,如果当前id已经存在,直接把累加器返回出去,实现去重。

本篇文章只是介绍一些简单的去重方法,其实数组去重的方法有很多,大家自行摸索~~~

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

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

相关文章

Spring MVC 文件上传和下载

文章目录 Spring MVC 中文件上传利用 commons-fileupload 文件上传使用 Servlet 3.1 内置的文件上传功能 Spring MVC 中文件下载 Spring MVC 中文件上传 为了能上传文件,必须将 from 表单的 method 设置为 POST,并将 enctype 设置为 multipart/form-data…

阿里云服务器怎么购买价格更便宜?优惠大揭秘!

阿里云服务器租用价格表2024年最新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元,ECS u1服务器2核4G5M固定带宽199元一年,2核4G4M带宽轻量服务器一年165元12个月,2核…

cesium 平滑显示billboard 透明度

描述:加载billboard的时候,要么是显示,要么是隐藏,不能平滑的显示,有个从不显示到显示的过程 解决方案:创建billboard的时候给一个color,颜色为(255,255,255),透明度从0-1 let opaci…

C#:循环中断

任务描述 实现九九乘法表,按照编程要求,使用break跳出循环 测试说明 测试过程: 平台将编译用户补全代码,并根据程序的输出判断程序是否正确。 以下是测试样例: 测试输入: 预期输出: we found…

A Learning-Based Approach for IP Geolocation(2010年)

下载地址:Towards IP geolocation using delay and topology measurements | Proceedings of the 6th ACM SIGCOMM conference on Internet measurement 被引次数:185 Eriksson B, Barford P, Sommers J, et al. A learning-based approach for IP geolocation[C]//Passive …

【UE Niagara】自定义模块的简单使用

效果 步骤 新建一个Niagara系统,使用“Empty”模板,这里命名为“NS_Custom” 打开“NS_Custom”,添加一个“Spawn Burst Instantaneous”来单次生成1个粒子 在“Emitter State”模块中,设置生命循环模式为“Self”,循…

【洛谷 B3611】【模板】传递闭包 题解(有向图+邻接矩阵+Floyd算法+传递闭包+位运算)

【模板】传递闭包 题目描述 给定一张点数为 n n n 的有向图的邻接矩阵,图中不包含自环,求该有向图的传递闭包。 一张图的邻接矩阵定义为一个 n n n\times n nn 的矩阵 A ( a i j ) n n A(a_{ij})_{n\times n} A(aij​)nn​,其中 a i…

【vue】toRef,toRefs

toRef&#xff1a;把一个 响应式对象 转换为对应的ref变量toRefs&#xff1a;把一个 响应式对象 转换为对应的ref对象 代码 <template><P>mname: {{ mname }} </P><P>mage: {{ mage }} </P><P>msex: {{ msex }} </P><P>mhobb…

代码随想录算法训练营第三十九天| 62.不同路径、63. 不同路径 II

62.63 题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。问总共有多少条不同的路…

购物车实现

目录 1.购物车常见的实现方式 2.购物车数据结构介绍 3.实例分析 1.controller层 2.service层 1.购物车常见的实现方式 方式一&#xff1a;存储到数据库 性能存在瓶颈方式二&#xff1a;前端本地存储 localstorage在浏览器中存储 key/value 对&#xff0c;没有过期时间。s…

程序员为啥不自己单干?想过,但是

偶尔被问&#xff0c;程序员都能开发公司的软件了&#xff0c;为啥不做个软件自己卖。作为写了近10年代码的程序员&#xff0c;来分享一下这个话题。 据了解&#xff0c;每个程序员都想过去做一款自己的产品去赚钱&#xff0c;包括我。有人只是想过&#xff0c;有人去做过了&a…

配置VM开机自启动

1. 在此电脑-右键选择“管理”-服务和应用程序-服务中找到VMware Workstation Server服务&#xff08;新版名称也可能是VMware自启动服务&#xff0c;自己找一下&#xff0c;服务属性里有描述信息的&#xff09;&#xff0c;将其启用并选择开机自动启动 新版参考官方文档&…

蓝桥杯【第15届省赛】Python B组

这题目难度对比历届是相当炸裂的简单了…… A&#xff1a;穿越时空之门 【问题描述】 随着 2024 年的钟声回荡&#xff0c;传说中的时空之门再次敞开。这扇门是一条神秘的通道&#xff0c;它连接着二进制和四进制两个不同的数码领域&#xff0c;等待着勇者们的探索。 在二进制…

ReactRouter

React-Router 概念&#xff1a;一个路劲path对应一个组件component 当我们在浏览器中访问一个path的时候&#xff0c;path对应的组件会在页面中进行渲染路由语法&#xff1a; import {createBrowserRouter, RouterProvider} from react-router-dom// 1. 创建router实例对象并…

【算法刷题 | 回溯思想 02】4.12(电话号码的字母组合)

文章目录 4.电话号码的字母组合4.1问题4.2解法&#xff1a;回溯4.2.1回溯思路&#xff08;1&#xff09;函数返回值以及参数&#xff08;2&#xff09;终止条件&#xff08;3&#xff09;遍历过程 4.2.2代码实现 4.电话号码的字母组合 4.1问题 给定一个仅包含数字 2-9 的字符…

threejs 基础知识点汇总

threejs 基础知识点汇总 之前写了几篇博文&#xff0c;但是我觉得写的不好&#xff0c;我今天再补充一篇还不好的&#xff0c;把基础知识点汇总一下&#xff0c;不写运行的代码了&#xff0c;只写关键代码&#xff0c;但是看了之前我写的那几篇&#xff0c;看这篇的话问题其实不…

jdk17 你还想用ScriptEngineManager来执行js代码?

今天要用java来执行配置表的js代码&#xff0c;用 ScriptEngine javaScriptEngine new ScriptEngineManager().getEngineByName(“javascript”); 一直抛异常&#xff1a;Cannot invoke “javax.script.ScriptEngine.eval(String)” because “javaScriptEngine” is null 网上…

简单瞎搞题(位运算优化背包问题)

题目链接 这可不是瞎搞&#xff0c;出题人是有bear来。查资料时遇见的例题&#xff0c;当练习写一下。做法是位运算bitset优化的背包。 思路&#xff1a; 相当于有 n n n 组&#xff0c;每组选一个物品&#xff0c;然后问最后得到的重量之和是多少。不看位运算优化的话&…

Springboot集成Elastic-job

ElasticJob 通过弹性调度、资源管控、以及作业治理的功能&#xff0c;打造一个适用于互联网场景的分布式调度解决方案&#xff0c;并通过开放的架构设计&#xff0c;提供多元化的作业生态。 1 项目集成 1.1 springboot项目配置 导入依赖&#xff1a; <!--mysql连接基本配…

SSL证书添加与ICP备案,对于SpringBoot的要求

配置了SSL证书之后&#xff0c;在SpringBoot的resources文件夹里的application.properties会添加以下代码&#xff1a; server.port443 不需要添加server.address。不然会报错。 https类型的请求默认在Postman里面不可请求。 经过SSL证书处理的网页&#xff0c;链接中使默认…