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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 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
人族 TERRAN 概述
2020/03/14 星际争霸
PHP教程 基本语法
2009/10/23 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
javascript关于继承解析
2016/05/10 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
应用化学专业职业生涯规划书
2013/12/31 职场文书
党员的自我评价范文
2014/01/02 职场文书
交通事故协议书范本
2014/11/18 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
幼儿园辞职书
2015/02/26 职场文书
单位政审意见范文
2015/06/04 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
基于Python编写一个监控CPU的应用系统
2022/06/25 Python
MySQL分布式恢复进阶
2022/07/23 MySQL
Python中tqdm的使用和例子
2022/09/23 Python