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 源码分析笔记(2) 变量列表
May 28 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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 全角转半角实现代码
2010/05/16 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
学习python处理python编码问题
2011/03/13 Python
python通过索引遍历列表的方法
2015/05/04 Python
python抽象基类用法实例分析
2015/06/04 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
python模拟实现分发扑克牌
2020/04/22 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
企业总经理任命书
2014/06/05 职场文书
2015年检验科工作总结
2015/04/27 职场文书
关于远足的感想
2015/08/10 职场文书
Python实现批量自动整理文件
2022/03/16 Python
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android