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 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
两个数组去重的JS代码
Dec 04 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
javascript History对象原理解析
Feb 17 Javascript
什么是SOLID
Mar 24 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读注册表
2006/10/09 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
js资料prototype 属性
2007/03/13 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
javascript关于继承解析
2016/05/10 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
Python random模块常用方法
2014/11/03 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python验证码截取识别代码实例
2020/05/16 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
申论倡议书范文
2014/05/13 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
迎新生晚会主持词
2015/06/30 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
学生病假条范文
2015/08/17 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
pandas提升计算效率的一些方法汇总
2021/05/30 Python
webpack的移动端适配方案小结
2021/07/25 Javascript
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL