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

js实现数组去重方式(12种方法)

目录

    • 1、filter + indexOf
    • 2、for + object
    • 3、for + includes
    • 4、for + splice
    • 5、filter + indexOf
    • 6、Map
    • 7、Set
    • 8、set + Array.from
    • 9、sort 排序
    • 10、for + findIndex
    • 11、双重for循环
    • 12、reduce

1、filter + indexOf

数组去重:利用 filter 过滤 配合 indexOf 查找元素

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]
function newArrFn (arr) {return arr.filter((item, index) => {return arr.indexOf(item) === index})}console.log(newArrFn(arr));

2、for + object

循环数组,如果对象中不存在,就可以给 push 进去

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {let newArr = []let obj = {}for(let i = 0;i<arr.length;i++){if (!obj[arr[i]]) {newArr.push(arr[i])obj[arr[i]] = 1} else {obj[arr[i]] ++}};return newArr}console.log(newArrFn(arr));

3、for + includes

利用 includes 检查新数组是否包含原数组的每一项。 如果不包含,就push进去

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]// 数组去重:// 方法7 :for + includesfunction newArrFn (arr) {let newArr = []for(let i = 0;i<arr.length;i++){newArr.includes(arr[i]) ? newArr:  newArr.push(arr[i]) };return newArr}console.log(newArrFn(arr));

4、for + splice

利用splice截取数组

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {for(let i = 0; i<arr.length; i++){for(let j = i + 1; j<arr.length; j++){if (arr[i] === arr[j]) {arr.splice(j,1);j--}};}return arr}console.log(newArrFn(arr));

5、filter + indexOf

利用 filter 过滤 配合 indexOf 查找元素

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {return arr.filter((item, index) => {return arr.indexOf(item) === index})}console.log(newArrFn(arr));

6、Map

