1. 主页 > 好文章

前端开发必备: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)]

鉁?閫傜敤鍦烘櫙锛?/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濂戒竴涓涪

娴嬭瘯鏁版嵁瀵规瘮锛?涓囨潯娣峰悎鏁版嵁锛夛細

鏂规硶鑰楁椂鍐呭瓨鍗犵敤
Set2ms8MB
Map3ms9MB
鍙屽眰寰幆460ms15MB

鏂规鈶?淇濆懡缁濇嫑鈥斺€旂储寮曠紦瀛樻硶

javascript澶嶅埗
function unique(arr) {
  const result = []
  arr.forEach(item => {
    if(result.indexOf(item) === -1) {
      result.push(item)
    }
  })
  return result
}

馃啒 浣跨敤鍦烘櫙锛?/p>

  • 闇€瑕佸吋瀹笽E8绛夎€佸彜钁f祻瑙堝櫒
  • 鏁版嵁閲忓皬浜?000鏉℃椂
  • 闈㈣瘯瀹樼獊鐒惰€冨熀纭€鐭ヨ瘑

浣嗗崈涓囪浣忥紒杩欎釜鏂规硶鏈変袱涓嚧鍛戒激锛?/p>

  1. 鏃犳硶澶勭悊瀵硅薄绫诲瀷
  2. 閬囧埌NaN鐩存帴姝囪彍

鏂规鈶?榛戠鎶€鈥斺€旀帓搴忓幓閲嶆硶

javascript澶嶅埗
function unique(arr) {
  return arr.concat().sort().filter((item, index, arr) => 
    !index || item !== arr[index-1]
  )
}

馃幆 鐗规畩浼樺娍锛?/p>

  • 鍐呭瓨鍗犵敤鏋佸皬锛堥€傚悎鏅鸿兘鎵嬭〃绛夎澶囷級
  • 鑳藉鐞嗘煇浜涚壒娈婃帓搴忛渶姹?/li>

涓句釜瀹為檯渚嬪瓙锛氭煇鏅鸿兘瀹跺眳App鐢ㄨ繖涓柟娉曞湪鍐呭瓨鍙湁512KB鐨勮澶囦笂鎴愬姛杩愯锛?/p>


馃 鍒板簳璇ラ€夊摢涓柟妗堬紵锛堝喅绛栨寚鍗楋級

鏍规嵁鎴戜簲骞磋俯鍧戠粡楠岋紝閫佷綘寮犻€熸煡琛細

鍦烘櫙鐗瑰緛鎺ㄨ崘鏂规鎬ц兘鍙傝€?/th>
鐜颁唬娴忚鍣?澶ф暟鎹噺Set10涓囨潯/80ms
闇€瑕佸尯鍒嗘暟鎹被鍨?/td>Map1涓囨潯/3ms
鍏煎IE8+灏忔暟鎹?/td>绱㈠紩缂撳瓨5鍗冩潯/200ms
鍐呭瓨鍚冪揣鐨勮€佽澶?/td>鎺掑簭娉?/td>鍐呭瓨鑺傜渷60%

閬囧埌鍏蜂綋闂鍙互杩欎箞閫夛細

  1. 鍏堢湅椤圭洰杩愯鐜
  2. 鍐嶇畻棰勪及鏁版嵁閲?/li>
  3. 鏈€鍚庤€冭檻鐗规畩鏁版嵁绫诲瀷

馃捇 鐪熷疄寮€鍙戜腑鐨勯獨鎿嶄綔

涓婂懆甯湅鍙嬩紭鍖栦竴涓猂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>
  1. 鈥?strong>鈥嬩笉瑕佺洸鐩拷姹傛渶鏂拌娉曗€?/strong>鈥?br/> 鍘诲勾鐢⊿et鏂规鍋氫釜鏀垮簻椤圭洰锛岀粨鏋滅敳鏂圭敤鐨勮繕鏄疻indows XP绯荤粺...鏈€鍚庤繛澶滄敼鍥炵储寮曠紦瀛樻硶

  2. 鈥?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)
      })
    }
  3. 鈥?strong>鈥嬫€ц兘浼樺寲瑕侀€傚害鈥?/strong>鈥?br/> 鏇剧粡涓轰簡浼樺寲0.5ms鐨勬€ц兘锛屾妸浠g爜鍐欏緱浜插閮戒笉璁よ瘑锛岀粨鏋滀笁涓湀鍚庤嚜宸遍兘鐪嬩笉鎳備簡...


鏈€杩戝湪鍋氱殑鏅鸿兘鎵嬭〃椤圭洰涓紝鍙戠幇涓€涓弽甯歌瘑鐨勭幇璞★細鍦ㄥ鐞?00鏉℃暟鎹椂锛屽彜鑰佺殑for寰幆灞呯劧姣擲et杩樺揩锛佹祴璇曟暟鎹涓嬶細

鏁版嵁閲?/th>Set鏂规for寰幆
500鏉?/td>0.8ms0.6ms
5涓囨潯82ms1268ms

鎵€浠ュ晩锛屾病鏈夌粷瀵圭殑濂芥柟妗堬紝鍙湁鏈€閫傚悎褰撳墠鍦烘櫙鐨勯€夋嫨銆備笅娆¢亣鍒版暟缁勫幓閲嶇殑闂锛屼笉濡ㄥ厛鎺忓嚭鎵嬫満鐪嬬湅鎴戣繖绡囨枃绔狅紝淇濅綘灏戣蛋涓夊ぉ寮矾锛?/p>

本文由嘻道妙招独家原创,未经允许,严禁转载