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内存管理详细解析
Nov 11 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
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 Class 文章
2007/04/04 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php中spl_autoload详解
2014/10/17 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python实现的简单模板引擎功能示例
2017/09/02 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python正则表达式学习小例子
2020/03/03 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
材料化学应届生求职信
2013/10/09 职场文书
办公设备采购方案
2014/03/16 职场文书
抽样调查项目计划书
2014/04/24 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
技术员个人工作总结
2015/03/03 职场文书