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 ...
随机推荐
- destoon聚合搜索页面模板
最近学习大型站点SEO策略,谈到关于大站需要做聚合页面tags,所以根据destoon系统自己做了一个聚合页面,在此分享给吾爱的朋友,一起学习参考! 模板演示站点:http://zhimo.yuanz ...
- 什么是amp?amp有什么用处?
AMP是移动页面加速器Accelerated Mobile Pages的简称,是Google带领开发的开源项目,目的是为提升移动设备对网站的访问速度.它的核心称作AMP HTML,是一种新型的HTML ...
- 项目1:ATM+购物商城项目
项目1:ATM+购物商城 1.项目介绍 项目需求: # 项目需求如下:'''- 额度 15000或自定义- 实现购物商城,买东西加入购物车,调用信用卡接口结账- 可以提现,手续费5%- 支持多账 ...
- eclipse export runnable jar(导出可执行jar包) runnable jar可以执行的
如果要导出可运行的JAR文件,需要选择Runnable Jar File. 1. 选择要到处JAR文件的工程,右键选择“Export”: 2. 选择“Java-->Runnable JAR fi ...
- CF1081C-Colorful Bricks-(dp||组合数)
http://codeforces.com/problemset/problem/1081/C 题意:有n个排成一行板块,有m种颜色,要让这些板块有k对相邻板块不同颜色,有多少种涂色方法? 比如样例2 ...
- Spring Cloud微服务安全实战_3-4_API安全机制之认证
认证:登录和认证是 两个概念,比如你两周.一个月,可能只登录了一次,但认证却是每次访问都要经过的步骤. 对于图中的认证不成功,也要继续处理,这个我觉得得看业务,比如管理系统,不登录就不让你访问,但对 ...
- Codeforces Round #605 (Div. 3) E - Nearest Opposite Parity (超级源点)
- selenium--单选下拉列表
下拉选择 from selenium import webdriver from time import sleep driver = webdriver.Chrome() driver.get(&q ...
- js 判断字符串是否为空或是否全为空格
判断字符串是否为空 if (str == "") { } 判断字符串是否为空且不能全为空格 if (str.match(/^[ ]*$/)) { } 第二种方式不仅可以校验空格 ...
- python 使用nmap 模块
官网 https://pypi.org/project/python-nmap/ >>> import nmap>>> nm = nmap.PortScannerS ...