引言：

對于傳統的前端工程師來說，更多的只是把服務端回應的資料渲染到頁面上，

隨著前端的不斷進化，演算法對我們而言也日漸重要，大公司為了優中選優，經常也會用演算法題去篩選更優秀的人才，

演算法，或許在作業中很少能用到，就算能用到也是直接調現成的庫函式，但在求職時卻是一個不可忽視的因素，總之機遇和挑戰并存吧！

本文是對陣列去重這個常規演算法題的手撕分析及拓展，希望能夠給讀者帶來無形的財富，

開始：

1.傳統陣列去重：

傳統陣列去重，是很硬氣的方式，去跟問題硬剛，來完成最直白的陣列去重，是種笨辦法，但很有效果，

首先，在一個陣列中，要對一個陣列去重，先想到的一定是讓所有元素跟其它元素比較一下，然后刪掉相同的，

沒錯，我也是這么想的，我們反手就是一個嵌套回圈：

for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
        // 寫判斷條件
    }
}

這樣就構成了i和j雙指標聯動的形式，可是仔細思考，這好像世界杯足球運動員互相握手的模型，

我跟你握手了，這就算完成了，難道你還要再跟我握手嗎？

所以，受到啟發，我們修改內層回圈的初始條件，

for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
        // 寫判斷條件
    }
}

把j=0，改成j=i+1，這樣就有效避免了重復握手的情況，

接著，我們需要判斷值是否一樣，所以可以比較一下，兩個一樣的話就刪掉內層回圈下標的元素，

if (arr[j] === arr[i]) {
   arr.splice(j, 1);
}

注：splice是JS原生語法，需要用陣列物件去呼叫，第一個引數是要呼叫他的陣列需要切掉的下標，第二個引數是往后切幾個，

我們加上呼叫代碼：

function arrayOutRepeat(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[j] === arr[i]) {
                arr.splice(j, 1);
            }
        }
    }
    console.log(arr);
}
arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 3, 2, 3, 1]);

這樣我們就寫好了一個演算法，我們進行呼叫試試吧，

結果出現了問題，為什么沒有刪清楚呢？

原來！我們在splice之后，j就++了，相當于跳過一個元素，

那我們就讓j往回再指一下，讓j--，再試試，

現在正常了，所以上完整代碼（手撕終版）：

function arrayOutRepeat(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[j] === arr[i]) {
                arr.splice(j, 1);
                j--;
            }
        }
    }
    return arr;
}
let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 3, 2, 3, 1]);
console.log(array);

2.排序陣列去重：

根據前邊的詳解，我們大體能夠明確傳統去重的程序，

我們還可以換種思維，將陣列排好序，然后讓相鄰的元素比較，

這樣的代碼是非常簡單的，也可以說是巧妙解決問題，

function arrayOutRepeat(arr) {
    arr.sort();
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === arr[i + 1]) {
            arr.splice(i, 1);
            i--;
        }
    }
    return arr;
}
let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 4, 3, 2, 3, 1]);
console.log(array);

3.新陣列添加元素：

我們再換種思路，可以宣告一個空陣列，用新陣列比較舊陣列，要是沒有就添加，

這里使用了indexOf方法，這個方法有一定的兼容性問題，IE低版本慎用！

indexOf方法需要用新陣列去呼叫，引數為舊陣列中的第i個元素，回傳值如果為-1則表示沒有找到，

我們可以利用這一點，去添加舊陣列里沒有的元素，

function arrayOutRepeat(arr) {
    let arrNew = [];
    for (let i = 0; i < arr.length; i++) {
        if (arrNew.indexOf(arr[i]) == -1) {
            arrNew.push(arr[i]);
        }
    }
    return arrNew;
}
let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 4, 3, 2, 3, 1]);
console.log(array);

在這里，ES6還有一個includes方法，同樣的思路，

function arrayOutRepeat(arr) {
    let arrNew = [];
    for (let i = 0; i < arr.length; i++) {
        if (!arrNew.includes(arr[i])) {
            arrNew.push(arr[i]);
        }
    }
    return arrNew;
}
let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 4, 3, 2, 3, 1]);
console.log(array);

4.拓展：

除了上述三種最常規的去重手段之外，還有不少精簡的解決方案，這里簡單介紹一下，

I.ES6中Set構造方法：

ES6中的Set是一種集合形式，集合中的元素值是唯一的，

ES6中還對Array新增了一個靜態方法Array.from()，可以把Set集合轉化成陣列形式，

因此配合起來使用，效果更佳，代碼量少的可憐，

function arrayOutRepeat(arr) {
    return Array.from(new Set(arr));
}
let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 4, 3, 2, 3, 1]);
console.log(array);

在arrayOutRepeat方法中，只需要一句代碼便解決問題，這個代碼已經非常精簡了，

可是，還有更精簡的方法，真不可思議，

ES6中新增的擴展運算子，可以強制Set集合型別轉換成陣列，代碼量更是少的可憐，

function arrayOutRepeat(arr) {
    return [...new Set(arr)];
}
let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 4, 3, 2, 3, 1]);
console.log(array);

II.利用Map結構：

Map也是ES6中新加入的內容，是一種用鍵值對存盤資料的結構，

我們可以通過Map實體化的物件map，結合物件呼叫map封裝的API取到key值，再用擴展運算子強制型別轉換，

function arrayOutRepeat(arr) {
    let map = new Map();
    for (let i = 0; i < arr.length; i++) {
        if (!map.has(arr[i])) {
            map.set(arr[i])
        }
    }
    return [...map.keys()];
}
let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 4, 3, 2, 3, 1]);
console.log(array);

III.利用過濾器filter：

過濾器，顧名思義，把不符合條件的濾掉，符合條件的篩出，

其中item是第i項的值，index是索引，而indexOf方法查找方式是順序查找（從前往后），

比如遍歷到了第二個1的位置，indexOf回傳的索引值是第一個1的索引，以此類推，

所以通過比較，加上過濾器，把索引值對不上的全部濾掉，剩下的就是“精英”了，

function arrayOutRepeat(arr) {
    return arr.filter((item, index) => {
        return arr.indexOf(item) === index;
    })
}
let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 4, 3, 2, 3, 1]);
console.log(array);

IV.遞回：

遞回在編程中，算是邏輯難度很大的部分，看似代碼簡潔，其實暗藏玄機，

這里我將網上的代碼拆解簡化了一下，自己手寫一遍就能更清晰！代碼如下：

function arrayOutRepeat(arr) {

    arr.sort();

    function loop(index) {
        if (index >= 1) {
            if (arr[index] === arr[index - 1]) {
                arr.splice(index, 1);
            }
            loop(index - 1);
        }
    }
    loop(arr.length - 1);
    return arr;
}

let array = arrayOutRepeat([1, 2, 3, 2, 1, 3, 4, 3, 4, 4, 4, 3, 2, 3, 1]);
console.log(arrayOutRepeat(array));

決議點：

1.思路也是經過排序之后利用索引比較相鄰元素的值，進行去留判斷，（由后向前）

2.由于形參arr作用域的關系，所以寫了個閉包，方便內層函式可以參考外層函式的變數，

3.遞回的結束條件，是當index<1時，也就是到首個元素時，遞回進行回呼，

總結：

以上就是常用的陣列去重方法，雖然還有一些組合方法，但基本都是換湯不換藥，最重要的是思想！

注：當遇到參考資料型別時（陣列，物件等），以上方法無法對他們進行去重處理，

這時我們就需要在判斷條件，利用instance運算子、isArray方法，constructor屬性等去深入判斷，

原創地址：https://www.cnblogs.com/ElemSN/p/13523410.html，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4040.html

標籤：JavaScript

上一篇：Vue原始碼決議，keep-alive是如何實作快取的？

下一篇：高德地圖基于vue實作海量點位聚合

前端筆試題——陣列去重（保姆級手撕）

引言：

開始：