成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js數(shù)組去重方法分析與總結(jié)

nevermind / 1600人閱讀

摘要：階段該階段主要通過循環(huán)遍歷數(shù)組從而達(dá)到去重的目的多次循環(huán)去掉重復(fù)元素以下所有方法默認(rèn)都那拿該數(shù)組進(jìn)行測(cè)試結(jié)果如下圖可見除了沒有去掉，其他效果都還挺好。

數(shù)組去重經(jīng)常被人拿來說事，雖然在工作中不常用，但他能夠很好的考察js基礎(chǔ)知識(shí)掌握的深度和廣度，下面從js的不同階段總結(jié)一下去重的方法。
ES3階段

該階段主要通過循環(huán)遍歷數(shù)組從而達(dá)到去重的目的

多次循環(huán)去掉重復(fù)元素

// 以下所有方法默認(rèn)都那拿該數(shù)組進(jìn)行測(cè)試
var array = [1, 1, "1", "1", null, null, undefined, undefined, new String("1"), new String("1"), /a/, /a/, NaN, NaN,{},{},[],[],{name: "eric",sex: "male"},{sex: "male",name: "eric"}];
function unique_es3_on2 (arr) {
    var len = arr.length,
        i = 0,
        j,
        flag,
        ret = [];
    for (; i < len ; i++) {
      flag = true;
      for (j = i+1 ; j < len ; j++) {
        if (arr[i] === arr[j]) {
          flag = false;
          break;
        }
      }
      if(flag) {
        ret.push(arr[i]);
      }
    }
    return ret;
}
unique_es3_on2(array)

結(jié)果如下圖：

可見除了NaN沒有去掉，其他效果都還挺好。原因就是NaN===NaN的結(jié)果是false。還有就是使用嵌套的循環(huán)，時(shí)間復(fù)雜度高，性能不是很好。

借助新的對(duì)象單次循環(huán)去掉重復(fù)元素

function unique_es3_on(arr) {
    var obj = {},
        i,
        len = arr.length,
        ret = [];
    for(i = 0; i < len ; i++) {
      if(!obj[arr[i]]) {
        obj[arr[i]] = true;
        ret.push(arr[i]);
      }
    }
    return ret;
}

結(jié)果如下圖：

雖然時(shí)間復(fù)雜度不高了，但是效果并不好。因?yàn)閷?duì)象的屬性是字符串，所以會(huì)把數(shù)組所有元素默認(rèn)轉(zhuǎn)化為字符串，就會(huì)產(chǎn)生以下問題：

數(shù)值1和字符串"1"以及包裝類型new String("1")，轉(zhuǎn)化為字符串以后是相同的會(huì)被去掉。

對(duì)象轉(zhuǎn)化為字符串以后會(huì)被誤判，[]==>"",{}==>"[object Object]",還有就是形式相同，內(nèi)存地址不同的對(duì)象會(huì)被去除。

為了解決類型轉(zhuǎn)換以后出現(xiàn)的問題，可以用typeof操作符轉(zhuǎn)一下：

function unique_es3_on(arr) {
    var obj = {},
        i,
        len = arr.length,
        str,
        ret = [];
    for(i = 0; i < len ; i++) {
      str = typeof arr[i] + arr[i];
      if(!obj[str]) {
        obj[str] = true;
        ret.push(arr[i]);
      }
    }
    return ret;
}

結(jié)果如圖：

可以看到類型轉(zhuǎn)換的問題基本解決，但對(duì)象部分基本都被去除了，因?yàn)樗麄兒妥址嗉訒r(shí)還是會(huì)發(fā)生轉(zhuǎn)化，解決的方案是把上面的str換成str = typeof arr[i] + JSON.stringify(arr[i])，相加之前先簡單序列化一下。

結(jié)果如圖： 

從以上可以看出該階段的各種方法或多或少的都有一些問題，該去除的沒去掉，比如NaN。不該去的給去掉了，比如，形式相同但內(nèi)存地址不同的對(duì)象(是否應(yīng)該去掉全看你怎么定義)。
ES5階段 
function unique_es5(arr) {
    return arr.filter(function(ele,index,array) {
      return array.indexOf(ele) == index;
    })
}

結(jié)果如圖：

