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 相关文章推荐
jQuery中click事件的定义和用法
Dec 20 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
简单了解JavaScript异步
May 23 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
谈一谈收音机的高放电路
2021/03/02 无线电
Php注入点构造代码
2008/06/14 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
javascript String 对象
2008/04/25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python验证码图片处理(二值化)
2019/11/01 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
判断单链表中是否存在环
2012/07/16 面试题
介绍一下游标
2012/01/10 面试题
ajax是什么及其工作原理
2012/02/08 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
护士自我鉴定总结
2014/03/24 职场文书
公司委托书格式范本
2014/09/16 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
土地租赁协议书
2015/01/29 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
个人求职意向书
2015/05/11 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Python利用zhdate模块实现农历日期处理
2022/03/31 Python