其实很简单,一般的数组去重可以直接用 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中对象数组去重的更多相关文章

  1. JavaScript中对象数组去重方法

    在一次对后端返回的对象数组的操作时想通过indexOf()或者includes()的方法来实现对对象数组的去重但是行不通,因为用indexOf()返回的都是-1,一下记录两种对象数组(更具指定属性)去 ...

  2. JavaScript中好用的对象数组去重

    对象数组去重 Demo数据如下: var items= [{ "specItems": [{ "id": "966480614728069122&qu ...

  3. ES6 set和map数据结构对对象数组去重简单实现

    自从有了es6的set数据结构,数组的去重可以简单用一行代码实现,比如下面的方式 let arr = [1, 2, 2, 3, 4] function unique (arr) { return [. ...

  4. vue中修改数组,dom未更新的问题

    vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...

  5. 对List中对象的去重

    今天项目中遇到了一个对List中对象去重的问题. 首先对于我们自己系统中的对象我们只要重写该对象的 equal 和 hashcode 即可(利用对象中的能够唯一确定对象的属性). 但是我遇到的不是本系 ...

  6. Javascript中的数组去重-indexof方法

    在Javascript中,有时我们会用到数组去重.我在这里给大家介绍一下本人认为最简单实用的一种方法-indexOf()去重. var arr = [1,1,1,2,2,2,3,3,4,5,6,2,1 ...

  7. JavaScript中对象数组 作业

    var BaiduUsers = [], WechatUsers = []; var User = function(id, name, phone, gender, age, salary) { t ...

  8. JavaScript中对象数组 根据某个属性值 然后push到新的数组

    原文链接 https://segmentfault.com/q/1010000010075035 将下列对象数组中,工资大于1w的员工,增加到对象数组 WanSalary中 var BaiduUser ...

  9. JavaScript中对象数组 作业题目以及作业

    var BaiduUsers = [], WechatUsers = []; var User = function(id, name, phone, gender, age, salary) { t ...

随机推荐

  1. LOJ 3120: 洛谷 P5401: 「CTS2019 | CTSC2019」珍珠

    题目传送门:LOJ #3120. 题意简述: 称一个长度为 \(n\),元素取值为 \([1,D]\) 的整数序列是合法的,当且仅当其中能够选出至少 \(m\) 对相同元素(不能重复选出元素). 问合 ...

  2. 完美解决该死的ie6下select总是置于最上层bug

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. LOJ#107. 维护全序集(FHQ Treap)

    题面 传送门 题解 板子,没啥好说的 //minamoto #include<bits/stdc++.h> #define R register #define inline __inli ...

  4. 【java异常】org.springframework.web.util.NestedServletException: Handler processing failed;Can't connect to X11 window server using 'localhost:10.0' as the value of th

    tomcat工程中创建二维码失败.抛出异常Can't connect to X11 window server using 'localhost:10.0' as the value of th 因为 ...

  5. ESP8266 SDK开发: 测试下诱人的程序

    前言 这一节测试一下诱人的程序 实现的功能,APP通过SmartConfig给Wi-Fi模块配网并绑定设备,然后通过MQTT远程控制开发板的继电器, APP显示ESP8266采集的温湿度数据. 简而言 ...

  6. contest1 CF70 BetaRound ooxxx ooxxx ooooo

    CDE set之类不要直接用lower_bound, 要用set.lower_bound()

  7. Java集合详解8:Java集合类细节精讲,细节决定成败

    <Java集合详解系列>是我在完成夯实Java基础篇的系列博客后准备开始写的新系列. 这些文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查 ...

  8. Windows10 下 JAVA JDK版本设置修改操作

    一般情况下,先修改系统环境变量,右键点击桌面上的“此电脑”图标中,选择“属性”,在弹出的属性窗口中选择“高级系统设置”,然后点击“环境变量”     在弹出窗口中的“系统变量”,查到“JAVA_HOM ...

  9. stacking method house price in kaggle top10%

    整合几部分代码的汇总 隐藏代码片段 导入python数据和可视化包 导入统计相关的工具 导入回归相关的算法 导入数据预处理相关的方法 导入模型调参相关的包 读取数据 特征工程 缺失值 类别特征处理-l ...

  10. 【RS】AutoRec: Autoencoders Meet Collaborative Filtering - AutoRec:当自编码器遇上协同过滤

    [论文标题]AutoRec: Autoencoders Meet Collaborative Filtering (WWW'15) [论文作者]Suvash Sedhain †∗ , Aditya K ...