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: "哈哈"}]

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • 聊一聊对js包装对象的理解

    聊一聊对js包装对象的理解

    JavaScript中的基本类型通过自动装箱和拆箱机制,可以临时转换为对应的包装对象,以访问属性和方法,了解包装对象的临时性和手动创建方式有助于编写更高效和正确的代码,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • JavaScript使用replace函数替换字符串的方法

    JavaScript使用replace函数替换字符串的方法

    这篇文章主要介绍了JavaScript使用replace函数替换字符串的方法,涉及javascript中replace函数的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • jser必看的破解javascript各种加密的反向思维方法

    jser必看的破解javascript各种加密的反向思维方法

    才发现的破解javascript各种加密的反向思维方法,大家有好的方法都跟帖啊最近发现了一个代码,加密了5层左右,我将破解到最后一步,而且不用javascript解密程序
    2007-04-04
  • JavaScript中的appendChild()方法示例详解

    JavaScript中的appendChild()方法示例详解

    这篇文章主要介绍了JavaScript中的appendChild()方法,appendChild()方法是向节点添加最后一个子节点,也可以使用此方法从一个元素向另一个元素移动元素,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • JavaScript事件循环及宏任务微任务原理解析

    JavaScript事件循环及宏任务微任务原理解析

    这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 前端printjs的使用实战案例

    前端printjs的使用实战案例

    Print.js是一个小的javascript库,可帮助您从网络上打印,这篇文章主要给大家介绍了关于前端printjs的使用实战案例,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • TypeScript泛型约束条件示例详解

    TypeScript泛型约束条件示例详解

    有了泛型之后一个函数或容器类能处理的类型一下子扩到了无限大,似乎有点失控的感觉,所以这里又产生了一个约束的概念,下面这篇文章主要给大家介绍了关于TypeScript泛型约束条件的相关资料,需要的朋友可以参考下
    2022-04-04
  • javascript 封装Date日期类实例详解

    javascript 封装Date日期类实例详解

    这篇文章主要介绍了javascript-封装Date日期类的相关资料,需要的朋友可以参考下
    2017-05-05
  • JavaScript提升机制Hoisting详解

    JavaScript提升机制Hoisting详解

    这篇文章主要介绍了JavaScript提升机制Hoisting详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 通过隐藏iframe实现文件下载的js方法介绍

    通过隐藏iframe实现文件下载的js方法介绍

    本篇文章主要是对通过隐藏iframe实现文件下载的js方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02

最新评论