其实很简单,一般的数组去重可以直接用 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. arduino驱动dbs820温度

    https://blog.csdn.net/Naisu_kun/article/details/88420357 超过温度报警 // #include <OneWire.h> //可以不引 ...

  2. bootstrap基础自我总结

    *今天自学了一些封装的css,看起来官网很强大,但是因为源码备注都是英文的情况下,还是感觉想深入有点力不从心,发现度娘没有中文手册,无奈,不过还好代码无国界,基本都是能看懂的,备注也影响不大(安慰自己 ...

  3. Office Tool Plus 安装Office

    Office Tool Plus 是一款集office 卸载安装管理,激活等多功能于一体的神器. 官网:https://otp.landian.vip/en-us/ 下载 安装 值得注意的是Retai ...

  4. Educational Round 64 题解

    前言: 这场太难了……我一个紫名只打出两题……(虽说感觉的确发挥不够好) 一群蓝绿名的dalao好像只打了两题都能升分的样子…… 庆幸的是最后A出锅然后unr了>///< 写一波题解纪念这 ...

  5. SDN实验2

    第二次sdn实验: 1. 利用mininet创建如下拓扑,要求拓扑支持OpenFlow 1.3协议,主机名.交换机名以及端口对应正确,请给出拓扑Mininet执行结果,展示端口连接情况. 本次使用py ...

  6. android webview 全屏100%显示图片

    这里引用 第三方类库 implementation 'org.jsoup:jsoup:1.10.2' 定义工具类 HtmlUtils import org.jsoup.Jsoup; import or ...

  7. windows上svn图标不显示 绿色对号

    http://blog.csdn.net/fengyupeng/article/details/12514449 症状1:项目左侧导航栏表不能正常显示图标 方法:windows->prefere ...

  8. 关于JavaSE程序的小总结(不分先后顺序 后续继续补充)

    统计字符串中某个字符串出现的次数 package com.jiang.demo01; public class Demo01 { public static void main(String[] ar ...

  9. 以前写的canvas 小游戏 贪吃蛇代码

    效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...

  10. 避免因为Arcgis Server服务设置不当导致Oracle Process溢出的方法

    我之前写过一篇文章<arcsoc进程无限增长导致oracle processes溢出>(见链接:https://www.cnblogs.com/6yuhang/p/9379086.html ...