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 api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
javascript常用功能汇总
Jul 05 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
JS实现电脑虚拟键盘的操作
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
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
python简单获取数组元素个数的方法
2015/07/13 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
django-csrf使用和禁用方式
2020/03/13 Python
python实现梯度下降法
2020/03/24 Python
keras 多gpu并行运行案例
2020/06/10 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
简述数据库的设计过程
2015/06/22 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
挂职思想汇报
2013/12/31 职场文书
个人工作表现评语
2014/04/30 职场文书
公司副总经理任命书
2014/06/05 职场文书
参赛口号
2014/06/16 职场文书
员工手册编写范本
2015/05/14 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang