js中数组对象去重的两种方法


Posted in Javascript onJanuary 18, 2019

方法一:

采用对象访问属性的方法,判断属性值是否存在,如果不存在就添加。

方法二:

采用数组中的reduce方法,遍历数组,也是通过对象访问属性的方法

var arr = [{
   key: '01',
   value: '乐乐'
  }, {
   key: '02',
   value: '博博'
  }, {
   key: '03',
   value: '淘淘'
  },{
   key: '04',
   value: '哈哈'
  },{
   key: '01',
   value: '乐乐'
  }];
  // 方法1:利用对象访问属性的方法,判断对象中是否存在key
  var result = [];
  var obj = {};
  for(var i =0; i<arr.length; i++){
   if(!obj[arr[i].key]){
     result.push(arr[i]);
     obj[arr[i].key] = true;
   }
  }
  console.log(result); // [{key: "01", value: "乐乐"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]
  // 方法2:利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数,第二个参数是item的初始值
  var obj = {};
  arr = arr.reduce(function(item, next) {
   obj[next.key] ? '' : obj[next.key] = true && item.push(next);
   return item;
  }, []);
  console.log(arr); // [{key: "01", value: "乐乐"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
简单的代码实现jquery定时器
Nov 17 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
JS实现音量控制拖动
Jan 15 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 #Javascript
js中的reduce()函数讲解
Jan 18 #Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 #Javascript
vue-cli3 karma单元测试的实现
Jan 18 #Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 #Javascript
如何解决.vue文件url引用文件的问题
Jan 18 #Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
You might like
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
对python调用RPC接口的实例详解
2019/01/03 Python
numpy.where() 用法详解
2019/05/27 Python
django之自定义软删除Model的方法
2019/08/14 Python
使用Pycharm分段执行代码
2020/04/15 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
大型会议接待方案
2014/03/01 职场文书
学历公证书范本
2014/04/09 职场文书
敬老院活动总结
2014/04/28 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
小学校本培训方案
2014/06/06 职场文书
医德医魂心得体会
2014/09/11 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
八一建军节慰问信
2015/02/14 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python