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 相关文章推荐
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
浅谈react路由传参的几种方式
Mar 23 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
我的群发邮件程序
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
Javascript开发包大全整理
2006/12/22 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
Python之指数与E记法的区别详解
2019/11/21 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
会计职业生涯规划范文
2014/01/04 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
建筑工地标语
2014/06/18 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
实习协议书
2015/01/27 职场文书
贷款工资证明范本
2015/06/12 职场文书
python基础之while循环语句的使用
2021/04/20 Python
解读Vue组件注册方式
2021/05/15 Vue.js
你需要掌握的20个Python常用技巧
2022/02/28 Python
分享几种python 变量合并方法
2022/03/20 Python
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android