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 nth-child()选择器的简单应用
Jul 10 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
php实现简单的上传进度条
2015/11/17 PHP
超级退弹代码
2008/07/07 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
python生成密码字典的方法
2018/07/06 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python不同版本的_new_不同点总结
2020/12/09 Python
拉丁舞学习者的自我评价
2013/10/27 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
家长会演讲稿范文
2014/01/10 职场文书
毕业实习评语
2014/02/10 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
搞笑征婚广告词
2014/03/17 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
《角的度量》教学反思
2016/02/18 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书