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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
Vue 的 v-model用法实例
Nov 23 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校验ISBN码的函数代码
2011/01/17 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
网页javascript精华代码集
2007/01/24 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python编程线性回归代码示例
2017/12/07 Python
numpy自动生成数组详解
2017/12/15 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python3实现猜数字游戏
2020/12/07 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
python dict乱码如何解决
2020/06/07 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Python错误的处理方法
2020/06/23 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
环境科学专业教师求职信
2014/07/12 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers