js手写数组去重(JS对象数组去重的3种方法示例及对比)
类别:编程学习 浏览量:2460
时间:2021-10-05 00:08:40 js手写数组去重
JS对象数组去重的3种方法示例及对比目录
- 一.去重前后数据对比
- 二.使用方法
- 1.使用filter和Map
- 2.使用reduce
- 3.使用for循环
- 三.2400条数据,三种方法处理时间对比
- 总结
// 原数据是这样的 // 去重后数据是这样的 [{ [{ "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语法更简洁
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 }
测试次数 | 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对象数组去重内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js右下角提示框
- Js如何判断浏览器类型和版本
- docker前端项目(Docker部署Nuxt.js项目的实现)
- js如何编辑数组对象里的数组(JS操作对象数组实现增删改查实例代码)
- js日历图片(js实现简单日历效果)
- js音乐脚本怎么做(js实现网页音乐播放器)
- js 出现cannot find function(Fatal error: Call to a member function read on a non-object in 错误解决方法)
- tomcat服务如何在eclipse中配置(HBuilderX配置tomcat外部服务器查看编辑jsp界面的方法详解)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- js弹出新窗口被拦截的解决方法
- php入门教程源代码修改教程(php+js实现的无刷新下载文件功能示例)
- js限制用户(如何用JS追踪用户)
- mysql存储json的方式(MySQL中查询json格式的字段实例详解)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- js开发工具图解(浅谈前端JS沙箱实现的几种方式)
- js字符串常用函数
- 车友的选择| 轮毂该如何选(车友的选择轮毂该如何选)
- 秦海璐炫耀和王新军热恋蜜事,不料对方吐槽她吃饱后肚子撅老高(秦海璐炫耀和王新军热恋蜜事)
- 秦海璐一袭旗袍惹人倾心,将高级与淡雅展现的游刃有余(秦海璐一袭旗袍惹人倾心)
- 门外之见 海蛎子味 的表演,能走多远(门外之见海蛎子味)
- 三部冷门谍战剧,第一部2014年拍摄,至今还未播出(三部冷门谍战剧)
- 《金陵秘事》的剧情跌宕起伏 给观众带来的怎样的感官体验(金陵秘事的剧情跌宕起伏)