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 相关文章推荐
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
AngularJs表单验证实例详解
May 30 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
在node中如何使用 ES6
Apr 22 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
Yii框架关联查询with用法分析
2014/12/02 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
python中pdb模块实例用法
2021/01/15 Python
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
公务员培训自我鉴定
2013/09/19 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
20年同学聚会感言
2014/02/03 职场文书
教师节商场活动方案
2014/02/13 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
《法国号》教学反思
2016/02/22 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技