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 ...
随机推荐
- 201871010133-赵永军《面向对象程序设计(java)》第二周学习总结
201871010133-赵永军<面向对象程序设计(java)>第二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- python基础之六:编码简介以及python3中的编码
1.常见的四种编码方式的编码过程: ascii A : 00000010 8位 一个字节 unicode A : 00000000 00000001 00000010 00000100 32位 四个字 ...
- Scheme、Claim、ClaimsIdentity、ClaimsPrincipal介绍
在 token 创建.校验的整个生命周期中,都涉及到了 Scheme.Claim.ClaimsIdentity.ClaimsPrincipal 这些概念,如果你之前有使用过微软的 Identity ...
- ESA2GJK1DH1K升级篇: 关于升级篇数据校验
前言 鉴于大家都希望升级的时候加入数据校验,所以就满足大家的要求. 其实我也希望自己做的足够的稳定可靠,让大家使用起来放心. 上一节测试了一节加入校验以后的操作方式,这节来详细的说一下校验部分的代码. ...
- nginx配置文件解释
#全局配置 # For more information on configuration, see:# * Official English Documentation: http://nginx. ...
- 解析node-cors模块
(function () { 'use strict'; var assign = require('object-assign'); var vary = require('vary'); var ...
- html中利用flex容器书写的布局样式
首先页面基本样式见下图: 如有兴趣可以打开https://migloo.gitee.io/front 或者 https://www.igloo.xin/front 进行查看
- 聊一聊 JS 输出为 [object object] 是怎么回事?
聊一聊 JS 输出为 [object object] 是怎么回事? 今天在学习ES6中的 Symbol 数据类型时,在写demo时控制台输出为 Symbol[object object] ,当时有点疑 ...
- phpcms新建模板页教程
phpcms新建模板页教程1 直接去template文件夹里的复制的模板页 比方说list1.html2 去后台 界面模板风格 default 默认模板 点击详情列表 找到list1.htm 设置中文 ...
- Linux内核kobject结构体分析
1.前言 Linux内核中有大量的驱动,而这些驱动往往具有类似的结构,根据面向对象的思想,可以将共同的部分提取为父类,而这个父类就是kobject,kobject结构体中包含了大量设备的必须信息,而三 ...