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 相关文章推荐
javascript parseInt 函数分析(转)
Mar 21 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
什么是SOLID
Mar 24 Javascript
字节飞书面试promise.all实现示例
Jun 16 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
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
js实现返回顶部效果
2017/03/10 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
python分割文件的常用方法
2014/11/01 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
地球一小时宣传标语
2014/06/24 职场文书
生物工程专业求职信
2014/09/03 职场文书
五五普法心得体会
2014/09/04 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
Python学习之时间包使用教程详解
2022/03/21 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle