JS對(duì)象數(shù)組去重的3種方法示例及對(duì)比
一.去重前后數(shù)據(jù)對(duì)比
// 原數(shù)據(jù)是這樣的 // 去重后數(shù)據(jù)是這樣的 [{ [{ "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循環(huán) 🌟🌟🌟
結(jié)論:filter和Reduce時(shí)間上差別不是太大,filter稍微更快一些,但是filter語法更簡(jiǎn)潔
1.使用filter和Map
代碼簡(jiǎn)潔,好用,4行代碼搞定,平均耗費(fèi)時(shí)間最短,五星推薦
function uniqueFunc(arr, uniId){ const res = new Map(); return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1)); }
2.使用reduce
代碼稍多,平均耗費(fèi)時(shí)間和第一不分伯仲,四星推薦
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循環(huán)
耗費(fèi)時(shí)間較一二稍多,但是耗費(fèi)時(shí)間平均,三星推薦
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條數(shù)據(jù),三種方法處理時(shí)間對(duì)比
測(cè)試次數(shù) | filter Map | reduce | for循環(huán) |
---|---|---|---|
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 |
測(cè)試時(shí)間截圖展示
總結(jié)
到此這篇關(guān)于JS對(duì)象數(shù)組去重的3種方法及對(duì)比的文章就介紹到這了,更多相關(guān)JS對(duì)象數(shù)組去重內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)無限級(jí)網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)無限級(jí)網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)針對(duì)頁面元素結(jié)點(diǎn)的遍歷及樣式操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09javascript實(shí)現(xiàn)的HashMap類代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)的HashMap類代碼,實(shí)現(xiàn)了添加、獲取、刪除、查詢key和value功能,需要的朋友可以參考下2014-06-06微信小程序在其他頁面監(jiān)聽globalData中值的變化
這篇文章主要給大家介紹了關(guān)于微信小程序如何在其他頁面監(jiān)聽globalData中值的變化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問題
這篇文章主要介紹了微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼,小程序本身對(duì)http、websocket等連接均有諸多限制,所以這次項(xiàng)目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02Three.js使用OrbitControls后修改相機(jī)旋轉(zhuǎn)方向無效解決辦法
three.js是用javascript寫的基于webGL的第三方3D庫(kù),下面這篇文章主要給大家介紹了關(guān)于Three.js使用OrbitControls后修改相機(jī)旋轉(zhuǎn)方向無效的解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01