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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
自动更新作用
2006/10/08 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python类中super() 的使用解析
2019/12/19 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
酒店经理职责
2014/01/30 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android