uniapp从数组中删除重复项

news/2024/11/17 0:22:04/

在 UniApp(或任何使用 JavaScript 的环境中)从数组中删除重复项,你可以使用多种方法。以下是一些常见的方法:

1. 使用 filter()indexOf()

你可以使用 Array.prototype.filter() 方法结合 Array.prototype.indexOf() 方法来创建一个新数组,该数组只包含原始数组中的唯一元素。

javascript">let arr = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 1, name: 'Alice' }, // 重复项// ...
];// 假设我们要根据 'id' 属性去重
let uniqueArr = arr.filter((item, index, self) => {return self.findIndex(t => t.id === item.id) === index;
});console.log(uniqueArr);

2. 使用 Set 对象和 JSON.stringify()

如果你的对象可以安全地转换为字符串(即它们的属性顺序不重要,且没有函数或循环引用),你可以先将对象转换为字符串,然后使用 Set 对象来去重,最后再将字符串转回对象。但请注意,这种方法可能不适用于包含复杂数据结构的对象。

javascript">let arr = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 1, name: 'Alice' }, // 重复项// ...
];let uniqueArr = [...new Set(arr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));console.log(uniqueArr);

3. 使用 reduce() 方法

你也可以使用 Array.prototype.reduce() 方法来创建一个新的数组,其中只包含唯一的元素。

javascript">let arr = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 1, name: 'Alice' }, // 重复项// ...
];let uniqueArr = arr.reduce((accumulator, currentValue) => {const existing = accumulator.find(item => item.id === currentValue.id);if (!existing) {accumulator.push(currentValue);}return accumulator;
}, []);console.log(uniqueArr);

4. 使用第三方库(如 lodash 的 _.uniqBy

如果你在使用像 lodash 这样的第三方库,你可以使用其提供的 _.uniqBy 方法来根据指定的属性去重。

首先,你需要安装 lodash:

npm install lodash --save

然后,在你的代码中:

javascript">import _ from 'lodash';let arr = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 1, name: 'Alice' }, // 重复项// ...
];let uniqueArr = _.uniqBy(arr, 'id');console.log(uniqueArr);

选择哪种方法取决于你的具体需求,比如性能、可读性和代码库的现有依赖。如果你正在处理大量数据或性能是一个关键考虑因素,那么你应该测试不同的方法以确定哪种方法在你的特定情况下最有效。


http://www.ppmy.cn/news/1456055.html

相关文章

有效的括号--力扣经典面试题

目录 引言 题目描述: 思路分析: 代码展示: 引言 这道题是关于栈的经典面试题,如果大家对栈这个数据结构不是很了解的话,可以先看这篇博客--数据结构之栈的超详细讲解-CSDN博客 题目描述: 给定一个只包括 (,),{,},[&#xff0c…

【操作指南】银河麒麟高级服务器操作系统内核升级——基于4.19.90-17升级

1. 升级清单 升级包及依赖包清单如下。 kernel ARM架构 kernel-core-4.19.90-23.18.v2101.ky10.aarch64.rpm kernel-modules-4.19.90-23.18.v2101.ky10.aarch64.rpm kernel-4.19.90-23.18.v2101.ky10.aarch64.rpm kernel-modules-extra-4.19.90-23.18.v2101.ky10.aarch64.r…

数据结构相关

数据结构相关 文章目录 数据结构相关[TOC](文章目录)前言一、数据结构介绍二、不同的逻辑结构的存储方案(Java实现)2.1 线性结构:线性表、数组2.2 线性结构:栈2.3 线性结构:队列2.4 树形结构:树 三、一些常见的3.1 布隆过滤器Bloo…

Java实现mysql的分页及流式查询导出

一、前言 在实际应用中,当我们需要导出大数据量数据时,可能会存在一些问题,因为当我们一下子将数据全部加载出来到内存中,很可能会发生OOM(内存溢出),而且查询会很慢,因为框架耗费大量的时间和内存去把数据…

Linux下网络编程-简易Epll服务器和客户端

Linux下网络编程-简易Epll服务器和客户端 简易Epll服务器: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa/inet.h> #include <sys/socket.h> #include <sys/epoll.h>#define B…

Llama3-Tutorial之XTuner微调Llama3个人小助手

Llama3-Tutorial之XTuner微调Llama3个人小助手 使用XTuner微调llama3模型。 参考&#xff1a; https://github.com/SmartFlowAI/Llama3-Tutorial 1. web demo部署 参考上一节内容已经完成web demo部署&#xff0c;进行对话测试, 当前回答基于llama3官方发布的模型进行推理生成&…

[Linux深度学习笔记4.28]

隐藏权限 : 防止root用户误操作删除, 查看隐藏权限 : lsattr设置隐藏权限 : chattrchattr a : 可以追加内容,不能编辑不能删除chattr i : 不能编辑不能删除文件chattr A :文件访问时间固定下来stat : 查看文件的详细信息 进程管理 : 进程 : 一个正在运行的程序,主进程,子进程线…

MES系统:优化生产执行,实现高效、灵活的制造管理

MES系统作为操作执行层可以缩短排产周期&#xff0c;解决紧急插单问题&#xff1b;通过计划、采集、管控等功能来改进生产执行&#xff1b;与实际生产即时接轨车间时间驱动上层的商务活动。 MES系统包含基础数据、物料和工艺管理、生产过程管理、APS排产、人员管理、设备与工具…