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判断DOM何时加载完毕的技巧
Nov 11 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 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
一些星际专用术语解释
2020/03/04 星际争霸
PHP实现分页的一个示例
2006/10/09 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php数组去重复数据示例
2014/02/25 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
javascript 播放器 控制
2007/01/22 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
jcrop基本参数一览
2013/07/16 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
学校后勤岗位职责
2014/02/19 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python