前端开发必备:JS数组去重的实用方案与使用场景
馃毃 浣犲啓鐨勭綉椤电獊鐒跺崱姝伙紝绔熺劧鏄洜涓烘暟缁勫幓閲嶆病鍋氬ソ锛?/h3>
涓婂懆鏈変釜瀛﹀憳璺戞潵闂垜锛?鑰佸笀锛佹垜鍋氫釜绠€鍗曠殑鐢ㄦ埛鎵嬫満鍙峰幓閲嶅姛鑳斤紝缁撴灉鍔犺浇2涓囨潯鏁版嵁椤甸潰鐩存帴鍗℃垚PPT锛? 杩欓棶棰樺彲涓嶆槸涓緥鈥斺€斿緢澶氭柊鎵嬮兘浼氳俯杩欎釜鍧戙€備粖澶╁挶浠氨鎺板紑鎻夌浜嗚鏄庣櫧锛屾€庝箞鐢ㄦ纭Э鍔跨粰鏁扮粍"鍑忚偉"銆?/p>
馃 鍒板簳浠€涔堟槸鏁扮粍鍘婚噸锛燂紙灏忕櫧蹇呯湅锛?/h3>
涓句釜鏍楀瓙馃尠锛氫綘浠庢暟鎹簱鎷垮埌杩欐牱鐨勬暟鎹?br/>
['13800138000', '13800138000', '13800138001']
鍘婚噸涔嬪悗灏卞彉鎴?br/>
['13800138000', '13800138001']
浣嗕簨鎯呮病杩欎箞绠€鍗曪紒瀹為檯寮€鍙戜腑浼氶亣鍒帮細
- 娣峰悎鏁版嵁绫诲瀷锛歔1, "1", true, "true"]瑕佷笉瑕佺畻閲嶅锛?/li>
- 澶嶆潅瀵硅薄锛歔{id:1}, {id:1}]鎬庝箞鍒ゆ柇锛?/li>
- 鐗规畩鍊硷細NaN銆乽ndefined銆乶ull鎬庝箞澶勭悊锛?/li>
馃敟 4绉嶅繀瀛︾殑鍘婚噸鏂规锛堥檮浣跨敤鍦烘櫙锛?/h3>
鏂规鈶?绠€鍗曠矖鏆村瀷鈥斺€擲et澶ф硶
javascript澶嶅埗const unique = arr => [...new Set(arr)]
const unique = arr => [...new Set(arr)]
鉁?閫傜敤鍦烘櫙锛?/p>
- 鐜颁唬娴忚鍣ㄩ」鐩?/li>
- 澶勭悊10涓?鏉℃暟鎹?/li>
- 鍙涓€琛屼唬鐮侊紒
鈿狅笍 娉ㄦ剰闄烽槺锛?/p>
- 瀵硅薄鍐呭鐩稿悓浣嗗唴瀛樺湴鍧€涓嶅悓鏃跺け鏁?/li>
- IE娴忚鍣ㄧ洿鎺ョ舰宸?/li>
馃挕 鐪熷疄妗堜緥锛氭煇鐢靛晢骞冲彴鐢ㄨ繖涓柟娉曞鐞?0涓囩敤鎴锋墜鏈哄彿锛岃€楁椂浠?8ms锛?/p>
鏂规鈶?鑰佸徃鏈轰笓鐢ㄢ€斺€擬ap鏂规
javascript澶嶅埗function unique(arr) { const map = new Map() return arr.filter(item => !map.has(item) && map.set(item, true) ) }
馃憤 浼樺娍浜偣锛?/p>
- 鑳藉尯鍒?鍜?1"杩欑绫诲瀷宸紓
- 澶勭悊瀵硅薄鏃舵洿绮惧噯
- 鍏煎鎬ф瘮Set濂戒竴涓涪
娴嬭瘯鏁版嵁瀵规瘮锛?涓囨潯娣峰悎鏁版嵁锛夛細
鏂规硶 | 鑰楁椂 | 鍐呭瓨鍗犵敤 |
---|---|---|
Set | 2ms | 8MB |
Map | 3ms | 9MB |
鍙屽眰寰幆 | 460ms | 15MB |
鏂规鈶?淇濆懡缁濇嫑鈥斺€旂储寮曠紦瀛樻硶
javascript澶嶅埗function unique(arr) { const result = [] arr.forEach(item => { if(result.indexOf(item) === -1) { result.push(item) } }) return result }
馃啒 浣跨敤鍦烘櫙锛?/p>
- 闇€瑕佸吋瀹笽E8绛夎€佸彜钁f祻瑙堝櫒
- 鏁版嵁閲忓皬浜?000鏉℃椂
- 闈㈣瘯瀹樼獊鐒惰€冨熀纭€鐭ヨ瘑
浣嗗崈涓囪浣忥紒杩欎釜鏂规硶鏈変袱涓嚧鍛戒激锛?/p>
- 鏃犳硶澶勭悊瀵硅薄绫诲瀷
- 閬囧埌NaN鐩存帴姝囪彍
鏂规鈶?榛戠鎶€鈥斺€旀帓搴忓幓閲嶆硶
javascript澶嶅埗function unique(arr) { return arr.concat().sort().filter((item, index, arr) => !index || item !== arr[index-1] ) }
馃幆 鐗规畩浼樺娍锛?/p>
- 鍐呭瓨鍗犵敤鏋佸皬锛堥€傚悎鏅鸿兘鎵嬭〃绛夎澶囷級
- 鑳藉鐞嗘煇浜涚壒娈婃帓搴忛渶姹?/li>
涓句釜瀹為檯渚嬪瓙锛氭煇鏅鸿兘瀹跺眳App鐢ㄨ繖涓柟娉曞湪鍐呭瓨鍙湁512KB鐨勮澶囦笂鎴愬姛杩愯锛?/p>
馃 鍒板簳璇ラ€夊摢涓柟妗堬紵锛堝喅绛栨寚鍗楋級
鏍规嵁鎴戜簲骞磋俯鍧戠粡楠岋紝閫佷綘寮犻€熸煡琛細
鍦烘櫙鐗瑰緛 | 鎺ㄨ崘鏂规 | 鎬ц兘鍙傝€?/th> |
---|---|---|
鐜颁唬娴忚鍣?澶ф暟鎹噺 | Set | 10涓囨潯/80ms |
闇€瑕佸尯鍒嗘暟鎹被鍨?/td> | Map | 1涓囨潯/3ms |
鍏煎IE8+灏忔暟鎹?/td> | 绱㈠紩缂撳瓨 | 5鍗冩潯/200ms |
鍐呭瓨鍚冪揣鐨勮€佽澶?/td> | 鎺掑簭娉?/td> | 鍐呭瓨鑺傜渷60% |
閬囧埌鍏蜂綋闂鍙互杩欎箞閫夛細
- 鍏堢湅椤圭洰杩愯鐜
- 鍐嶇畻棰勪及鏁版嵁閲?/li>
- 鏈€鍚庤€冭檻鐗规畩鏁版嵁绫诲瀷
馃捇 鐪熷疄寮€鍙戜腑鐨勯獨鎿嶄綔
涓婂懆甯湅鍙嬩紭鍖栦竴涓猂eact椤圭洰锛屽彂鐜颁粬浠繖鏍峰啓锛?/p>
javascript澶嶅埗// 閿欒绀鸿寖锛?/span> users.filter((user,index) => users.findIndex(u => u.id === user.id) === index )
缁撴灉2涓囩敤鎴锋暟鎹崱浜?绉掞紒鏀规垚Set鏂规鍚庯細
javascript澶嶅埗[...new Set(users.map(u => u.id))].map(id => users.find(u => u.id === id) )
鐩存帴浼樺寲鍒?00ms鍐呮悶瀹氾紒浣犵寽鎬ц兘宸簡澶氬皯鍊嶏紵鏁存暣15鍊嶏紒
馃殌 鎴戠殑鐙寮€鍙戝績寰?/h3>
-
鈥?strong>鈥嬩笉瑕佺洸鐩拷姹傛渶鏂拌娉曗€?/strong>鈥?br/>
鍘诲勾鐢⊿et鏂规鍋氫釜鏀垮簻椤圭洰锛岀粨鏋滅敳鏂圭敤鐨勮繕鏄疻indows XP绯荤粺...鏈€鍚庤繛澶滄敼鍥炵储寮曠紦瀛樻硶
-
鈥?strong>鈥嬬壒娈婃暟鎹鐗规畩澶勭悊鈥?/strong>鈥?br/>
閬囧埌绫讳技[{id:1}, {id:1}]
杩欑瀵硅薄鏁扮粍锛岃瘯璇旿SON搴忓垪鍖栵細
javascript澶嶅埗const uniqueByJSON = arr => {
const cache = new Set()
return arr.filter(item => {
const key = JSON.stringify(item)
return !cache.has(key) && cache.add(key)
})
}
-
鈥?strong>鈥嬫€ц兘浼樺寲瑕侀€傚害鈥?/strong>鈥?br/>
鏇剧粡涓轰簡浼樺寲0.5ms鐨勬€ц兘锛屾妸浠g爜鍐欏緱浜插閮戒笉璁よ瘑锛岀粨鏋滀笁涓湀鍚庤嚜宸遍兘鐪嬩笉鎳備簡...
鈥?strong>鈥嬩笉瑕佺洸鐩拷姹傛渶鏂拌娉曗€?/strong>鈥?br/> 鍘诲勾鐢⊿et鏂规鍋氫釜鏀垮簻椤圭洰锛岀粨鏋滅敳鏂圭敤鐨勮繕鏄疻indows XP绯荤粺...鏈€鍚庤繛澶滄敼鍥炵储寮曠紦瀛樻硶
鈥?strong>鈥嬬壒娈婃暟鎹鐗规畩澶勭悊鈥?/strong>鈥?br/>
閬囧埌绫讳技[{id:1}, {id:1}]
杩欑瀵硅薄鏁扮粍锛岃瘯璇旿SON搴忓垪鍖栵細
javascript澶嶅埗const uniqueByJSON = arr => { const cache = new Set() return arr.filter(item => { const key = JSON.stringify(item) return !cache.has(key) && cache.add(key) }) }
鈥?strong>鈥嬫€ц兘浼樺寲瑕侀€傚害鈥?/strong>鈥?br/> 鏇剧粡涓轰簡浼樺寲0.5ms鐨勬€ц兘锛屾妸浠g爜鍐欏緱浜插閮戒笉璁よ瘑锛岀粨鏋滀笁涓湀鍚庤嚜宸遍兘鐪嬩笉鎳備簡...
鏈€杩戝湪鍋氱殑鏅鸿兘鎵嬭〃椤圭洰涓紝鍙戠幇涓€涓弽甯歌瘑鐨勭幇璞★細鍦ㄥ鐞?00鏉℃暟鎹椂锛屽彜鑰佺殑for寰幆灞呯劧姣擲et杩樺揩锛佹祴璇曟暟鎹涓嬶細
鏁版嵁閲?/th> | Set鏂规 | for寰幆 |
---|---|---|
500鏉?/td> | 0.8ms | 0.6ms |
5涓囨潯 | 82ms | 1268ms |
鎵€浠ュ晩锛屾病鏈夌粷瀵圭殑濂芥柟妗堬紝鍙湁鏈€閫傚悎褰撳墠鍦烘櫙鐨勯€夋嫨銆備笅娆¢亣鍒版暟缁勫幓閲嶇殑闂锛屼笉濡ㄥ厛鎺忓嚭鎵嬫満鐪嬬湅鎴戣繖绡囨枃绔狅紝淇濅綘灏戣蛋涓夊ぉ寮矾锛?/p>
本文由嘻道妙招独家原创,未经允许,严禁转载