JavaScript数组去重的10种方法

时间：2022-09-12 20:22:07

「数组去重」的确是个老生常谈的问题了，但是你真正的掌握了吗？平时开发中是不是用最简单粗暴的方法来去重？注意到它的性能问题了吗？当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法吗？

下面介绍几种常用的方法，从简单到更简单，从性能差到性能好，开始！

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()方法，你呢？

相关文章