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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
JS 树形递归实例代码
May 18 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
Angular2自定义分页组件
Apr 19 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php实现XSS安全过滤的方法
2015/07/29 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
django中的数据库迁移的实现
2020/03/16 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
工商管理本科毕业生求职信范文
2013/10/05 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
心理咨询承诺书
2014/05/20 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014年实习生工作总结
2014/11/27 职场文书
基层党支部承诺书
2015/04/30 职场文书
公司年会主持词范文!
2019/05/07 职场文书
导游词之山东孔庙
2019/11/04 职场文书