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

news2025/1/13 7:34:46

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

文章目录

  • 前言
  • 一、数组去重说明
  • 二、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.coloradmin.cn/o/1623622.html

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

相关文章

昆明航空x-s3-s4e算法分析

声明 本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 如有侵权,请联系我进行删除。 这里只是我分析的分析过程,以及一些重要点的记录…

比亚迪海洋网再添实力爆款,海豹06DM-i、OCEAN-M、海狮07EV登陆北京车展

4月25日,比亚迪海洋网携海豹06DM-i、OCEAN-M、海狮07EV一齐亮相北京车展,引发关注热潮。其中,海洋网全新中型轿车海豹06DM-i价格区间12万-15万元,将于今年二季度上市;行业首款两厢后驱纯电钢炮OCEAN-M价格区间15万-20万…

【从浅学到熟知Linux】基础IO第四弹=>动静态库(含第三方动静态的使用、自制动静态库、关于动静态库加载调用原理)

🏠关于专栏:Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程等内容。 🎯每天努力一点点,技术变化看得见 文章目录 静态库静态库的介绍及使用方法自制静态库使用第三方提供的静态库 动态库动态库的介绍及使用方法自制动态库…

react之初识state

第二章 - 添加交互 State: 组件的记忆 组件通常需要根据交互更改屏幕上显示的内容。输入表单应该更新输入字段,单击轮播图上的“下一个”应该更改显示的图片,单击“购买”应该将商品放入购物车。组件需要“记住”某些东西:当前输入值、当前…

Linux操作系统的安装与配置

目录 (1)实验目的: (2)实验内容: (3)实验原理: (4)实验步骤: 1.先下载vmware workstation pro软件,下载地址:https://www.vmware.com/products/workstation-pr o/workstation-pro-evaluation.html 2.下载完成后&…

使用 pytorch训练自己的图片分类模型

如何自己训练一个图片分类模型,如果一切从头开始,对于一般公司或个人基本是难以实现的。其实,我们可以利用一个现有的图片分类模型,加上新的分类,这种方式叫做迁移学习,就是把现有的模式知识,转…

重要提醒!别再这样搭建帮助中心系统了

你们有没有这样的经历呢?当你使用某产品或服务时遇到问题,打开产品或服务的帮助中心,但界面设计太复杂,内容搜出来的内容多但是混乱不一致。或者更糟糕的是,帮助中心的界面设计看得人眼花缭乱。 所以,反思一…

全长直线度的检查方法和设备

关键字:全长直线度, 直线度测量仪,直线度测量机,直线度检测,直线度检测设备, 全长直线度的检测是确保机械部件、导轨、机床工作台等在全长范围内直线运动精度的重要手段。以下是一些常用的全长直线度检测方法和设备: --------直角尺和水平仪--------:…

bit、进制、位、时钟(窗口)、OSI七层网络模型、协议、各种码

1.bit与进制 (个人理解,具体电路是非常复杂的) 物理层数据流,bit表示物理层数据传输单位, 一个电路当中,通过通断来表示数字1和0 两个电路要通讯,至少要两根线,一根作为电势参照…

浓眉大眼的Apple开源OpenELM模型;IDM-VTON试衣抱抱脸免费使用;先进的语音技术,能够轻松克隆任何人的声音

✨ 1: openelm OpenELM是苹果机器学习研究团队发布的高效开源语言模型家族 OpenELM是苹果机器学习研究团队开发的一种高效的语言模型,旨在推动开放研究、确保结果的可信赖性、允许对数据和模型偏见以及潜在风险进行调查。其特色在于采用了一种分层缩放策略&#x…

定时器介绍

定时器简介 一、周期定时功能二、PWM功能三、脉冲捕获四、事件计数五、扩展触发功能 一、周期定时功能 定时器的时钟为所选时钟源LRC、OSC、HRC、PLL通过定时器内的预分频器TMRDIV分频得到。 二、PWM功能 包括向上、下、中央计数方式,以向上计数为例计数和引脚产生…

使用excel文件生成sql脚本

目录 1、excel文件脚本变量2、公式示例 前言:在系统使用初期有一些基础数据需要从excel中导入到数据库中,直接导入的话可能有些字段用不上,所以就弄一个excel生成sql的导入脚本,这样可以将需要的数据填到指定的列即可生成sql。 1、…

前端路由的实现原理

当谈到前端路由时,指的是在前端应用中管理页面导航和URL的机制。前端路由使得单页应用(Single-Page Application,SPA)能够在用户与应用交互时动态地加载不同的视图,而无需每次都重新加载整个页面。 在前端开发中&…

【VTKExamples::Meshes】第十八期 OBBDicer

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例OBBDicer,并解析接口vtkOBBDicer,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 1. …

AT7456E 贴片TSSOP-28 新版本 OSD字符叠加芯片

AT7456E OSD(On-Screen Display)叠加芯片的应用领域相当广泛,主要用于在视频信号上传递附加信息。根据您提供的信息[2],以下是AT7456E的一些典型应用领域: 1.无人机:用于在无人机的视频传输中叠加关键信息…

NIKKE胜利女神妮姬1.5周年(PC)怎么下载一键下载安装教程一看就会

NIKKE胜利女神妮姬1.5周年(PC)怎么下载?一键下载安装教程一看就会 近日一款新型FPS游戏NIKKE引起了游戏爱好者们的热议,这款游戏是由Shift Up公司开发的一款二次元风格美少女射击类RPG游戏。玩家可以通过抽卡获取不同的角色,并通过主线支线关…

windows下git提交修改文件名大小写提交无效问题

windows系统不区分大小写,以及git提交忽略大小写,git仓库已存在文件A.js,本地修改a.js一般是没有提交记录的,需要手动copy一份出来A.js,再删除A.js文件提交仓库删除后,再提交修改后的a.js文件。 windows决…

Next.js 14 App Router引入 farmer-motion 初始化异常解决,顺带学点知识

前言 farmer-motion 是一个非常好用的动画库,当然用来做组件切换和路由切换过渡更不在话下。 记录一下,Next.js 14 App Router 下引入初始化异常的解决姿势,顺带扯一下 next.js 的知识点; 问题 过渡组件代码 我们拿 farmer-m…

SAP DMS修改文档操作简介

修改DMS文档的事物代码是—CV02N,同样的删除、审批都是用的CV02N对文档进行操作 1、文档的审批,根据我们后台对文档版本的配置通过CV02N对这个文档状态的一个变更 当审批后系统就会显示绿灯,如下图 2、文档的标记删除 我们在CV02N的界面中直接点击删除标记即可。 点击后…

Error opening file a bytes-like object is required,not ‘NoneType‘

错误显示,打开的是一个无效路径的文件 查看json文件内容,索引的路径与json文件保存的路径不同 方法:使用python脚本统一修改json文件路径 import json import os import argparse import cv2 from tqdm import tqdm import numpy as np impo…