利用数据结构存值的特点

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {let newArr = []let map = new Map()for(let i = 0;i<arr.length;i++){// 如果 map里面不包含,就设置进去if (!map.has(arr[i])) {map.set(arr[i], true)newArr.push(arr[i])}};return newArr}console.log(newArrFn(arr));

7、Set

ES6中新增了数据类型Set,Set的一个最大的特点就是数据不重复。Set函数可以接受一个数组(或类数组对象)作为参数来初始化,利用该特性也能做到给数组去重。

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {// .new Set方法,返回是一个类数组,需要结合 ...运算符,转成真实数组return ([...new Set(arr)])}console.log(newArrFn(arr));

8、set + Array.from

利用 set数据不重复的特点,结合 Array.from

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {// .new Set方法,返回是一个类数组,需要结合 Array.from ,转成真实数组return (Array.from(new Set(arr)) )}console.log(newArrFn(arr));

9、sort 排序

利用 sort 方法进行排序。进行循环,如果原数组的第 i 项和新数组的i - 1 项不一致,就push进去。

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {arr = arr.sort()let newArr = []for(let i = 0;i<arr.length;i++){arr[i] === arr[i-1] ? newArr : newArr.push(arr[i])};return newArr}console.log(newArrFn(arr));

10、for + findIndex

利用findIndex 的特性,查找元素找不到就返回-1, 接下来就需要判断,如果是-1,说明没找到,就往新数组里面添加元素。

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {let newArr = []for(let i = 0;i<arr.length;i++){newArr.indexOf(arr[i]) === -1 ? newArr.push(arr[i]) : newArr};return newArr}console.log(newArrFn(arr));

11、双重for循环

利用双重循环去重。

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {let newArr = []for(let i = 0;i<arr.length;i++){newArr.indexOf(arr[i]) === -1 ? newArr.push(arr[i]) : newArr};return newArr}console.log(newArrFn(arr));

12、reduce

利用reduce去重。

var arr = [3, 2, 1, 6, 3, 4 ,5 ,6, 4, 5, 8, 4]function newArrFn (arr) {let newArr = []return  arr.reduce((prev, next,index, arr) => {// 如果包含,就返回原数据,不包含,就把新数据追加进去 return newArr.includes(next) ? newArr :  newArr.push(next)}, 0)}console.log(newArrFn(arr));

相关文章:

js实现数组去重方式(12种方法)

目录 1、filter indexOf2、for object3、for includes4、for splice5、filter indexOf6、Map7、Set8、set Array.from9、sort 排序10、for findIndex11、双重for循环12、reduce 1、filter indexOf 数组去重&#xff1a;利用 filter 过滤 配合 indexOf 查找元素 var a…...

AI智能语音机器人的优势

1.高效自动拨号功能。 导入客户数据&#xff0c;外呼机器人自动拨号&#xff0c;无需看守&#xff0c;真人录音话术&#xff0c;定制场景问答和1秒内的问答响应&#xff0c;为客户带来真实准确的咨询体验。同时&#xff0c;每次通话结束后&#xff0c;外呼系统根据通话时间和关…...

BERT: 面向语言理解的深度双向Transformer预训练

参考视频&#xff1a; BERT 论文逐段精读【论文精读】_哔哩哔哩_bilibili 背景 BERT算是NLP里程碑式工作&#xff01;让语言模型预训练出圈&#xff01; 使用预训练模型做特征表示的时候一般有两类策略&#xff1a; 1. 基于特征 feature based &#xff08;Elmo&#xff09;…...

5-1.(OOP)初步分析MCV架构模式

组成&#xff1a;模型&#xff08;model&#xff09;、视图&#xff08;view&#xff09;、控制器&#xff08;controller&#xff09; view&#xff1a;界面、显示数据 model&#xff1a;数据管理、负责在数据库中存取数据以及数据合法性验证 controller&#xff1a;负责转…...

如何利用React和Flutter构建跨平台移动应用

如何利用React和Flutter构建跨平台移动应用 移动应用已经成为现代生活的一部分&#xff0c;每天都有大量的手机用户在使用各种各样的应用程序。对于开发者来说&#xff0c;构建一个适用于多个平台的移动应用是一个挑战。幸运的是&#xff0c;有一些工具可以帮助我们轻松地实现…...

npm install / webdriver-manager update报错 unable to get local issuer certificate

我这边遇到的问题&#xff0c;用的是angular&#xff0c;跑npm install的时候报错&#xff0c;一开始在.npmrc添加strict-sslfalse但是还是报错&#xff0c;搜索下记录。 参考解决&#xff1a; selenium - webdriver-manager update, Error: unable to get local issuer certi…...

电商项目高级篇-02 elasticsearch-下

电商项目高级篇-02 elasticsearch-下 4.2、QueryDSL返回指定字段 4.2、QueryDSL 返回指定字段 返回单个字段 GET bank/_search {"query": {"match_all": {}}, "sort": [{"balance": {"order": "desc"}}], &quo…...

计算机竞赛 深度学习人体跌倒检测 -yolo 机器视觉 opencv python

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的人体跌倒检测算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满…...

CloseableHttpClient详解

实现项目中的HttpUtil用到CloseableHttpClient&#xff0c;httpUtil源码&#xff1a;https://download.csdn.net/download/imwucx/88378340 于是学习CloseableHttpClient并记录一下。 一、CloseableHttpClient是什么&#xff1f; CloseableHttpClient实现了AutoCloseable接口和…...

从mysql 5.7 升级到 8.0 的一些注意事项

最近 mysql 5.7 版本将会终止安全更新&#xff0c;越来越多的朋友考虑升级 mysql 8.0&#xff0c;以下是一些刚开始使用时可能存在差异问题的地方&#xff0c;有一些其实在 mysql 5.7 版本里已经开始使用&#xff0c;这里整理一下方便查阅。 1、关于端口&#xff0c;该版本 My…...

喜迎中秋国庆双节,华为云Astro Canvas之我的中秋节设计大屏

目录 前言 前提条件 作品展示 薅羊毛 前言 大屏应用华为云Astro Canvas是华为云低代码平台Astro的子服务之一&#xff0c;是以数据可视化为核心&#xff0c;以屏幕轻松编排&#xff0c;多屏适配可视为基础&#xff0c;用户可通过图形化界面轻松搭建专业水准的数据可视化大屏…...

C++ stoi()函数的用法

stoi()函数的作用 将字符串转为相应进制&#xff0c;可以是8进制&#xff0c;10进制&#xff0c;16进制等&#xff0c;默认的情况下是10进制 stoi源码里面定义 stoi(const string& __str, size_t* __idx 0, int __base 10) 注意&#xff1a;idx 这个可能是版本的问题&…...

Learn Prompt- Midjourney案例:动漫设计

使用 Midjourney 生成动漫有两种方法&#xff1a;使用Niji模式或使用标准的 Midjourney 模型。Niji V5 是 Midjourney 的动漫专用模型。它建立在标准 Midjourney 模型的全新架构之上&#xff0c;更擅长生成命名的动漫角色。Niji V4于2023年12月发布&#xff0c;Niji V5于2023年…...

亚马逊无线鼠标FCC认证办理 FCC ID

无线鼠标是指无线缆直接连接到主机的鼠标&#xff0c;采用无线技术与计算机通信&#xff0c;从而省却电线的束缚。通常采用无线通信方式&#xff0c;包括蓝牙、Wi-Fi (IEEE 802.11)、Infrared (IrDA)、ZigBee (IEEE 802.15.4)等多个无线技术标准。随着人们对办公环境和操作便捷…...

MySQL常见数据类型、特点以及使用场景

以下是一些常见的MySQL数据类型及其特点&#xff0c;包括数据类型的占用字节数、最大存储值和适用场景&#xff1a; 1. 整数类型&#xff1a; TINYINT&#xff1a;1字节&#xff0c;范围从-128到127&#xff08;有符号&#xff09;&#xff0c;0到255&#xff08;无符号&…...

vue markdown显示为html

1、安装依赖markdown-it yarn add markdown-it 2、在页面中引用 import MarkdownIt from markdown-it3、实例化markdown-it const md new MarkdownIt()4、输出 <div class"answer" v-html"md.render(mdTxt)"></div>通过markdown-it可以将m…...

Spring整合RabbitMQ——生产者(利用配置类)

1.生产者配置步骤 2.引入依赖 3.编写配置 配置RabbitMQ的基本信息&#xff0c;用来创建连接工厂的 编写启动类 编写配置类 4. 编写测试类...

Linux基础工具|代码调试工具gdb的使用

1.debug/release gdb是一款Linux下的一款调试器&#xff0c;在没有图形化界面下&#xff0c;是一种不错的调试方案&#xff08;虽然在一般的开发环境中很少会使用gdb&#xff09; 不过要使用gdb&#xff0c;就先要了解debug和release版本。 发布软件的时候有一种叫debug版本…...

Ribbon负载均衡器

两种&#xff1a; 1.1 集中式负载均衡&#xff0c;服务端负载均衡 硬件 nginx 轮询、负载、哈希、随机、权重 为什么要做负载均衡&#xff1f; 1.2 客户端负载均衡器 用客户端 负载均衡器 很多机制可以自定义 小知识&#xff1a;不想让别人调自己&#xff0c;只想用别人的…...

初级软件测试入门教程

一、软件测试的基本概念 1、软件测试的定义 就是以发现错误为目的而运行程序的过程。 软件测试员的目标是找到软件缺陷&#xff0c;尽可能早一些&#xff0c;并确保其得以修复。 2、软件测试方法总体分类 试图验证软件是“工作的”&#xff08;所谓“工作的”就是指软件的…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...