JavaScript对象数组去重的三种实现方式与性能对比

作者:木棉时间:2026-10-24 13:29:51浏览:246

本文详细对比了JavaScript中对象数组去重的三种常用方法:结合filter与Map、使用reduce以及传统的for循环。通过2400条数据的实测,分析各方法在代码简洁度与执行效率上的差异,结果显示filter+Map语法最简洁且平均耗时略低,为开发者提供实用的性能参考。

首先展示去重前后的数据结构变化,以便直观理解处理对象。


// 原数据是这样的                   // 去重后数据是这样的
[{                                [{
  "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和Map。

该方案代码精简,仅需4行即可实现,且平均运行时间最短,因此给予五星推荐。


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

具体实现二:使用reduce。

代码量稍多于filter方案,但平均耗时与第一种方法相当,给予四星推荐。


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

具体实现三:使用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对象数组去重的三种方法及其对比分析介绍完毕。如需了解更多相关技术内容,可查阅本站往期文章或继续阅读后续章节,感谢支持。

作者最新文章