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 对象模型 执行模型
Oct 15 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
javascript Number 与 Math对象的介绍
Nov 17 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
SSI指令
2006/11/25 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
如何实现一个webpack模块解析器
2018/10/24 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python验证码图片处理(二值化)
2019/11/01 Python
python绘制彩虹图
2019/12/16 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
致长跑运动员加油稿
2014/02/20 职场文书
质量标语大全
2014/06/12 职场文书
学校运动会报道稿
2014/09/23 职场文书
贷款承诺书
2015/01/20 职场文书
专职安全员岗位职责
2015/04/11 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
事业单位岗位说明书
2015/10/08 职场文书