vue中对象数组去重
其实很简单,一般的数组去重可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去重
unique(arr) {
const res = new Map();
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
}
下面有一个示例,根据对象的id作为去重的依据:
<el-button type="primary" size="medium" @click="quChong()">点击</el-button>
quChong() {
let arr = [
{
id: 1,
name: '111'
},
{
id: 1,
name: '111'
},
{
id: 2,
name: '222'
},
{
id: 3,
name: '333'
}
];
console.log(arr);
console.log('--------------------');
let arr1 = this.unique(arr);
console.log(arr1);
},
unique(arr) {
const res = new Map();
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
},

这样就很简单的去重了
嗯,就酱~~
vue中对象数组去重的更多相关文章
- JavaScript中对象数组去重方法
在一次对后端返回的对象数组的操作时想通过indexOf()或者includes()的方法来实现对对象数组的去重但是行不通,因为用indexOf()返回的都是-1,一下记录两种对象数组(更具指定属性)去 ...
- JavaScript中好用的对象数组去重
对象数组去重 Demo数据如下: var items= [{ "specItems": [{ "id": "966480614728069122&qu ...
- ES6 set和map数据结构对对象数组去重简单实现
自从有了es6的set数据结构,数组的去重可以简单用一行代码实现,比如下面的方式 let arr = [1, 2, 2, 3, 4] function unique (arr) { return [. ...
- vue中修改数组,dom未更新的问题
vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...
- 对List中对象的去重
今天项目中遇到了一个对List中对象去重的问题. 首先对于我们自己系统中的对象我们只要重写该对象的 equal 和 hashcode 即可(利用对象中的能够唯一确定对象的属性). 但是我遇到的不是本系 ...
- Javascript中的数组去重-indexof方法
在Javascript中,有时我们会用到数组去重.我在这里给大家介绍一下本人认为最简单实用的一种方法-indexOf()去重. var arr = [1,1,1,2,2,2,3,3,4,5,6,2,1 ...
- JavaScript中对象数组 作业
var BaiduUsers = [], WechatUsers = []; var User = function(id, name, phone, gender, age, salary) { t ...
- JavaScript中对象数组 根据某个属性值 然后push到新的数组
原文链接 https://segmentfault.com/q/1010000010075035 将下列对象数组中,工资大于1w的员工,增加到对象数组 WanSalary中 var BaiduUser ...
- JavaScript中对象数组 作业题目以及作业
var BaiduUsers = [], WechatUsers = []; var User = function(id, name, phone, gender, age, salary) { t ...
随机推荐
- 嵌入式linux开发uboot启动过程源码分析(一)
一.uboot启动流程简介 与大多数BootLoader一样,uboot的启动过程分为BL1和BL2两个阶段.BL1阶段通常是开发板的配置等设备初始化代码,需要依赖依赖于SoC体系结构,通常用汇编语言 ...
- ManiFest.MF
Manifest-Version: 1.0 //指定manifest文件的版本信息 Bundle-ManifestVersion: 2 //指定该包遵从 OSGi 规范 V3 或者 OSGi 规范 V ...
- html--前端css样式初识
一.CSS概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用css. CS ...
- Codeforces 379F New Year Tree
F. New Year Tree time limit per test2 seconds memory limit per test256 megabytes You are a programme ...
- contest5 CF991 div2 ooooxx ooooox ooooox
题意 div2D 给出一个棋盘, 有一些点不能放, 总共\(2\)排, 长度\(n(\le 100)\) 在上面空位摆放\('L'\)字形的牌, 问最多能放几个 例如: 00X00X0XXX0 0XX ...
- [HNOI2015]亚瑟王(概率期望,DP)
题目大意:很清晰了,不写了. $1\le T\le 444,1\le n\le 220,0\le r\le 132,0<p_i<1,0\le d_i\le 1000$. $p_i$ 和 $ ...
- 窗体的keyPreview属性
如果把窗体的keyPreview属性设置为true,那么窗体将比其内的控件优先获得键盘事件的激活权.比如Form1和其内的文本框Text1都准备响应keyPress事件,那么以下代码将首先激活窗体的k ...
- Java编程思想之十一 持有对象
如果一个程序只包含固定数量的且其生命期都是已知的对象,那么这是一个非常简单的程序. 11.1 泛型和类型安全的容器 使用ArrayList:创建一个实例,用add()插入对象,然后用get()访问对象 ...
- 1-6docker数据共享与持久化
1.在 Docker 内部以及容器之间管理数据,在容器中管理数据主要有两种⽅式: 数据卷(Data Volumes) 挂载主机⽬录 (Bind mounts) 2.数据卷 数据卷 是⼀个可供⼀个或多个 ...
- 【操作系统之六】Linux常用命令之less
一.概念less 工具也是对文件或其它输出进行分页显示的工具,是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more .tail更加的有弹性.在 more 的时候,我们并没有 ...