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));

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

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

相关文章

Redis 是什么?

Redis是一种基于内存的数据库&#xff0c;数据的读写都是在内存中完成的&#xff0c;因此读写速度非常的快&#xff0c;常用于缓存&#xff0c;消息队列&#xff0c;分布式锁等场景。 Redis 在高并发项目中&#xff0c;担任着非常重要的作用&#xff0c;扛高并发的&#xff0c;…

docker+mysql+flask+redis+vue3+uwsgi+docker部署

首先拉取mysql的镜像&#xff0c;这里用的mysql5.7.6 docker pull mysql:5.7.6 镜像拉取完成后启动&#xff1a; docker run --name my-mysql -d -p 3306:3306 -v /usr/local/my-mysql/conf:/etc/mysql/conf.d -v /usr/local/my-mysql/data:/var/lib/mysql -e MYSQL_ROOT_PA…

layui子界面操作数据后主界面刷新怎么操作

项目场景&#xff1a; layui子界面进行了增删改查需要在关闭后让主界面刷新 解决方案&#xff1a; layui的admin.open方法支持传入回调函数,主要有以下几种回调: yes回调 用于确定/提交按钮点击后的回调参数: index,layero admin.open({ yes: function(index, layero){ /…

设计模式 - 代理模式

目录 一. 前言 二. 实现 三. 静态代理和动态代理 一. 前言 代理模式&#xff08;Proxy Pattern&#xff09;&#xff0c;为某个对象提供一种代理以控制对对象的访问。即客户端可通过代理对象间接访问目标对象&#xff0c;同时可限制、增强、修改目标对象的一些特性。访问者不…

vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标

GitHub Demo 地址 在线预览 vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标 [GitHub Demo 地址](https://github.com/iotjin/jh-vue3-admin)[在线预览 ](https://iotjin.github.io/jh-vue3-admin) 一、iconify插件安装使用效果图 二、通过自动导入使用ic…

如何利用React和Sass实现可定制的前端样式

如何利用React和Sass实现可定制的前端样式 引言&#xff1a; React是一种流行的JavaScript库&#xff0c;用于构建用户界面。它提供了组件化的方式来开发复杂的前端应用程序。而Sass是一种CSS预处理器&#xff0c;通过将CSS代码分解为模块&#xff0c;可以更方便地管理和组织样…

AIGC: 区块链与数据安全

随着国家将区块链纳入战略发展规划&#xff0c;数字经济蓬勃发展。近年来&#xff0c;数据的流通成为了实体经济赋能的关键&#xff0c;而在这一过程中&#xff0c;区块链技术和数据安全变得至关重要。 中国已经成为全球最大的数据体&#xff0c;每天产生大量数据。数字经济已…

软件测试人员必须知道的接口测试基础

一、首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能…

axios回调函数中this指向已经改变的解决方法

在axios回调函数中&#xff0c;this指向的是回调函数本身的作用域&#xff0c;而不是Vue实例的作用域。因此&#xff0c;你不能直接通过this访问Vue实例中的数据。为了解决这个问题&#xff0c;有几种方法&#xff1a; 1.使用箭头函数&#xff0c;箭头函数会绑定当前作用域的t…

【Linux】——基操指令(一)

个人主页 代码仓库 C语言专栏 初阶数据结构专栏 Linux专栏 LeetCode刷题 算法专栏 目录 前言 基操前的碎碎念 计算机的层状结构 基础指令 查看登录用户指令 查看用户指令 查看当前所处工作目录 清屏指令 基操指令 ls命令 cd命令 makdir指令 rmdir指令 &…

Mac电脑信息大纲记录软件 OmniOutliner 5 Pro for Mac中文

OmniOutliner 5 Pro是一款专业级的Mac大纲制作工具&#xff0c;它可以帮助用户更好地组织和管理信息&#xff0c;以及制作精美的大纲。以下是OmniOutliner 5 Pro的主要功能和特点&#xff1a; 强大的大纲组织和管理功能。OmniOutliner 5 Pro为用户提供了多层次的大纲结构&…

SpringBoot+MinIO8.0开箱即用的启动器

一、代码拉取及安装 1.码云地址 https://gitee.com/qiangesoft/rdp-starter/tree/master/rdp-starter-minio 2.本地安装 代码接入 1.引入依赖 <dependency><groupId>com.qiangesoft.rdp</groupId><artifactId>rdp-starter-minio</artifactId&g…

Chinese-LLaMA-AIpaca 指令精调

文章目录 一、继续训练 Chinese-AIpaca 模型的 LoRA权重二、基于中文Chinese-LLaMA训练全新的指令精调LoRA权重1、合并2、基于中文 Chinese-LLaMA 训练全新的指令精调 LoRA权重一、继续训练 Chinese-AIpaca 模型的 LoRA权重 下载数据集 alpaca_data_zh_51k.json https://github…

Learn Prompt- Midjourney案例:动漫设计

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

邮件功能-python中的SMTP协议邮件发送

文章目录 一、SMTP协议邮件准备二、smtplib模块1.使用smtplib封装一个邮件类2.发送邮件 补充 一、SMTP协议邮件准备 需要一个smtp服务器 二、smtplib模块 smtplib模块是python自带的模块 1.使用smtplib封装一个邮件类 import smtplib import logging # 加入日志&#xff…

Linux nohup

nohup 命令用于在 Linux 中将命令或程序在后台运行&#xff0c;并且在终端关闭后仍然保持运行。 nohup命令 描述 nohup 命令用于将命令或程序以不受终端挂断影响的方式在后台运行。 语法 nohup command [arguments] &参数 command&#xff1a;要在后台运行的命令或程…

Java中的泛型

一. 泛型简介 泛型&#xff0c;即“参数化类型”。 作为Java中常用且重要的一个概念&#xff0c;泛型帮我们实现了代码重用&#xff0c;也保证了类型安全。但关于它的详细内容&#xff0c;目前很多同学还不清楚&#xff0c;所以接下来就带各位来学习这个重要的知识点。 背景 …

网络工程师基础笔记(一)

一、接入网 接入网&#xff0c;是指将端系统物理连接到边缘路由器的网络。 &#xff08;1&#xff09;家庭接入&#xff1a;数字用户线(DSL)、电缆、光纤到户&#xff08;FTTH&#xff09;卫星和拨号接入。 &#xff08;2&#xff09;企业&#xff08;家庭&#xff09;接入&…

ArduPilot开源飞控之GCS显示DPS310异常问题

ArduPilot开源飞控之GCS显示DPS310异常问题 1. 源由2. 现象3. 分析3.1 Mission Planner3.2 Ardupilot3.3 AP_Baro分析3.4 AP_Baro定位 4. 修复5. 效果6. 参考资料7. 补充7.1 Ardupilot提交PR注意事项7.2 修复主要使用到的命令 1. 源由 2020年Ardupilot官网论坛就有开始讨论DPS…

计算机竞赛 深度学习卫星遥感图像检测与识别 -opencv python 目标检测

文章目录 0 前言1 课题背景2 实现效果3 Yolov5算法4 数据处理和训练5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **深度学习卫星遥感图像检测与识别 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐…