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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
vue实现移动端返回顶部
Oct 12 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中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python烟花效果的代码实例
2020/02/25 Python
python实现门限回归方式
2020/02/29 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
好段摘抄大全(48句)
2019/08/08 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
Tomcat用户管理的优化配置详解
2022/03/31 Servers