JS对象数组去重的3种方法示例及对比

 更新时间:2021年07月15日 16:19:23   作者:光年之外_宇  
这篇文章主要给大家介绍了关于JS对象数组去重的3种方法,三种方法分别包括使用filter和Map、使用reduce以及for循环,文中每个方法都给出了示例代码,需要的朋友可以参考下

一.去重前后数据对比

// 原数据是这样的                   // 去重后数据是这样的
[{                                [{
  "goodsId": "1",                    "goodsId": "1",
  "quota": 12,                       "quota": 12,
  "skuId": "1"                       "skuId": "1"
},                                 },
{                                  {
  "goodsId": "2",                    "goodsId": "2",
  "quota": 12,                       "quota": 12,
  "skuId": "2"                       "skuId": "2"
},                                 }]
{
  "goodsId": "1",
  "quota": 12,
  "skuId": "1"
}]

二.使用方法

  1. 使用filter和Map   🌟🌟🌟🌟🌟
  2. 使用reduce        🌟🌟🌟🌟
  3. for循环           🌟🌟🌟

结论:filter和Reduce时间上差别不是太大,filter稍微更快一些,但是filter语法更简洁

1.使用filter和Map

代码简洁,好用,4行代码搞定,平均耗费时间最短,五星推荐

function uniqueFunc(arr, uniId){
  const res = new Map();
  return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
}

2.使用reduce

代码稍多,平均耗费时间和第一不分伯仲,四星推荐

function uniqueFunc2(arr, uniId){
  let hash = {}
  return arr.reduce((accum,item) => {
    hash[item[uniId]] ? '' : hash[item[uniId]] = true && accum.push(item)
    return accum
  },[])
}

3.使用for循环

耗费时间较一二稍多,但是耗费时间平均,三星推荐

function uniqueFunc3(arr, uniId){
  let obj = {}
  let tempArr = []
  for(var i = 0; i<arr.length; i++){
    if(!obj[arr[i][uniId]]){
      tempArr.push(arr[i])
      obj[arr[i][uniId]] = true
    }
  }
  return tempArr
}

三.2400条数据,三种方法处理时间对比

测试次数 filter Map reduce for循环
1 0.139892578125 ms 0.19189453125 ms 0.2060546875 ms
2 0.12109375 ms 0.1279296875 ms 0.195068359375 ms
3 0.112060546875ms 0.11767578125 ms 0.174072265625 ms
4 0.10400390625 ms 0.1728515625 ms 0.18701171875 ms
5 0.10986328125 ms 0.12890625 ms 0.175048828125 ms
6 0.113037109375 ms 0.10791015625 ms 0.172119140625 ms
7 0.134033203125 ms 0.129150390625 ms 0.172119140625 ms

测试时间截图展示

总结

到此这篇关于JS对象数组去重的3种方法及对比的文章就介绍到这了,更多相关JS对象数组去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript 实现子父窗体互相传值的简单实例

    javascript 实现子父窗体互相传值的简单实例

    本篇文章主要是对javascript 实现子父窗体互相传值的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • js实现网页计算器

    js实现网页计算器

    这篇文章主要为大家详细介绍了js实现网页计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js实现图片上传到服务器和回显

    js实现图片上传到服务器和回显

    这篇文章主要介绍了js实现图片上传到服务器和回显,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS实现颜色的10进制转化成rgba格式的方法

    JS实现颜色的10进制转化成rgba格式的方法

    这篇文章主要介绍了JS实现颜色的10进制转化成rgba格式的方法,涉及javascript针对颜色数值转换的相关运算操作技巧,需要的朋友可以参考下
    2017-09-09
  • JavaScript实现更改网页背景与字体颜色的方法

    JavaScript实现更改网页背景与字体颜色的方法

    这篇文章主要介绍了JavaScript实现更改网页背景与字体颜色的方法,可实现点击按钮改变网页背景色的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)

    javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)

    这篇文章主要介绍了javascript实现网页中涉及的简易运动,比如改变宽高、透明度、位置等,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 使用JavaScript和C#中获得referer

    使用JavaScript和C#中获得referer

    经常使用其他脚本语言(ASP ASP.NET PHP等)获取页面的浏览来源,今天我们来研究下使用Javascript以及C#获取页面的referer。
    2014-11-11
  • JS实现获取汉字首字母拼音、全拼音及混拼音的方法

    JS实现获取汉字首字母拼音、全拼音及混拼音的方法

    这篇文章主要介绍了JS实现获取汉字首字母拼音、全拼音及混拼音的方法,涉及针对ChinesePY.js插件的使用及事件响应相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • JavaScript中定时控制Throttle、Debounce和Immediate详解

    JavaScript中定时控制Throttle、Debounce和Immediate详解

    大家可能都知道JavaScript遵循事件驱动的编程范例,这意味着一些行为可以激活一些响应,并且这些响应仅在发生特定的行为时才被激活。这篇文章将给大家详细介绍JavaScript中的定时控制Throttle、Debounce和Immediate,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11
  • js实现登录弹框

    js实现登录弹框

    这篇文章主要为大家详细介绍了js实现登录弹框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论