本文详细对比了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"
}]
接下来介绍三种具体的实现方案。
- 第一种方法：利用filter和Map组合，推荐指数五颗星。
- 第二种方法：利用reduce函数，推荐指数四颗星。
- 第三种方法：使用传统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对象数组去重的三种方法及其对比分析介绍完毕。如需了解更多相关技术内容，可查阅本站往期文章或继续阅读后续章节，感谢支持。