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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Python实现Linux的find命令实例分享
2017/06/04 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python 命令行传入参数实现解析
2019/08/30 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
斯福泰克软件测试面试题
2015/02/16 面试题
应聘自荐信
2013/12/14 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
老龄工作先进事迹
2014/08/15 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
学生会个人总结范文
2015/02/15 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
JS实现简单的九宫格抽奖
2022/06/28 Javascript