当前位置: 首页 > news >正文

JS数组或数组对象去重常用方法

数组去重有许多种方法,下面列举几种常见方法

    • 数组去重
    • 数组对象去重

数组去重

  1. 使用 Set:将数组转化为 Set 对象,去重后再转化回数组,Set 会自动去重
const arr = [1, 2, 3, 2, 1, 4]
const newArr = [...new Set(arr)]
console.log(newArr) // [1, 2, 3, 4]
  1. 使用 filter:遍历数组,对每个元素判断是否在新数组中出现过。
const arr = [1, 2, 3, 2, 1, 4]
const newArr= arr.filter((item, index) => {return arr.indexOf(item) === index
})
console.log(newArr) // [1, 2, 3, 4]
  1. 使用 reduce:遍历数组,对每个元素判断是否在新数组中出现过,如果没有则将其添加到新数组中。
const arr = [1, 2, 3, 2, 1, 4]
const newArr= arr.reduce((acc, cur) => {if (!acc.includes(cur)) {acc.push(cur)}return acc
}, [])
console.log(newArr) // [1, 2, 3, 4]
  1. 使用 Map:遍历数组,将每个元素作为 key 存储到 Map 中,去重后再转化回数组。
const arr = [1, 2, 3, 2, 1, 4]
const map = new Map()
arr.forEach((item) => {map.set(item, true)
})
const newArr= Array.from(map.keys())
console.log(newArr) // [1, 2, 3, 4]

需要注意的是,以上方法都无法去重包含对象、数组等引用类型的元素的数组,需要使用其他方法实现。另外,以上方法去重后的数组顺序可能与原数组不同,如果需要保持顺序可以使用其他方法,比如通过遍历原数组将不重复的元素依次添加到新数组的尾部。

数组对象去重

  1. 使用 Set :Set 是 ES6 中新增的一种数据结构,它类似于数组,但是成员的值都是唯一的,可以用来去重。我们可以使用 Set 来去重数组对象,然后再将结果转换为数组。
const arr = [{ id: 1, name: 'AAAA' },{ id: 2, name: 'BBBB' },{ id: 1, name: 'AAAA' },{ id: 3, name: 'CCCC' }
];const result = Array.from(new Set(arr.map(JSON.stringify)), JSON.parse);
console.log(result); // [{ id: 1, name: 'AAAA' }, { id: 2, name: 'BBBB' }, { id: 3, name: 'CCCC' }]
  1. 使用 reduce :我们也可以使用 reduce 方法进行去重,具体步骤如下:
    · 遍历数组中的每一个元素;
    · 对于每一个元素,判断它是否已经出现过(使用 Array.prototype.findIndex() 判断);
    · 如果没有出现过,就将它添加到结果数组中;
const arr = [{ id: 1, name: 'AAAA' },{ id: 2, name: 'BBBB' },{ id: 1, name: 'AAAA' },{ id: 3, name: 'CCCC' }
]const result = arr.reduce((acc, curr) => {const index = acc.findIndex((item) => item.id === curr.id)if (index < 0) {acc.push(curr)}return acc
}, [])console.log(result) // [{ id: 1, name: 'AAAA' }, { id: 2, name: 'BBBB' }, { id: 3, name: 'CCCC' }]
  1. 使用 Map : Map 也可以用来去重数组对象,具体步骤如下:
    · 遍历数组中的每一个元素;
    · 对于每一个元素,判断它是否已经出现过(使用 Map.has() 判断);
    · 如果没有出现过,就将它添加到结果数组中;
const arr = [{ id: 1, name: 'AAAA' },{ id: 2, name: 'BBBB' },{ id: 1, name: 'AAAA' },{ id: 3, name: 'CCCC' }
]const map = new Map()
const result = []for (const item of arr) {if (!map.has(item.id)) {map.set(item.id, true)result.push(item)}
}console.log(result) // [{ id: 1, name: 'AAAA' }, { id: 2, name: 'BBBB' }, { id: 3, name: 'CCCC' }]

相关文章:

JS数组或数组对象去重常用方法

数组去重有许多种方法&#xff0c;下面列举几种常见方法 数组去重数组对象去重 数组去重 使用 Set&#xff1a;将数组转化为 Set 对象&#xff0c;去重后再转化回数组&#xff0c;Set 会自动去重 const arr [1, 2, 3, 2, 1, 4] const newArr [...new Set(arr)] console.log…...

allure测试报告生成逻辑--解决在Jenkins里打开allure报告页面后空白显示无数据问题(以window环境为例)

前言 相信大家在用Jenkins持续集成+ant自动构建+jmeter接口测试+pytest代码.xml文件转化+allure测试报告为一体的接口自动化测试构建过程中,都会遇到Jenkins里打开allure报告页面后空白显示无数据问题这一现象级问题,今天Darren洋就给大家分享一下如何讲讲allure测试报告生成…...

基于JAYA优化的BP神经网络(分类应用) - 附代码

基于JAYA优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于JAYA优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.JAYA优化BP神经网络3.1 BP神经网络参数设置3.2 JAYA算法应用 4.测试结果&#xff1a;5.M…...

JavaScript进阶(二十六):ES各版本特性详解

文章目录 一、ECMAScript简介二、ES6 (ES2015)三、ES7 (ES2016)四、ES8 (ES2017)五、ES9 (ES2018)六、ES10 (ES2019)七、ES11 (ES2020)八、ES12 (ES2021)九、拓展阅读 一、ECMAScript简介 ECMAScript是一种由Ecma国际&#xff08;前身为欧洲计算机制造商协会&#xff0c;Europ…...

排序算法-快速排序法(QuickSort)

排序算法-快速排序法&#xff08;QuickSort&#xff09; 1、说明 快速排序法是由C.A.R.Hoare提出来的。快速排序法又称分割交换排序法&#xff0c;是目前公认的最佳排序法&#xff0c;也是使用分而治之&#xff08;Divide and Conquer&#xff09;的方式&#xff0c;会先在数…...

Python 简介

一、Python 简介 Python 是著名的“龟叔” Guido van Rossum 在 1989 年圣诞节期间&#xff0c;为了打发无聊的圣诞节而编写的一个编程语言。牛人就是牛人&#xff0c;为了打发无聊时间竟然写了一个这么牛皮的编程语言。 现在&#xff0c;全世界差不多有 600 多种编程语言&am…...

grafana api创建dashboard 记录

文章目录 json model导入申请api key创建dashboard删除dashboard json model导入 直接在ui通过json model 导入&#xff0c;开发自己用还好&#xff0c;但对非开发人员不太友好&#xff0c;故考虑通过api后台自动创建 api doc : https://grafana.com/docs/grafana/v9.3/devel…...

局域网上IP多播与IP单播关于MAC地址的区别

IP单播进行到局域网上的时候&#xff1a; 网际层使用IP地址进行寻址&#xff0c;各路由器收到IP数据报后&#xff0c;根据其首部中的目的IP地址的网络号部分&#xff0c;基于路由表进行查表转发。 查表转发的结果可指明IP数据报的下一跳路由器的IP地址&#xff0c;但无法指明…...

三数之和[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个整数数组nums&#xff0c;判断是否存在三元组[nums[i], nums[j], nums[k]]满足i ! j、i ! k且j ! k&#xff0c;同时还满足nums[i] nums[j] nums[k] 0。请你返回所有和为0且不重复的三元组。 注意&#xff1a;答案中不可以…...

基于天牛须优化的BP神经网络(分类应用) - 附代码

基于天牛须优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于天牛须优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.天牛须优化BP神经网络3.1 BP神经网络参数设置3.2 天牛须算法应用 4.测试结果&#x…...

渗透波菜网站

免责声明 本文发布的工具和脚本&#xff0c;仅用作测试和学习研究&#xff0c;禁止用于商业用途&#xff0c;不能保证其合法性&#xff0c;准确性&#xff0c;完整性和有效性&#xff0c;请根据情况自行判断。如果任何单位或个人认为该项目的脚本可能涉嫌侵犯其权利&#xff0c…...

Spring Boot:Dao层-实例介绍

目录 Dao层的作用Dao层的特点与 Service 层和 Controller 层的关系实例介绍MenuDaoOperatorLogDaoRoleDaoUserDao四个文件的共同点引用的包使用Repository注解继承JpaRepository接口接口的实体类的主键类型使用 Query()注解 Dao层的作用 负责与数据库进行交互&#xff0c;主要…...

接口测试入门:深入理解接口测试!

很多人会谈论接口测试。到底什么是接口测试&#xff1f;如何进行接口测试&#xff1f;这篇文章会帮到你。 一、前端和后端 在谈论接口测试之前&#xff0c;让我们先明确前端和后端这两个概念。 前端是我们在网页或移动应用程序中看到的页面&#xff0c;它由 HTML 和 CSS 编写…...

Redis微服务架构

Redis微服务架构 缓存设计 缓存穿透 缓存穿透是指查询一个根本不存在的数据&#xff0c;缓存层和存储层都不会命中&#xff0c;通常出于容错的考虑&#xff0c;如果从存储层查不到数据则不写入缓层。 缓存穿透将导致不存在的数据每次请求都要到存储层去查询&#xff0c;失去…...

【C++】 局部对象,引用返回

1、new 关键字 会在堆内申请空间&#xff0c;如果仅仅是普通调用构造函数&#xff0c;不会在堆内开辟空间。 2、函数调用会形成栈帧&#xff0c;进行压栈操作&#xff0c;函数调用结束&#xff0c;会进行弹栈。 函数内的局部对象&#xff0c;会随着弹栈&#xff0c;而被销毁(…...

线性代数中涉及到的matlab命令-第二章:矩阵及其运算

目录 1&#xff0c;矩阵定义 2&#xff0c;矩阵的运算 3&#xff0c;方阵的行列式和伴随矩阵 4&#xff0c;矩阵的逆 5&#xff0c;克莱默法则 6&#xff0c;矩阵分块 1&#xff0c;矩阵定义 矩阵与行列式的区别&#xff1a; &#xff08;1&#xff09;形式上行列式…...

计算机毕业设计选什么题目好?springboot 美食推荐系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

爆肝整理,Jmeter接口性能测试-跨线程调用变量实操(超详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Jmeter中线程运…...

Maven导入程序包jakarta.servlet,但显示不存在

使用前提&#xff1a;&#xff08;Tomcat10版本&#xff09;已知tomcat10版本之后&#xff0c;使用jakart.servlet。而tomcat9以及之前使用javax.servlet。 问题描述&#xff1a;在maven仓库有导入了Jakarta程序包&#xff0c;但是界面仍然显示是javax。&#xff08;下图&…...

es6(二)——常用es6说明

ES6的系列文章目录 es6&#xff08;一&#xff09;——var和let和const的区别 文章目录 ES6的系列文章目录一、变量的结构赋值1.数组的结构赋值2.对象的结构赋值 二、模板字符串三、扩展运算符1.字符串的使用2.数组的使用 四、箭头函数1.普通函数的定义2.箭头函数的定义3.箭头…...

All in Token,三个运营商建Token工厂,中国移动跟进Token经营 三大运营商争夺AI阵地

随着Token&#xff08;词元&#xff09;经营战略的密集落地&#xff0c;三大运营商在AI领域的竞争愈发激烈。在日前举行的2026移动云大会上&#xff0c;中国移动正式发布了Token运营生态体系与移动模型服务平台MoMA&#xff0c;宣布接入超300款模型&#xff0c;并通过Token集约…...

NCM格式转换实战指南:ncmdumpGUI全面解析

NCM格式转换实战指南&#xff1a;ncmdumpGUI全面解析 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾为网易云音乐下载的NCM格式音乐无法在其他设备播…...

开源机械爪OpenClaw:从设计到力控抓取的完整实现指南

1. 项目概述&#xff1a;从“OpenClaw”看开源机械爪的无限可能最近在逛GitHub的时候&#xff0c;发现了一个挺有意思的项目&#xff0c;叫“MeyerZhou/openclaw”。光看名字&#xff0c;你大概能猜到这是个关于机械爪的开源项目。没错&#xff0c;这是一个旨在提供低成本、模块…...

多维子集和问题:NP难问题的算法与应用解析

1. 多维子集和问题概述多维子集和问题(Multi-dimensional Subset Sum Problem)是计算复杂度理论中的经典NP难问题。简单来说&#xff0c;它要求在给定的n维向量集合中&#xff0c;找出一个子集&#xff0c;使得该子集中所有向量在每一维上的和恰好等于目标向量对应的分量。这个…...

基于Sovereign-MCP-Servers构建私有AI工具链:从协议原理到Docker化部署

1. 项目概述与核心价值最近在折腾AI应用开发&#xff0c;特别是想给Claude、Cursor这类工具加上“联网”和“执行”能力时&#xff0c;绕不开一个概念&#xff1a;MCP&#xff08;Model Context Protocol&#xff09;。简单说&#xff0c;MCP就是一套标准协议&#xff0c;它能让…...

基于PyPortal与CircuitPython的物联网游戏数据显示器开发实战

1. 项目概述 如果你和我一样&#xff0c;既是《英雄联盟》的忠实玩家&#xff0c;又对嵌入式硬件开发充满热情&#xff0c;那么把这两者结合起来&#xff0c;做一个能实时展示自己召唤师等级的“实体奖杯”&#xff0c;绝对是一件既酷又有成就感的事情。这个项目就是基于Adafr…...

CN2628 可用太阳能供电 5 伏特低压差电压调制集成电路

概述: CN2628是一款可用太阳能供电的低噪声线性电压调制集成电路&#xff0c;采用固定5.0V输出电压&#xff0c;最大 输出电流可达1安培&#xff0c;在5.5V到7V的输入电压范围内输出电压精度可达1%。CN2628工作电流只有520微安&#xff0c;而且同输入和输出的压差没有关系。 CN…...

基于LLM与视觉模型融合的智能体框架:从原理到工业质检实践

1. 项目概述&#xff1a;当AI学会“看”与“想”最近在探索AI与视觉结合的落地场景时&#xff0c;我深度体验了landing-ai/vision-agent这个项目。它不是一个简单的图像识别工具&#xff0c;而是一个试图让AI具备“视觉推理”能力的智能体框架。简单来说&#xff0c;它让AI不仅…...

火灾动力学模拟实战:如何用FDS构建精准的火灾预测系统

火灾动力学模拟实战&#xff1a;如何用FDS构建精准的火灾预测系统 【免费下载链接】fds Fire Dynamics Simulator 项目地址: https://gitcode.com/gh_mirrors/fd/fds 你是否曾面临这样的困境&#xff1a;当设计一栋大型商业建筑时&#xff0c;如何科学评估火灾时的人员疏…...

动态提示词工程:让AI提示词具备上下文学习能力的实践指南

1. 项目概述&#xff1a;当提示词遇上上下文学习最近在折腾大语言模型应用时&#xff0c;我反复遇到一个痛点&#xff1a;精心设计的提示词&#xff08;Prompt&#xff09;在特定任务上效果拔群&#xff0c;但换个场景或数据&#xff0c;效果就大打折扣。每次都得重新调整、测试…...