可以看到除了NaN，其他表現(xiàn)都是正常的。其中indexOf對(duì)于NaN總是返回-1，所以導(dǎo)致誤判。
ES6階段 
let unique_includes = (arr) => {
    let newArr = [];
    arr.forEach(function(item){
        if(!newArr.includes(item)){
            newArr.push(item);
        }
    });
    return newArr;
}

結(jié)果如圖：

可以看到結(jié)果是符合預(yù)期的，es6中數(shù)組的擴(kuò)展方法includes解決了用indexOf的弊端(不夠直觀，結(jié)果還要和索引進(jìn)行比較。對(duì)NaN的誤判)。

let unique_set = (arr) => {
    return [...new Set(arr)];
}

結(jié)果和includes方法一樣，此處利用es6新增數(shù)據(jù)結(jié)構(gòu)set的特性，達(dá)到去重的目的。

let unique_map = (arr) => {
    let ret = [],
        m = new Map();
    for(val of arr) {
      if(!m.get(val)) {
        m.set(val , true);
        ret.push(val);
      }
    }
    return ret;
}

結(jié)果和includes一樣：

此處利用es6新增數(shù)據(jù)結(jié)構(gòu)map的特性，之前的鍵值對(duì)集合（js對(duì)象），只能用字符串當(dāng)作健，map這種數(shù)據(jù)結(jié)構(gòu)打破了這一限制，各種類型的值都可以當(dāng)作健，而且map的健是跟內(nèi)存地址綁定的，只要內(nèi)存地址不同就認(rèn)為是不同的健，解決了之前形式相同而內(nèi)存地址不同被去掉的問題。對(duì)于簡單數(shù)據(jù)類型，只要嚴(yán)格相等就認(rèn)為是相同的健，特例NaN也認(rèn)為是相同的健。所以就解決了之前的兩個(gè)大難題。

總結(jié) 
雖然只是一個(gè)簡單的去重問題，但這一路實(shí)踐下來，可以看到j(luò)s越來越強(qiáng)大，功能也越來越完善，同時(shí)也越來越優(yōu)雅。現(xiàn)在再聽到有人說，js只是處理簡單表單驗(yàn)證的玩具車語言之類的云云，我想我也會(huì)忍不住在他耳邊懟一句：那他媽是從前。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87231.html

相關(guān)文章

  • js基本操作-數(shù)組去重

    摘要：基本操作數(shù)組去重寫在前面數(shù)組去重經(jīng)常出現(xiàn)在前端招聘的筆試題里，比如有數(shù)組，請(qǐng)用實(shí)現(xiàn)去重函數(shù)，使得返回作為筆試題，考點(diǎn)有二正確?；窘榻B文章主要是對(duì)數(shù)組去重的常用方法進(jìn)行介紹。 js基本操作-數(shù)組去重 寫在前面 JavaScript 數(shù)組去重經(jīng)常出現(xiàn)在前端招聘的筆試題里，比如： 有數(shù)組 var arr = [a, b, c, 1, 0, c, 1, , 1, 0]，請(qǐng)用 JavaScr...

    blastz 評(píng)論0 收藏0

  • JS程序

    摘要：設(shè)計(jì)模式是以面向?qū)ο缶幊虨榛A(chǔ)的，的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e，這讓我一開始接觸的時(shí)候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設(shè)計(jì)模式必須要先搞懂面向?qū)ο缶幊?，否則只會(huì)讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學(xué)習(xí)總結(jié)。知識(shí)只有分享才有存在的意義。 是時(shí)候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

    melody_lql 評(píng)論0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com ...

    張金寶 評(píng)論0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com ...

    huangjinnan 評(píng)論0 收藏0

  • JS數(shù)組去重總結(jié)

    摘要：數(shù)組去重，一般會(huì)在面試的時(shí)候才會(huì)碰到，要求手寫數(shù)組去重方法的代碼。在實(shí)際項(xiàng)目中碰到的數(shù)組去重，一般都是后臺(tái)去處理，很少讓前端處理數(shù)組去重。數(shù)組去重的方法一利用去重中最常用如果不考慮兼容性，這種去重的方法代碼最少。 數(shù)組去重，一般會(huì)在面試的時(shí)候才會(huì)碰到，要求手寫數(shù)組去重方法的代碼。如果是被提問到，數(shù)組去重的方法有哪些？你能答出其中的10種，面試官很有可能對(duì)你刮目相看。 在實(shí)際項(xiàng)目中碰到的...

    whinc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<