js中数组对象去重的两种方法

 更新时间:2019年01月18日 11:24:40   作者:muzidigbig  
今天小编就为大家分享一篇关于js中数组对象去重的两种方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

方法一:

采用对象访问属性的方法,判断属性值是否存在,如果不存在就添加。

方法二:

采用数组中的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 Canvas绘制圆形时钟效果

    JavaScript Canvas绘制圆形时钟效果

    这篇文章主要为大家详细介绍了JavaScript Canvas绘制圆形时钟效果的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JavaScript基于用户照片姓名生成海报

    JavaScript基于用户照片姓名生成海报

    这篇文章主要介绍了JavaScript基于用户照片姓名生成海报,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • Rxjs 中处理错误和抓取错误的代码案例

    Rxjs 中处理错误和抓取错误的代码案例

    这篇文章主要介绍了Rxjs 中怎么处理和抓取错误,本文,我们学习了如何使用 catchError 在数据流中抓取错误,怎么去修改和返回 observable,或者使用 EMPTY 不去触发组件中的错误,需要的朋友可以参考下
    2022-08-08
  • 前端开发过程中浏览器版本的两种判定方法

    前端开发过程中浏览器版本的两种判定方法

    前端开发过程中经常需要判断浏览器的版本,达到同时兼容多个浏览器的目的,下面有两种不错的常用方法:jquery及HTML中的注释,喜欢的朋友可以参考下
    2013-10-10
  • JS表格组件神器bootstrap table详解(强化版)

    JS表格组件神器bootstrap table详解(强化版)

    这篇文章主要以实例的方式为大家再次介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下
    2016-05-05
  • 使用typescript推导已有变量的盲盒类型详情

    使用typescript推导已有变量的盲盒类型详情

    这篇文章主要介绍了使用typescript推导已有变量的盲盒类型详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • JS实现的加减乘除四则运算计算器示例

    JS实现的加减乘除四则运算计算器示例

    这篇文章主要介绍了JS实现的加减乘除四则运算计算器,涉及javascript事件响应及数学运算相关操作技巧,需要的朋友可以参考下
    2017-08-08
  • 微信小程序实现录音与音频播放功能

    微信小程序实现录音与音频播放功能

    微信小程序继承了微信强大的语音处理功能,提供了录音、音频播放控制和背景音乐等功能,它们的功能不同,但有相似性。本文将详细介绍小程序中如何实现录音与音频播放控制功能,需要的可以参考一下
    2022-03-03
  • BootStrap模态框和select2合用时input无法获取焦点的解决方法

    BootStrap模态框和select2合用时input无法获取焦点的解决方法

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入。怎么解决这个问题呢?下面小编给大家带来了BootStrap模态框和select2合用时input无法获取焦点的解决方法,一起看看吧
    2017-09-09
  • Js经典案例的实例代码

    Js经典案例的实例代码

    JS实现鼠标悬停切换图片,显示天气预报,利用焦点实现选择网站的实例代码,具有很好的参考价值,希望对大家有所帮助,一起跟随小编过来看看吧
    2018-05-05

最新评论