鈥嬫€庝箞蹇€熻鍚嶅崟閲屽彧鍓" />
首页 > 趣闻 > 正文内容

快速实现ES6数组去重的3种方案(含代码案例解析)

趣闻2025-05-28 05:39:53

寮€澶达細浣犵殑鏁扮粍閲屾槸涓嶆槸鎬绘湁浜涒€滃弻鑳炶儙鈥濓紵

鎵撳紑浠g爜涓€鐪嬶紝婊″睆閮芥槸閲嶅鐨勫紶涓夋潕鍥涚帇浜旓紵姣斿杩欎釜璁╀汉澶村ぇ鐨勬暟缁勶細
["灏忔槑","灏忕孩","灏忔槑","灏忓垰","灏忕孩"]
鈥?strong>鈥嬫€庝箞蹇€熻鍚嶅崟閲屽彧鍓╃嫭涓€鏃犱簩鐨勫悕瀛楋紵鈥?/strong>鈥?浠婂ぉ鍜变滑灏辨墜鎶婃墜鏁欎綘涓夋嫑蹇呮潃鎶€锛屼繚鍑嗕綘5鍒嗛挓浠庨潚閾滃彉鐜嬭€咃紒


绗竴鎷涳細Set澶ф硶锛堢畝鍗曞埌鐘锛?/h4>

鈥?strong>鈥嬧€滆繖涔熷お绠€鍗曚簡鍚э紵鈥濃€?/strong>鈥?鏂版墜鐪嬪埌杩欐柟娉曢兘浼氭儕鎺変笅宸?br/> 鐩存帴鐢╀綘涓€鑴镐唬鐮侊細

javascript澶嶅埗
const names = ["灏忔槑","灏忕孩","灏忔槑","灏忓垰","灏忕孩"]
const uniqueNames = [...new Set(names)] 
// ["灏忔槑","灏忕孩","灏忓垰"] 

鈥?strong>鈥嬪師鐞嗗氨璺熻秴甯傚瓨鍖呮煖浼肩殑鈥?/strong>鈥嬶細姣忎釜鏌滃瓙鍙兘鏀句竴浠跺寘瑁癸紝閲嶅鐨勫寘瑁圭洿鎺ユ嫆鏀躲€?/p>

鈥?strong>鈥嬩絾鏄紒鈥?/strong>鈥?閬囧埌瀵硅薄灏辩炕杞︼細

javascript澶嶅埗
const users = [{id:1}, {id:1}, {id:2}]
[...new Set(users)] // 杩樻槸涓変釜瀵硅薄锛?

鈥?strong>鈥嬩负鍟ヤ細杩欐牱锛熲€?/strong>鈥?鍥犱负姣忎釜瀵硅薄鍦ㄥ唴瀛橀噷鐨勫湴鍧€涓嶅悓锛屽氨鍍忓弻鑳炶儙闀垮緱鍐嶅儚锛岃韩浠借瘉鍙蜂篃涓嶄竴鏍枫€?/p>


绗簩鎷涳細Map渚︽帰鏈紙涓撴不瀵硅薄涓嶆湇锛?/h4>

鈥?strong>鈥嬧€淢ap涓嶆槸瀛橀敭鍊煎鐨勫悧锛熲€濃€?/strong>鈥?寰堝灏忕櫧绗竴娆″惉璇磋繖涓搷浣滈兘鎳靛湀
鐪嬪ソ浜嗭紝楠氭搷浣滄潵浜嗭細

javascript澶嶅埗
const users = [{id:1}, {id:1}, {id:2}]
const map = new Map()
users.forEach(item => map.set(item.id, item))
const uniqueUsers = [...map.values()] 
// 鍙墿涓媔d涓?鍜?鐨勪袱涓璞?/span>

鈥?strong>鈥嬪叧閿偣鈥?/strong>鈥嬶細鎶婂敮涓€鏍囪瘑锛堟瘮濡侷D锛夊綋閽ュ寵锛屽悗鍑虹幇鐨勪細瑕嗙洊鍓嶉潰鐨勶紝灏卞儚鍋滆溅鍦哄崰杞︿綅銆?/p>

鈥?strong>鈥嬩釜浜鸿俯鍧戠粡鍘嗏€?/strong>鈥嬶細
鍘诲勾鍋氶」鐩椂锛屾垜鐢?code>JSON.stringify澶勭悊瀵硅薄锛岀粨鏋滃瓧娈甸『搴忎笉鍚屽氨鍒ゆ柇澶辫...鍚庢潵鏀圭敤鍞竴ID鎵嶆悶瀹氾紒


绗笁鎷涳細Reduce娴佹按绾匡紙鐏垫椿搴︾垎琛級

