最全的數組去重方法對比

本文最先發佈於csdn，爲原創

常規方法兩種

let json = arr => {
    let res = [],
        obj = {};
    arr.forEach(value => {
        let key = typeof(value) + value;
        !obj.hasOwnProperty(key) && (res.push(value), obj[key] = 1);
    })
    return res;
}

let sort = arr => {
    //數組深拷貝，爲不了影響原來的數組
    let newArr = arr.concat();
    newArr.sort();
    for (var i = newArr.length; i > 0; i--) {
        if ( newArr[i] === newArr[ i - 1 ] ) { // use == if '2' eq 2, else ===
            newArr.splice( i, 1 );
        }
    }
    return newArr;
}

第一種方法經常使用可是有坑

console.log(unique([ new String(1), new Number(1) ]))
//[String]0: String0: "1"length: 1__proto__: String[[PrimitiveValue]]: "1"length: 1__proto__:Array[0]

碰到這種狀況就出問題了

第二種方法使用sort，sort方法返回的結果並不必定是升序，主要目的是將重複的數字排到一塊兒

使用ES5的indexOf方法兩種

let foreach = arr => {
    arr.forEach(value => {
        res.indexOf(value) == -1 && res.push(value);
    }, res = [])
}
let unique = arr => {
    let res = [];
    arr.forEach(function(value) {
        (res.indexOf(value) == -1) && res.push(value);
    })
    return res;
}
let arr = [1, 1, 2, 2];
unique3(arr);
console.log(res);

簡潔優雅版

let filter = arr => { return arr.filter(function (value, index, array) { return index <= array.indexOf(value);}); };

es6奇技淫巧

2016.7.7更新
看到評論提醒的方法

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

補充說明，from方法如今瀏覽器支持程度不太好，另外經測試，性能也不具備優點

性能對比

2016.7.12更新，最近發現了一篇文章進行性能測試，以爲很贊，之後測性能就用這個了
benchmark地址

let benchmark = require('benchmark');
let suit = new benchmark.Suite;
let arr = [1, 1, 1, 2, 3, 2, 4];
let es6 = arr => {
    let array = Array.from(new Set(arr));
};

let filter = arr => { 
    arr.filter((value, index, array) => { return index <= array.indexOf(value);}); 
};

let json = arr => {
    let res = [],
        obj = {};
    arr.forEach(value => {
        let key = typeof(value) + value;
        !obj.hasOwnProperty(key) && (res.push(value), obj[key] = 1);
    })
    return res;
}

let sort = arr => {
    //數組深拷貝，爲不了影響原來的數組
    let newArr = arr.concat();
    newArr.sort();
    for (var i = newArr.length; i > 0; i--) {
        if ( newArr[i] === newArr[ i - 1 ] ) { // use == if '2' eq 2, else ===
            newArr.splice( i, 1 );
        }
    }
    return newArr;
}

let foreach = arr => {
    arr.forEach(value => {
        res.indexOf(value) == -1 && res.push(value);
    }, res = [])
}

suit.add('es6', function() {
    es6(arr);
}).add('filter', function() {
    filter(arr);
}).add('json', function() {
    json(arr);
}).add('sort', function() {
    sort(arr);
}).add('foreach', function() {
    foreach(arr);
}).on('cycle', function(event) {
    console.log(String(event.target));
}).on('complete', function() {
    console.log('Fastest is ' + this.filter('fastest').map('name') + '\n slowest is ' + this.filter('slowest').map('name'));
}).run({'async': true});

在teminal運行node test.js獲得以下結果

$ node 數組去重方法及對比.js
es6 x 275,353 ops/sec ±4.87% (63 runs sampled)
filter x 703,449 ops/sec ±1.49% (89 runs sampled)
json x 238,876 ops/sec ±5.24% (72 runs sampled)
sort x 217,857 ops/sec ±4.58% (64 runs sampled)
foreach x 915,368 ops/sec ±3.84% (65 runs sampled)
Fastest is foreach
slowest is sort

總結

以上全部方法都不會出現將1和"1"視做一塊兒去重的狀況，除開第一種，其餘的方法也能區分開[new String(1), new Number(1)],這裏的方法已是比較全，和其餘博客比起來只有一些實現上的差別，整體方法思想是同樣的

參考資料

一行代碼實現數組去重（ES6）
從 JavaScript 數組去重談性能優化
js對象的hasOwnProperty爲何比數組的indexof方法在性能上高的多？
使用Benchmark.js和jsPerf分析代碼性能
源代碼github地址