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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
javascript数据类型示例分享
Jan 19 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
SVG描边动画
Feb 23 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
Vue组件系列开发之模态框
Apr 18 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
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python实现俄罗斯方块
2018/06/26 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
用pycharm开发django项目示例代码
2019/06/13 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
经典C++面试题一
2016/11/06 面试题
房屋出售协议书
2014/04/10 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
销售代理协议书
2014/09/30 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android