前端 數組去重 彙總

一直對數組的去重都瞭解的不深，每次都要去百度然後各種調試，今天在網上看到一篇博客，寫的很好，不僅讓我鞏固了很多數組的方法，也解決了工作中遇到的問題。

問題是有一個數組對象，例如：

案例一：

arr = [
    { a: '1', b: 'q1' },
    { a: '2', b: 'q2' },
    { a: '1', b: 'q3' },
    { a: '1', b: 'q4' },
    { a: '2', b: 'q5' },
    { a: '3', b: 'q6' }
]

網上找了很多去重的方法，都是對比了數組中的所有key值和value值，然後來判斷是否相同，之前也遇到過這樣的去衝需求，同樣百度到了相應的解決方法：

案例二：

例如：
var peoples = [
    {id:1,name:'wang'},
    {id:2,name:'zhang'},
    {id:2,name:'zhang'},
]
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;
        }
uniq(peoples);  //最終peoples  = [{id:1,name:'wang'},{id:2,name:'zhang'},]

• indexof()

這裏遇到了一個 indexof()方法，indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。如果沒有找到匹配的字符串則返回 -1。

而這次遇到的去重是隻對比a的value值相同，就去掉，視爲重複；
同樣在網上找到了代碼精簡的方法：

var c=arr.reverse().filter(function(item,index){
        var _index=arr.findIndex(function(_item){
            return item.a == _item.a;
        });
        return index == _index;
    });
    c.reverse();

• filter()

這裏用到了filter()方法，filter也是一個常用的操作，它用於把Array的某些元素過濾掉，然後返回剩下的元素。
和map()類似，Array的filter()也接收一個函數。和map()不同的是，filter()把傳入的函數依次作用於每個元素，然後根據返回值是true還是false決定保留還是丟棄該元素。
下面是幾個利於理解該方法的例子，也很實用。
例如，在一個Array中，刪掉偶數，只保留奇數

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var a = arr.filter (function( x ) {
	return x % 2 !== 0;
})
a = [1, 5, 9, 15]

例如，把一個Array中的空字符串刪掉

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var a = arr.filter (function( x ) {
	return x && x.trim();  //$.trim()函數會移除字符串開始和末尾處的所有換行符，空格(包括連續的空格)和製表符。如果這些空白字符在字符串中間時，它們將被保留，不會被移除。
})

filter還可以接收回調函數，filter()接收的回調函數，其實可以有多個參數。通常我們僅使用第一個參數，表示Array的某個元素。回調函數還可以接收另外兩個參數，表示元素的位置和數組本身：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是變量arr
    return true;
});

例如案例二中的去重，同樣可以用filter來實現遍歷：

peopels.filter(function(element, index, self) {
	return self.indexOf(element) === index;
})

去除重複元素依靠的是indexOf總是返回第一個元素的位置，後續的重複元素位置與indexOf返回的位置不相等，因此被filter濾掉了。

• findIndex()

這裏還用到了一個findIndex方法，findIndex() 方法爲數組中的每個元素都調用一次函數執行：

當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之後的值不會再調用執行函數。
如果沒有符合條件的元素返回 -1
注意: findIndex() 對於空數組，函數是不會執行的。
注意: findIndex() 並沒有改變數組的原始值。