vue中对象数组去重的实现


Posted in Javascript onFebruary 06, 2020

其实很简单,一般的数组去重可以直接用 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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
2019最新21个MySQL高频面试题介绍
Feb 06 #Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 #Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 #Javascript
JavaScript实现左右滚动电影画布
Feb 06 #Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 #Javascript
使用node.JS中的url模块解析URL信息
Feb 06 #Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 #Javascript
You might like
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
jquery replace方法去空格
2017/05/08 jQuery
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
遗传算法python版
2018/03/19 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
通过python爬虫赚钱的方法
2019/01/29 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
采购部长岗位职责
2014/06/13 职场文书
关于教师节的广播稿
2014/09/10 职场文书
就业导师推荐信范文
2015/03/27 职场文书
社区党支部承诺书
2015/04/29 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL