当前位置: 首页 > 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;所谓“工作的”就是指软件的…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...