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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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学习教程之第2天
2008/06/15 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
python 禁止函数修改列表的实现方法
2017/08/03 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
促销活动策划方案
2014/01/12 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
2015年教师新年寄语
2014/12/08 职场文书
语文复习计划
2015/01/19 职场文书
天河观后感
2015/06/11 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js