97久久综合精品久久久综合-欧美三级蜜桃2在线观看-精品久久久久久中文字幕无 -另类尿喷潮VIDEOFREE|国产成人无码一区二

JS數(shù)組去重的幾種方法

2021-9-27    前端達(dá)人

數(shù)組去重

1 雙層for循環(huán)（類似冒泡排序的雙層循環(huán)寫法） 

var arr = [2,3,4,2,34,21,1,12,3,4,1] for(var i =0;i<arr.length;i++){ //第一層：每次循環(huán)拿到arr中一個(gè)元素 for(var j=i+1;j<arr.length;j++){ //第二層：每次拿到的元素再和每次拿到的元素后邊的元素依次進(jìn)行比對(duì)（因?yàn)榈谝粋€(gè)要從第二個(gè)開始比，第二個(gè)要從第三個(gè)比以此類推，所以這里的j應(yīng)比i大1為j=i+1） if(arr[i] === arr[j]){ //如果相同就刪除后邊的元素 arr.splice(j,1) } } } //arr:[1, 2, 3, 4, 12, 21, 34] 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

2 循環(huán)和indexof、循環(huán)和includes

創(chuàng)建新數(shù)組，循環(huán)舊數(shù)組，看每次循環(huán)的元素是否存在于新數(shù)組中沒有就把當(dāng)前元素添加到新數(shù)組中 

//indexof var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = [] arr.forEach((e)=>{ if(arr2.indexOf(e)==-1){ arr2.push(e) } }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34] 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 




//includes var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = [] arr.forEach((e)=>{ if(!arr2.includes(e)){ arr2.push(e) } }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34] 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    •

3 利用對(duì)象屬性不能重復(fù)去重 

var arr = [2,3,4,2,34,21,1,12,3,4,1] var obj = {}; arr.forEach((e,i)=>{ obj[arr[i]] = "abc"; }); var arr2=Object.keys(obj) console.log(arr2) //arr2:["1", "2", "3", "4", "12", "21", "34"] var arr3 = arr2.map(e => ~~e ) //arr3:[1, 2, 3, 4, 12, 21, 34] //注意這種方法不僅給數(shù)組重新排列而且還改變了數(shù)組中元素的類型 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    •

~是js里的按位取反操作符，~~就是執(zhí)行兩次按位取反，其實(shí)就是保持原值，但是注意雖然是原值，但是對(duì)布爾型變量執(zhí)行這個(gè)操作，會(huì)轉(zhuǎn)化成相應(yīng)的數(shù)值型變量，也就是 ~~true === 1，~~false === 0。

4 ES6 Set

ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。 

var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr1 = [...new Set(arr)] console.log(arr1) //arr1:[1, 2, 3, 4, 12, 21, 34] 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

5 ES6 Array. prototype.filter()

注：indexOf在數(shù)組中找元素的時(shí)候，碰到符合條件的第一個(gè)就會(huì)把它的下標(biāo)返回 

var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = arr.filter((e,i)=>{ //看每次循環(huán)的元素在數(shù)組中出現(xiàn)的第一個(gè)下標(biāo)位置（indexOf返回的位置），和每次循環(huán)的元素的下標(biāo)（filter循環(huán)每次的i）是否一致，一致就說明他就是第一個(gè)符合條件，不會(huì)被過濾掉。 return arr.indexOf(e)==i; }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34] 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

6 ES6 Array. prototype.reduce() 

var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = arr.reduce((pre,e)=>{ //這里當(dāng)然也可以用indexOf來判斷是否存在 pre.includes(e)?pre:pre.push(e); return pre },[]) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34]


    藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。





    





    分享此文一切功德，皆悉回向給文章原作者及眾讀者.





    轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 





    藍(lán)藍(lán)設(shè)計(jì)( www.zzjxyh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