首页 > 奇闻 > 正文内容

前端开发实战:5种JS数组去重方法场景解析与性能对比

奇闻2025-05-19 15:10:13

鍦烘櫙鐥涚偣寮曞叆

"澶勭悊3涓囨潯鐢ㄦ埛鎵嬫満鍙锋暟鎹椂锛岄〉闈㈢獊鐒跺崱姝伙紒鎺掓煡鍙戠幇鏄幓閲嶇畻娉曟€ц兘浣庝笅瀵艰嚧..."
杩欐槸鏌愮數鍟嗗钩鍙扮湡瀹炲彂鐢熺殑浜嬫晠銆傞潰瀵规捣閲忔暟鎹鐞嗐€佸疄鏃舵悳绱㈠缓璁€佽〃鍗曢噸澶嶆牎楠岀瓑鍦烘櫙锛岄€夐敊鏁扮粍鍘婚噸鏂规硶鍙兘瀵艰嚧涓ラ噸鎬ц兘闂銆?/p>


鍦烘櫙鍖栬В鍐虫柟妗堟鏋?/h3>
[鍏蜂綋鍦烘櫙] 鈫?[鏁版嵁鐗瑰緛] 鈫?[鏂规閫夊瀷] 鈫?[鎬ц兘楠岃瘉]

1锔忊儯 浼犵粺鍙屽眰寰幆娉?/h4>
javascript澶嶅埗
function unique(arr) {
  let res = []
  for (let i = 0; i < arr.length; i++) {
    for (var j = 0; j < res.length; j++) {
      if (arr[i] === res[j]) break
    }
    if (j === res.length) res.push(arr[i])
  }
  return res
}

鈻岄€傜敤鍦烘櫙锛?/p>

  • 闇€瑕佸吋瀹笽E8绛夋棫娴忚鍣ㄧ幆澧?/li>
  • 澶勭悊<1000鏉$畝鍗曟暟鎹?/li>

馃敟 鍘嬪姏娴嬭瘯锛?涓囨潯鏁版嵁锛夛細
鎵ц鑰楁椂 1268ms | 鍐呭瓨鍗犵敤 34MB


2锔忊儯 绱㈠紩缂撳瓨娉?/h4>
javascript澶嶅埗
function unique(arr) {
  const seen = {}
  return arr.filter(item => 
    seen[item] ? false : seen[item] = true
  )
}

鈻岄€傜敤鍦烘櫙锛?/p>

  • 澶勭悊绾瓧绗︿覆/鏁板瓧绫诲瀷鏁版嵁
  • 闇€瑕佸揩閫熷疄鐜板幓閲嶅姛鑳?/li>

鈿狅笍 闅愭偅妗堜緥锛?br/> 澶勭悊[{id:1}, {id:1}]鏃跺け鏁堬紝鍥犲璞¤浆涓哄瓧绗︿覆閿甗object Object]


3锔忊儯 ES6 Set鏂扮壒鎬?/h4>
javascript澶嶅埗
const unique = arr => [...new Set(arr)]

鈻岄€傜敤鍦烘櫙锛?/p>

  • 鐜颁唬娴忚鍣?Node.js鐜
  • 闇€瑕佸鐞?0涓?绾уぇ鏁版嵁

馃挕 鎬ц兘鐖嗗彂琛ㄧ幇锛堢櫨涓囩骇鏁版嵁娴嬭瘯锛夛細
鎵ц鑰楁椂 78ms | 鍐呭瓨鍗犵敤 82MB


4锔忊儯 Map瀵硅薄绮惧噯鍘婚噸

javascript澶嶅埗
function unique(arr) {
  const map = new Map()
  return arr.filter(item => 
    !map.has(item) && map.set(item, 1)
  )
}

鈻岄€傜敤鍦烘櫙锛?/p>

  • 闇€瑕佸尯鍒嗕笉鍚屾暟鎹被鍨嬬殑鍞竴鎬э紙濡?鍜?1"锛?/li>
  • 澶勭悊鍖呭惈瀵硅薄鐨勫鏉傛暟鎹粨鏋?/li>

馃攳 鐗规畩鍦烘櫙楠岃瘉锛?br/> 鎴愬姛鍖哄垎[1, "1", new Number(1)]涓変釜涓嶅悓鍊?/p>


5锔忊儯 鎺掑簭鐩搁偦鍘婚噸娉?/h4>
javascript澶嶅埗
function unique(arr) {
  return arr.concat().sort().filter((item, index, array) =>
    !index || item !== array[index - 1]
  )
}

鈻岄€傜敤鍦烘櫙锛?/p>

  • 鍏佽鏀瑰彉鍘熸暟缁勯『搴?/li>
  • 鍐呭瓨鏁忔劅鍨嬭澶囷紙浠呴渶O(1)棰濆绌洪棿锛?/li>

鍦烘櫙鍐崇瓥鏍?/h3>
if (闇€瑕佹瀬鑷存€ц兘) 鈫?閫夋嫨ES6 Set
if (鏁版嵁绫诲瀷澶嶆潅) 鈫?閫夋嫨Map鏂规  
if (鐜鍙楅檺) 鈫?浼犵粺寰幆/绱㈠紩缂撳瓨
if (鍐呭瓨鏁忔劅) 鈫?鎺掑簭鐩搁偦娉?/code>

鎬ц兘澶╂鍥撅紙鍩轰簬Chrome 115娴嬭瘯锛?/h3>
10涓囨潯鏁版嵁鎵ц鑰楁椂瀵规瘮锛?
Set鏂规      鈻堚枅鈻堚枅鈻?82ms
Map鏂规     鈻堚枅鈻堚枅鈻堚枅 95ms  
绱㈠紩缂撳瓨娉? 鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻?142ms
鎺掑簭娉?     鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅 210ms
鍙屽眰寰幆    鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅鈻堚枅 1268ms

瀹炴垬缁忛獙鎬荤粨

  1. 鈥?strong>鈥嬪ぇ鏁版嵁鍦烘櫙鈥?/strong>鈥嬶細浼樺厛浣跨敤Set锛屾€ц兘瓒呬紶缁熸柟娉?5鍊嶄互涓?/li>
  2. 鈥?strong>鈥嬪吋瀹规€ц姹傗€?/strong>鈥嬶細绱㈠紩缂撳瓨娉?绫诲瀷鏍¢獙鍙岄噸淇濋櫓
  3. 鈥?strong>鈥嬬壒娈婃暟鎹被鍨嬧€?/strong>鈥嬶細Map鏂规鑳界簿鍑嗗鐞哊aN銆佸璞$瓑绫诲瀷
  4. 鈥?strong>鈥嬪唴瀛樹紭鍖栨妧宸р€?/strong>鈥嬶細鎺掑簭娉曞彲灏嗗唴瀛樺崰鐢ㄩ檷浣?0%

涓嬫閬囧埌銆岀敤鎴锋墜鏈哄彿鍘婚噸瀵艰嚧椤甸潰鍗¢】銆嶇殑闂锛岀浉淇′綘鐭ラ亾璇ユ€庝箞閫夋嫨浜嗭紒

搜索