JavaScript數組去重的10種方法

「數組去重」的確是個老生常談的問題了，可是你真正的掌握了嗎？平時開發中是否是用最簡單粗暴的方法來去重？注意到它的性能問題了嗎？當面試官對你回答的四個去重方法都不滿意時你能夠想出更簡單且性能能更好的方法嗎？

下面介紹幾種經常使用的方法，從簡單到更簡單，從性能差到性能好，開始！

1. for循環(兩次) + 新數組

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
function unique(arr){
    let newArr = [arr[0]];
    for(let i = 1; i < arr.length; i++){
          let flag = false;
          for(var j = 0; j < newArr.length; j++){
               if(arr[i] == newArr[j]){
                flag = true;
                break;
               }
          }
          if(!flag){
               newArr.push(arr[i]);
          }
     }
     return newArr;
}
console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

2. for循環(一次) + 新數組 + 新對象

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', '1', 0, 2, 2, 3];
function unique(arr){
    let newArr = [];
    let obj = {};
    for (let i = 0; i < arr.length; i++) {
        if (!obj[typeof arr[i] + arr[i]]) {
            obj[typeof arr[i] + arr[i]] = 1;
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
console.log(unique(arr)); // [1, "a", "b", "d", "e", "1", 0, 2, 3]

3. for循環(一次) + sort()排序 + 新數組

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
function unique(arr){
    arr.sort();
    let newArr = [arr[0]];
     for(let i = 1; i < arr.length; i++){
          if(arr[i] !== newArr[newArr.length - 1]){
               newArr.push(arr[i]);
          }
     }
     return newArr;
}
console.log(unique(arr)); // [0, 1, 2, 3, "a", "b", "d", "e"],這個不錯哈，並且排序了

4. forEach + indexOf() + 新數組

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
function unique(arr){
    let newArr = [];
     arr.forEach((item, index, array) => {
        if(array.indexOf(item) === index) {
            newArr.push(item);
        }
    });
     return newArr;
}
console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

5. filter + indexOf()

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
function unique(arr){
    return arr.filter((item, index, array) =>  array.indexOf(item) === index);
}
console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

6. filter + Map()

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
function unique(arr){
    const seen = new Map();
    return arr.filter((item) => !seen.has(item) && seen.set(a, 1));
}
console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

7. Set() + Array.from

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
function unique(arr){
    return Array.from(new Set(arr));
}
console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

8. Set() + [...()]

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
function unique(arr){
    return [...(new Set(arr))];
}
console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

9. reduce + includes()

let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

10. 第三方庫

jQuery: $.unique
underscore: _.unique

仔細一看，去重的方法真的挺多的哈，若是支持ES6建議使用以上第7種或第8種的Set()方法，若是支持ES5且只需兼容通常瀏覽器建議使用第五種，不只代碼簡潔，並且性能優越，我通常使用第5種filter()方法，你呢？