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

nevermind 發(fā)布于2019-08-21 11:53 / 1597人閱讀

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

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

ES3階段

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

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

// 以下所有方法默認都那拿該數(shù)組進行測試
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)，時間復雜度高，性能不是很好。

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

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ù)組所有元素默認轉(zhuǎn)化為字符串，就會產(chǎn)生以下問題：

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

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

為了解決類型轉(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)換的問題基本解決，但對象部分基本都被去除了，因為他們和字符串相加時還是會發(fā)生轉(zhuǎn)化，解決的方案是把上面的str換成str = typeof arr[i] + JSON.stringify(arr[i])，相加之前先簡單序列化一下。

結(jié)果如圖：

從以上可以看出該階段的各種方法或多或少的都有一些問題，該去除的沒去掉，比如NaN。不該去的給去掉了，比如，形式相同但內(nèi)存地址不同的對象(是否應該去掉全看你怎么定義)。

ES5階段

function unique_es5(arr) {
    return arr.filter(function(ele,index,array) {
      return array.indexOf(ele) == index;
    })
}

結(jié)果如圖：

可以看到除了NaN，其他表現(xiàn)都是正常的。其中indexOf對于NaN總是返回-1，所以導致誤判。

ES6階段

let unique_includes = (arr) => {
    let newArr = [];
    arr.forEach(function(item){
        if(!newArr.includes(item)){
            newArr.push(item);
        }
    });
    return newArr;
}

結(jié)果如圖：

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

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

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

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

總結(jié)

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