【前端】vue数组去重的3种方法

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、数组去重说明
  • 二、Vue数组去重的3种方法


前言

随着开发语言及人工智能工具的普及,使得越来越多的人会主动学习使用一些开发工具,本文主要介绍了Vue数组去重的几种方法。


一、数组去重说明

数组去重是将数组中的重复元素移除,仅保留唯一的元素。你可以使用多种方式来实现这一点,具体取决于编程语言和需求。

二、Vue数组去重的3种方法

Vue中常见的几种数组去重方法包括:
方法一

  1. 使用ES6 Set数据结构:Set是一种集合,它只存储唯一的值,因此可以用来去除数组中的重复元素。
let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); 

在这里插入图片描述
方法二
2. 使用Array.prototype.filter()方法:利用filter()方法遍历数组,筛选出第一次出现的元素。

let arr = [1, 2, 2, 3, 4, 4, 5, 5, 6, 7];
let uniqueArr = arr.filter((item, index, array) => {return array.indexOf(item) === index;
});
console.log(uniqueArr); 

在这里插入图片描述
方法三
3. 使用Array.prototype.reduce()方法:利用reduce()方法逐个将元素添加到一个新数组中,但仅当该元素在新数组中不存在时。

let arr = [1, 2, 2, 3, 4, 4, 5, 5, 9];
let uniqueArr = arr.reduce((acc, cur) => {if (!acc.includes(cur)) {acc.push(cur);}return acc;
}, []);
console.log(uniqueArr); 

在这里插入图片描述

这些都是常见的Vue数组去重方法,你可以根据自己的需求选择其中一种使用。

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

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

相关文章

港股“AIGC第一股”出门问问,凭借什么产品做到上市?

随着人工智能技术的飞速发展,AIGC(人工智能生成内容)领域逐渐成为资本市场的新宠。在这样的背景下,出门问问(股票代码:2438.HK)作为AIGC领域的先行者,于2024年4月24日正式登陆港交所…

CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)

前言:在学习CSS的时候,必不可少的就要学习选择器和常见的属性,而本篇文章讲解的是CSS中的列表、表格、背景、鼠标属性。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 大致了解一下本篇文章…

用斐波那契数列感受算法的神奇(21亿耗时0.02毫秒)

目录 一、回顾斐波那契数列 二、简单递归方法 (一)解决思路 (二)代码展示 (三)性能分析 三、采用递归HashMap缓存 (一)解决思路 (二)代码展示 &…

Apache JMeter进行TCP并发压力测试初尝试

前言 由于互联网编程实验二第三题要求比较使用线程池与否的服务器的并发性能,遂检索信息并了解到Apache JMeter这个工具 本文主要介绍了在已有Java JDK的情况下对Apache JMeter的安装及配置,以及利用JMeter进行TCP压力测试 一、安装及配置 先在官网下…

Clion连接MySQL数据库:实现C/C++语言与MySQL交互

确保你的电脑里已经有了MySQL。 1、找到MySQL的目录 2、进入lib目录 3、复制libmysql.dll和libmysql.lib文件 4、将这俩文件粘贴到你的clion项目的cmake-build-debug目录下 如果不是在这个目录下,运行时会出以下错误报错: 进程已结束,退…

word导出或另存为pdf图片不清晰问题解决方案

问题描述: 使用word 2019导出pdf时图片不清晰,即使我已经在“选项 → \to →高级 → \to →图片大小和质量 → \to →不压缩文件中的图像 ”选项卡中关闭掉了图片压缩依然无效。 解决方案: 利用word foxit pdf 软件打印的方案转pdf。 &…

AppleWatch是真的能够减少我iPhone的使用时长

我应该是比较专情的果粉了,我有一台MacBook Pro、iPad Pro、airpods pro 2和iPhone 15 Pro Max。但我还从来没有用过苹果手表。 然后,我就去买了AppleWatchSeries9蜂窝款,并试用了一周,我想知道它是否能帮助我减少使用iPhone的时间…

MySQL中如何随机获取一条记录

点击上方蓝字关注我 随机获取一条记录是在数据库查询中常见的需求,特别在需要展示随机内容或者随机推荐的场景下。在 MySQL 中,有多种方法可以实现随机获取一条记录,每种方法都有其适用的情况和性能特点。在本文中,我们将探讨几种…

新恒盛110kV变电站智能辅助系统综合监控平台+道巡检机器人

江苏晋控装备新恒盛化工有限公司是晋能控股装备制造集团有限公司绝对控股的化工企业,公司位于江苏省新沂市。新恒盛公司40•60搬迁项目在江苏省新沂市经济开发区化工产业集聚区苏化片区建设,总投资为56.64亿元,该项目是晋能控股装备制造集团重…

ios CI/CD 持续集成 组件化专题一 iOS 将图片打包成bundle

一、 创建 选择 macos 下的Bundledle 二 、取名点击下一步 三、Base SDK 选择ios 四 、Build Active Architecture Only 五、Installation后面的内容删除 六、.Skip Install 选择NO 七、Strip Debug Symbols During Copy 中"Release"项设置为 "YES" 八、…

网络基础(1)

文章目录 1. 网络基础1.1 网络协议1.1.1 OSI七层模型 1.3 网络中的地址管理 2. 套接字编程2.1 源IP地址和目的IP地址2.3 socket编程接口2.3.2 sockaddr结构2.2.3 UDPecho服务器2.24 netstat2.25 远程执行命令 1. 网络基础 1.1 网络协议 1.1.1 OSI七层模型 OSI(Op…

扭蛋机小程序对市场的发展有哪些推动作用?

近几年,扭蛋机发展的非常迅猛。随着二次元文化的火热,给扭蛋机带来了发展机遇,扭蛋机行业也受到了大众的喜爱。扭蛋机的商品种类多样化,包含了各类热门IP周边衍生品、玩具、小商品等,适合所有消费人群,市场…

2024年G1工业锅炉司炉证考试题库及G1工业锅炉司炉试题解析

题库来源:安全生产模拟考试一点通公众号小程序 2024年G1工业锅炉司炉证考试题库及G1工业锅炉司炉试题解析是安全生产模拟考试一点通结合(安监局)特种作业人员操作证考试大纲和(质检局)特种设备作业人员上岗证考试大纲…

8.0MGR单主模式搭建_克隆(clone)插件方式

为了应对事务一致性要求很高的系统对高可用数据库系统的要求,并且增强高可用集群的自管理能力,避免节点故障后的failover需要人工干预或其它辅助工具干预,MySQL5.7新引入了Group Replication,用于搭建更高事务一致性的高可用数据库…

【前端缓存】localStorage是同步还是异步的?为什么?

写在开头 点赞 收藏 学会 首先明确一点,localStorage是同步的 一、首先为什么会有这样的问题 localStorage 是 Web Storage API 的一部分,它提供了一种存储键值对的机制。localStorage 的数据是持久存储在用户的硬盘上的,而不是内存。这意…

.Net添加了引用,仍然提示找不到命名空间

如图,MyStudy控制台程序引用了一个C#类库MyClassLibrary 代码里也能敲出来using MyClassLibrary,但是build时始终提示找不到命名空间MyClassLibrary 我检查了MyClassLibrary的Assembly,命名空间名称无误 又检查了MyStudy里的引用信息&#x…

Linux SDIO-WiFi 协议栈

Linux SDIO-WiFi 协议栈 1. 简介2. BCMDHD2.1 WiFi模组2.2 驱动初始化(dhd_module_init) 3. Broadcom fullmac WLAN 1. 简介 2. BCMDHD BCMDHD:Broadcom Dongle Host DriverSIP:System In Package 2.1 WiFi模组 2.2 驱动初始化…

spring DisposableBean作用,在spring Bean销毁时的钩子 以及@PreDestroy

DisposableBean 作用 在Spring框架中,DisposableBean是一个接口,它定义了一个单一的方法,用于在Spring容器关闭时或一个由Spring管理的Bean不再需要时执行特定的清理操作。当一个Bean实现了DisposableBean接口,Spring容器会在销毁…

IntelliJ IDEA - 10 款 IDEA 宝贝插件,YYDS!

好久没发这种实用贴了,最近用到了一些能提升工作效率的IDEA插件,给小伙伴们分享一下。相信我,我分享的这些插件,都是实实在在能解决实际开发场景中痛处的。 1、POJO to JSON 开发工作中,常常在设计完API后&#xff0c…

FPGA实现AXI4总线的读写_如何写axi4逻辑

FPGA实现AXI4总线的读写_如何写axi4逻辑 一、AXI4 接口描述 通道信号源信号描述全局信号aclk主机全局时钟aresetn主机全局复位,低有效写通道地址与控制信号通道M_AXI_WR_awid[3:0]主机写地址ID,用来标志一组写信号M_AXI_WR_awaddr[31:0]主机写地址&…