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中:file选择器用法实例
Jan 04 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php权重计算方法代码分享
2014/01/09 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
js实现旋转木马效果
2017/03/17 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python多线程thread及模块使用实例
2020/04/28 Python
英国现代市场:ARKET
2019/04/10 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
年终考核评语
2014/01/19 职场文书
师德建设实施方案
2014/03/21 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
Go 内联优化让程序员爱不释手
2022/06/21 Golang