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

3分钟搞定Windows启动盘制作:WinDiskWriter让macOS用户告别复杂命令行

3分钟搞定Windows启动盘制作&#xff1a;WinDiskWriter让macOS用户告别复杂命令行 【免费下载链接】windiskwriter &#x1f5a5; A macOS app that creates bootable USB drives for Windows. &#x1f6e0; Patches Windows 11 to bypass TPM and Secure Boot requirements. …...

Python金融数据工程:构建高可靠股票数据管道的3种架构方案

Python金融数据工程&#xff1a;构建高可靠股票数据管道的3种架构方案 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 在量化投资和金融数据分析领域&#xff0c;获取稳定、实时的股票数据是每个技…...

如何通过OpCore-Simplify在30分钟内完成黑苹果EFI自动化配置

如何通过OpCore-Simplify在30分钟内完成黑苹果EFI自动化配置 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore-Simplify是一款专注于自动化OpenC…...

3个实用技巧:Qwen Code多语言支持让开发者效率提升40%

3个实用技巧&#xff1a;Qwen Code多语言支持让开发者效率提升40% 【免费下载链接】qwen-code Qwen Code is a coding agent that lives in the digital world. 项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code 在全球化协作日益频繁的开发环境中&#xff…...

UniRig:革新3D模型自动化绑定的智能骨骼生成技术

UniRig&#xff1a;革新3D模型自动化绑定的智能骨骼生成技术 【免费下载链接】UniRig One Model to Rig Them All: Diverse Skeleton Rigging with UniRig 项目地址: https://gitcode.com/gh_mirrors/un/UniRig 在3D内容创作领域&#xff0c;骨骼绑定一直是制约效率的关…...

新手必看:用Proteus仿真51单片机数字电压表,附完整代码和电路图

从零开始构建51单片机数字电压表&#xff1a;Proteus仿真全流程指南 引言&#xff1a;为什么选择仿真学习51单片机&#xff1f; 对于刚接触嵌入式开发的初学者来说&#xff0c;直接购买硬件设备可能存在成本高、调试困难等问题。Proteus仿真软件为我们提供了完美的解决方案——…...

virtua在复杂场景中的应用:表格、聊天、日历等10种真实案例解析

virtua在复杂场景中的应用&#xff1a;表格、聊天、日历等10种真实案例解析 【免费下载链接】virtua A zero-config, fast and small (~3kB) virtual list (and grid) component for React. 项目地址: https://gitcode.com/gh_mirrors/vi/virtua virtua是一款零配置、轻…...

突破硬件枷锁:OptiScaler开源解决方案让所有设备都能享受AI超分辨率技术

突破硬件枷锁&#xff1a;OptiScaler开源解决方案让所有设备都能享受AI超分辨率技术 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler …...

AudioLDM-S性能优化:MySQL数据库存储百万级音效元数据

AudioLDM-S性能优化&#xff1a;MySQL数据库存储百万级音效元数据 1. 引言 想象一下&#xff0c;你正在运营一个大型音效库平台&#xff0c;每天要处理数十万次的音效搜索请求。用户输入"雨声"或"城市夜晚"&#xff0c;系统需要在毫秒内从百万级别的音效…...

往期精彩|阿尔茨海默病合集 | 以往高分文献分析,揭示阿尔茨海默病研究热点

阿尔茨海默病&#xff08;AD&#xff09;是在老年人群中最为普遍的神经退行性疾病&#xff0c;也是痴呆症的最常见原因&#xff0c;全球大约有2660万人受到影响。1、Neurology&#xff1a;新的血液生物标志物可以在阿尔茨海默病的早期阶段预测其进展2025年&#xff0c;巴塞罗那…...