鈥?strong>鈥嬧€滆繖涓嶅氨鏄釜绱姞鍣ㄥ悧锛熲€濃€?/strong>鈥?鍒氬紑濮嬫垜涔熻繖涔堟兂
鐩村埌鐪嬭杩欑鍐欐硶锛?/p>

javascript澶嶅埗
const numbers = [1,2,3,2,1,4,5]
const uniqueNums = numbers.reduce((acc, cur) => {
  return acc.includes(cur) ? acc : [...acc, cur]
}, [])
// [1,2,3,4,5]

鈥?strong>鈥嬮€傚悎鍦烘櫙鈥?/strong>鈥嬶細闇€瑕佽嚜瀹氫箟鍒ゆ柇鏉′欢鏃讹紝姣斿杩囨护鍚屼竴澶╀骇鐢熺殑閲嶅鏃ュ織銆?/p>

鈥?strong>鈥嬫€ц兘璀﹀憡鈥?/strong>鈥嬶細
澶勭悊10涓囨潯鏁版嵁鏃讹紝杩欐柟娉曡兘鍗″埌浣犳€€鐤戜汉鐢燂紒杩欐椂鍊欏彲浠ユ崲瑁匰et锛?/p>

javascript澶嶅埗
const uniqueNums = numbers.reduce((acc, cur) => 
  acc.has(cur) ? acc : acc.add(cur), new Set())

涓夊ぇ鎷涙暟姣旀鎿傚彴锛堣〃鏍煎姣旓級

瀵规瘮缁村害SetMapReduce
鈥?strong>鈥嬩唬鐮侀噺鈥?/strong>鈥?/td>1琛屾悶瀹?鉁?/td>3-4琛?/td>3-4琛?/td>
鈥?strong>鈥嬪璞℃敮鎸佲€?/strong>鈥?/td>鐩存帴鎵戣 鉂?/td>杞绘澗鎷挎崗 鉁?/td>闇€鑷畾涔夊垽鏂?/td>
鈥?strong>鈥嬫墽琛岄€熷害鈥?/strong>鈥?/td>闂數渚?馃殌闂數渚?馃殌鏍戞噿 馃悓
鈥?strong>鈥嬬伒娲诲害鈥?/strong>鈥?/td>姝绘澘涓瓑澶╄姳鏉跨骇 鉁?/td>

涓汉寮€鍙戝績寰?/h4>

骞蹭簡浜斿勾鍓嶇锛屾垜鍙戠幇鈥?strong>鈥?0%鐨勭畝鍗曞幓閲嶇敤Set灏辫兘鎼炲畾鈥?/strong>鈥嬶紝鍓╀笅20%閲孧ap鍗?5%锛孯educe鍙湁5%鍑哄満鏈轰細銆備絾鍘诲勾鍋氭暟鎹垎鏋愮郴缁熸椂锛孯educe鍗存垚浜嗘晳鍛界ɑ鑽夆€斺€斿洜涓鸿鏍规嵁涓変釜瀛楁鑱斿悎鍘婚噸锛岃繖鏃跺€欑伒娲绘€у氨鍚婃墦鍏朵粬鏂规硶浜嗐€?/p>

鈥?strong>鈥嬫暡榛戞澘閲嶇偣鈥?/strong>鈥嬶細

  1. 鏁版嵁閲忚秴杩?涓囨潯锛熻刀绱ф姏寮冭8濂旂増Reduce
  2. 瑕佸吋瀹笽E娴忚鍣紵鍑嗗濂紹abel淇濆懡绗?/li>
  3. 瀵硅薄鍘婚噸璁ゅ噯鍞竴鏍囪瘑锛屽崈涓囧埆鐢↗SON.stringify璧板集璺?/li>

鏈€杩戝洟闃熷仛浜嗕釜娴嬭瘯锛氱敤Set澶勭悊10涓囨潯鏁版嵁鍙3姣锛岃€屼紶缁熷弻閲峟or寰幆瑕?绉掆€斺€旇繖宸窛锛屾瘮鍗氬皵鐗瑰拰鏅€氫汉璧涜窇杩樺じ寮狅紒


鈥?strong>鈥嬫渶鍚庣伒榄傛嫹闂€?/strong>鈥?br/> 涓嬫鍐嶇湅鍒伴噸澶嶆暟鎹紝浣犳槸鍑嗗缁х画ctrl+C/V鎵嬪姩鍒狅紝杩樻槸鎶勮捣杩欎笁鎶婄憺澹啗鍒€锛熻浣忥紝宸ュ叿灏卞儚鐐掕彍閿咃紝鐢ㄩ搧閿呯叜娉¢潰涔熻锛屼絾缁堢┒涓嶅鐓堡涓撶敤閿呮潵寰楅『鎵嬪晩锛?/p>

搜索