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教程:关于if简写语句优化的方法
May 17 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
vue移动端路由切换实例分析
May 14 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
JavaScript实现答题评分功能页面
Jun 24 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
eBay美国官网:eBay.com
2020/10/24 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
服务员岗位责任制
2014/02/11 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
创建青年文明号材料
2014/05/09 职场文书
安全演讲稿开场白
2014/08/25 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
工程服务质量承诺书
2015/04/29 职场文书
老兵退伍感言
2015/08/03 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang