再見，重複的你（經典數組去重12招式-面試題）

時間 2019-11-05

原文原文鏈接

前言

文章涉及的內容可能不全面，但量不少，須要慢慢看。我花了很長的時間整理，用心分享心得，但願對你們有所幫助。可是不免會有打字的錯誤或理解的錯誤點，但願發現的能夠郵箱告訴我1163675970@qq.com，我會及時的進行修改，只但願對你有所幫助，謝謝。javascript

hahaha

昨天跟在前端好友聊天時，他提到了一個問題：「數組去重你會怎麼寫？"。想了想，其實有好幾種方法，決定在這篇筆記中作一些記錄。前端

數組去重，通常都是在面試的時候纔會碰到，通常是要求手寫數組去重方法的代碼。若是是被提問到，數組去重的方法有哪些？你能答出其中的10種，面試官頗有可能對你另眼相看。java

在真實的項目中碰到的數組去重，通常都是後臺去處理，不多讓前端處理數組去重。雖然平常項目用到的機率比較低，但仍是須要了解一下，以防面試的時候可能回被問到。面試

### 思路一：

雙層循環，外層循環元素，內層循環時比較值
若是有相同的值則跳過，不相同則push進數組

Array.prototype.distinct = function(){
    var arr = this,
        result = [],
        i,
        j,
        len = arr.length;

    for(i = 0; i < len; i++){
        for(j = i + 1; j < len; j++){
            if(arr[i] === arr[j]){
                j = ++i;
            }
        }
        result.push(arr[i]);
    }
    return result;
}
var arra = [1,2,3,4,4,1,1,2,1,1,1];
arra.distinct();             //返回[3,4,2,1]
複製代碼

思路二：利用for嵌套for,基於splice直接在原數組進行操做（ES5經常使用）

雙層循環，外層循環元素，內層循環時比較值
值相同時，則刪去這個值

注意點:刪除元素以後，須要將數組的長度也減1.數組

Array.prototype.distinct = function (){
    var arr = this,
        i,
        j,
        len = arr.length;

    for(i = 0; i < len; i++){
        for(j = i + 1; j < len; j++){
            if(arr[i] === arr[j]){  //第一個等同於第二個，splice方法刪除第二個
                arr.splice(j,1);
                len--;
                j--;
            }
        }
    }
    return arr;
};

var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56
複製代碼

優勢：簡單易懂缺點：佔用內存高，速度慢瀏覽器

思路三：利用對象的屬性不能相同的特色進行去重

Array.prototype.distinct = function (){
    var arr = this,
        i,
        obj = {},
        result = [],
        len = arr.length;

    for(i = 0; i< arr.length; i++){
        if(!obj[arr[i]]){    //若是能查找到，證實數組元素重複了
            obj[arr[i]] = 1;
            result.push(arr[i]);
        }
    }
    return result;
};

var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56
複製代碼

思路4、數組遞歸去重

運用遞歸的思想
先排序，而後從最後開始比較，遇到相同，則刪除

Array.prototype.distinct = function (){
    var arr = this,
        len = arr.length;

    arr.sort(function(a,b){        //對數組進行排序才能方便比較
        return a - b;
    })

    function loop(index){
        if(index >= 1){
            if(arr[index] === arr[index-1]){
                arr.splice(index,1);
            }
            loop(index - 1);    //遞歸loop函數進行去重
        }
    }
    loop(len-1);

    return arr;
};

var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];
var b = a.distinct();
console.log(b.toString());        //1,2,3,4,5,6,45,56
複製代碼

思路5、利用`indexOf`以及`forEach`

新建一個空的結果數組，for 循環原數組，判斷結果數組是否存在當前元素，若是有相同的值則跳過，不相同則push進數組。數據結構

Array.prototype.distinct = function (){
    var arr = this,
        result = [],
        len = arr.length;

    arr.forEach(function(v, i ,arr){        //這裏利用map，filter方法也能夠實現
        var bool =  arr.indexOf(v,i+1);        //從傳入參數的下一個索引值開始尋找是否存在重複
        if(bool === -1){
            result.push(v);
        }
    })

    return result;
};

var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];
var b = a.distinct();
console.log(b.toString());    //1,23,2,3
複製代碼

思路6、利用`indexOf`以及`sort`（不推薦）

注意：這個方法依賴於瀏覽器內置Array類的sort方法，因爲瀏覽器不一樣，效果就不一樣。利用sort()排序方法，而後根據排序後的結果進行遍歷及相鄰元素比對。函數

Array.prototype.distinct = function (){
    var arr = this,
        len = arr.length,
        list = arr.concat().sort();    //注意這個地方的concat：複製一個新的數組
    list.sort(function(a,b){
        if(a === b){
            var index = arr.indexOf(a);
            arr.splice(index,1);    //在複製的數組進行排序（相鄰的兩個元素進行比較）時，操做原有數組arr
        }
    });
    return arr;
};

var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3,25];
var b = a.distinct();
console.log(b.toString());
複製代碼

思路7、利用ES6的set （ES6中最經常使用） [...new Set(arr)]

Set數據結構，它相似於數組，其成員的值都是惟一的。oop

利用Array.from將Set結構轉換成數組

function dedupe(array){
    return Array.from(new Set(array));
}

dedupe([1,1,2,3]) //[1,2,3]
複製代碼

拓展運算符(...)內部使用for...of循環

let arr = [3,5,2,2,5,5];
let unique = [...new Set(arr)];    //[3,5,2]


[...new Set(arr)] 
//代碼就是這麼少----（其實，嚴格來講並不算是一種，相對於第一種方法來講只是簡化了代碼）
複製代碼

思路八：利用reduce+includes

function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
複製代碼

思路九：利用hasOwnProperty

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //全部的都去重了
複製代碼

利用hasOwnProperty 判斷是否存在對象屬性ui

思路十：利用filter

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //當前元素，在原始數組中的第一個索引==當前索引值，不然返回當前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]
複製代碼

思路十一：利用Map數據結構去重

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 數組用於返回結果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 若是有該key值
      map .set(arr[i], true); 
    } else { 
      map .set(arr[i], false);   // 若是沒有該key值
      array .push(arr[i]);
    }
  } 
  return array ;
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
複製代碼