【JavaScript】JS數組去重的幾種常見方法

文章目錄

• JS數組去重的幾種常見方法
• • • 一、簡單的去重方法
    • 二、排序後相鄰去除法
    • 三、數組下标法
    • 四、優化周遊數組法
    • 五、對象鍵值法去重
    • 六、ES6 數組去重set(面試問過)

JS數組去重的幾種常見方法

一、簡單的去重方法

// 最簡單數組去重法
/*
* 建立一新數組，周遊傳入數組，值不在新數組就push進該新數組中
* IE8以下不支援數組的indexOf方法
* */
function uniq(array){
    var temp = []; //一個新的臨時數組
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));
           

注：indexOf用法：

• indexOf() 方法可傳回數組中某個指定的元素位置。
• 該方法将從頭到尾地檢索數組，看它是否含有對應的元素。開始檢索的位置在數組 start 處或數組的開頭（沒有指定 start 參數時）。
• 如果找到一個 item，則傳回 item 的第一次出現的位置。開始位置的索引為 0。
• 如果在數組中沒找到指定元素則傳回 -1。

二、排序後相鄰去除法

/*
* 給傳入數組排序，排序後相同值相鄰，
* 然後周遊時,新數組隻加入不與前一值重複的值。
* 會打亂原來數組的順序
* */
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

           

三、數組下标法

/*
*
* 還是得調用“indexOf”性能跟方法1差不多，
* 實作思路：如果目前數組的第i項在目前數組中第一次出現的位置不是i，
* 那麼表示第i項是重複的，忽略掉。否則存入結果數組。
* */
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //如果目前數組的第i項在目前數組中第一次出現的位置是i，才存入數組；否則代表是重複的
        if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
           

四、優化周遊數組法

// 思路：擷取沒重複的最右一值放入新數組
/*
* 推薦的方法
*
* 方法的實作代碼相當酷炫，
* 實作思路：擷取沒重複的最右一值放入新數組。
* （檢測到有重複值時終止目前循環同時進入頂層循環的下一輪判斷）*/
function uniq(array){
    var temp = [];
    var index = [];
    var l = array.length;
    for(var i = 0; i < l; i++) {
        for(var j = i + 1; j < l; j++){
            if (array[i] === array[j]){
                i++;
                j = i;
            }
        }
        temp.push(array[i]);
        index.push(i);
    }
    console.log(index);
    return temp;
}

var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa));
           

五、對象鍵值法去重

/*
* 速度最快， 占空間最多（空間換時間）
*
* 該方法執行的速度比其他任何方法都快， 就是占用的記憶體大一些。
* 現思路：建立一js對象以及新數組，周遊傳入數組時，判斷值是否為js對象的鍵，
* 不是的話給對象新增該鍵并放入新數組。
* 注意點：判斷是否為js對象鍵時，會自動對傳入的鍵執行“toString()”，
* 不同的鍵可能會被誤認為一樣，例如n[val]-- n[1]、n["1"]；
* 解決上述問題還是得調用“indexOf”。*/
function uniq(array){
    var temp = {}, r = [], len = array.length, val, type;
    for (var i = 0; i < len; i++) {
        val = array[i];
        type = typeof val;
        if (!temp[val]) {
            temp[val] = [type];
            r.push(val);
        } else if (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            r.push(val);
        }
    }
    return r;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
           

六、ES6 數組去重set(面試問過)

• Set執行個體的方法分為兩大類：操作方法（用于操作資料）和周遊方法（用于周遊成員），操作方法有：add(value)、delete(value)、has(value)、clear()；周遊方法有：keys()、values()、entries()、forEach()
• ES6中Array新增了一個靜态方法Array.from，可以把類似數組的對象轉換為數組，如通過querySelectAll方法得到HTML DOM Node List，以及ES6中新增的Set和Map等可周遊對象，

1、ES6——new Set方法

• 先将 Set 結構轉為數組 […new Set(myArray )]

const myArray = [1,1,2,2,3,3,4,4,5,5]
console.log([...new Set(myArray )]);// [1, 2, 3, 4, 5]
           

2、Array.from（該方法可以将 Set 結構轉為數組）

function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
           

或者一行代碼解決

let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));
console.log(array);
           

3、ES5實作數組去重

var array = [1, '1', 1, 2, 3, 2, 4];
var tmpObj = {};
var result = [];
array.forEach(function(a) {
  var key = (typeof a) + a;
  if (!tmpObj[key]) {
    tmpObj[key] = true;
    result.push(a);
  }
});
console.log(result);
// => [1, "1", 2, 3, 4]