其实很简单,一般的数组去重可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去重

  1. unique(arr) {
  2. const res = new Map();
  3. return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
  4. }

下面有一个示例,根据对象的id作为去重的依据:

  1.   <el-button type="primary" size="medium" @click="quChong()">点击</el-button>
  1. quChong() {
  2. let arr = [
  3. {
  4. id: 1,
  5. name: '111'
  6. },
  7. {
  8. id: 1,
  9. name: '111'
  10. },
  11. {
  12. id: 2,
  13. name: '222'
  14. },
  15. {
  16. id: 3,
  17. name: '333'
  18. }
  19. ];
  20. console.log(arr);
  21. console.log('--------------------');
  22. let arr1 = this.unique(arr);
  23. console.log(arr1);
  24. },
  25. unique(arr) {
  26. const res = new Map();
  27. return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
  28. },

  

这样就很简单的去重了

嗯,就酱~~

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. texlive相关问题

    1.The font "WenQuanYi Micro Hei" cannot be found. 解决方法:下载WenQuanYi Micro Hei的字体(以ttf结尾),粘贴 ...

  2. opacity兼容性问题

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...

  3. 使用flow提升js代码的健壮性

    https://www.jianshu.com/p/7716dc8b2206    Flow基本语法及使用 https://www.cnblogs.com/tianxiangbing/p/flow.h ...

  4. 【luoguP1533】可怜的狗狗

    题目链接 发现区间按左端点排序后右端点也是单调的,所以扫一遍就行了,用权值线段树维护第\(k\)大 #include<algorithm> #include<iostream> ...

  5. idea输出文件夹没有jsp页面

    目录 idea输出文件夹没有jsp页面 问题描述 解决办法 idea输出文件夹没有jsp页面 问题描述 开始创建没有使用web的模板, 自己创建tomcat等配置, 后来启动发现没有index.jsp ...

  6. python requests 上传excel数据流

    headers=self.headers #获取导入模版 file_home = self.import_template log.info(file_home) wb = load_workbook ...

  7. 第02组 Alpha冲刺(3/6)

    队名:無駄無駄 组长博客 作业博客 组员情况 张越洋 过去两天完成了哪些任务 摸鱼 提交记录(全组共用) 接下来的计划 沟通前后端成员,监督.提醒他们尽快完成各自的进度 学习如何评估代码质量 准备Al ...

  8. Java的策略和保护域

    参考文章: (1)java之jvm学习笔记十(策略和保护域) https://blog.csdn.net/yfqnihao/article/details/8271415

  9. 【ASP.NET Core分布式项目实战】(四)使用mysql/mysql-server安装mysql

    Docker安装Mysql 拉取镜像 docker pull mysql/mysql-server 运行mysql docker run -d -p : --name mysql01 mysql/my ...

  10. shell 一些例子

    #!/bin/bash #Filename: password.sh  by:-V love cmx stty -echo #这里表示 开启隐藏在终端的输出 read -p "Enter y ...