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中大括号“{}”的多义性
Dec 02 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Vue+Element-U实现分页显示效果
Nov 15 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
对Python中range()函数和list的比较
2018/04/19 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python实现烟花小程序
2019/01/30 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
保洁主管岗位职责
2013/11/20 职场文书
林肯就职演讲稿
2014/05/19 职场文书
施工安全生产承诺书
2014/05/23 职场文书
工作失职检讨书范文
2015/05/05 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
Java完整实现记事本代码
2022/06/16 Java/Android