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

ops/2024/10/21 9:38: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.ppmy.cn/ops/15515.html

相关文章

对观察者模式的理解

目录 一、场景1、题目描述 【[案例来源](https://kamacoder.com/problempage.php?pid1075)】2、输入描述3、输出描述4、输入示例5、输出示例 二、实现三、更复杂的场景 【[案例来源](https://refactoringguru.cn/design-patterns/observer/java/example#example-0--listeners-…

时间默认显示当前日期及系统时间

要将 xtdsSj 绑定到当前日期和系统时间&#xff0c;你可以在组件的 data 中初始化 xtdsSj 属性为当前日期及系统时间的字符串。然后&#xff0c;在组件创建时更新 xtdsSj&#xff0c;确保它始终显示当前日期和系统时间。 1.系统读数时间默认显示当前日期及系统时间 <templa…

自然语言生成软件!用码上飞CodeFlying来开发一个ChatBot

前言&#xff1a; 众所周知&#xff0c;2023年被称之为大模型的元年&#xff0c;随着ChatGPT的爆火&#xff0c;国内也涌现了诸多大模型的产品&#xff0c;从文生文、文生图片再到文生视频等多模态的应用成为了各家的主战场。但是在软件开发的领域&#xff0c;当前大部分的产品…

Flink Graph演变

1.概述 Flink 集群中运行的 Job&#xff0c;最终归根到底&#xff1a;还是构建一个高效能分布式并行执行的DAG执行图。一个 Flink 流式作业从 Client 提交到 Flink 集群到最后执行&#xff0c;总共经历 4 种状态&#xff0c;总体来说&#xff1a;Flink中的执行图可分成四层&…

使用excel文件生成sql脚本

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

Flask项目部署

1.debug模式 不用每次保存后重新运行&#xff08;热部署&#xff09; 看一下自己的ip ipconfig2.改host 可以让同一个局域网的人访问 3.修改port端口号 中间有空格

Xbox VR头盔即将推出,但它是Meta Quest的‘限量版’。

&#x1f4f3;Xbox VR头盔即将推出&#xff0c;但它是Meta Quest的‘限量版’。 微软与Meta合作推出限量版Meta Quest VR头映射Xbox风格&#xff0c;可能是Meta Quest 3或未来版本的特别定制版&#xff0c;附带Xbox控制器。这一合作是Meta向第三方硬件制造商开放其Quest VR头盔…

暗物质真的存在吗?暗物质和暗能量对宇宙学理论的挑战

暗物质和暗能量对宇宙学理论的挑战主要体现在以下几个方面&#xff1a; 普遍性和重要性&#xff1a;暗物质和暗能量在宇宙中的普遍性和重要性&#xff0c;以及目前对它们的理解仍然有限&#xff0c;对宇宙学理论提出了重大挑战。这些成分占据了宇宙总质量能量的大约95%&#xf…