JavaScript实现数组去重的十种方法分享

下面我将为您详细讲解“JavaScript实现数组去重的十种方法分享”的完整攻略，让您对此有更深入的了解。

简介

数组去重是前端开发中常见的任务，也是面试中经常会被问到的问题。本文将介绍JavaScript实现数组去重的十种方法。

1.使用for循环和indexOf方法

这是一种基础的去重方法，可以使用for循环遍历数组，再通过indexOf方法来判断是否重复。具体实现代码如下：

function unique1(arr){
    var res = [];
    for(var i=0;i<arr.length;i++){
        if(res.indexOf(arr[i])===-1){
            res.push(arr[i]);
        }
    }
    return res;
}

示例：

console.log(unique1([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

2.使用for循环和双重for循环

这种方法可以使用两重for循环来进行比较，当遇到重复时跳过，否则将该元素添加到新数组中。具体实现代码如下：

function unique2(arr){
    var res = [];
    for(var i=0;i<arr.length;i++){
        for(var j=0;j<res.length;j++){
            if(arr[i]===res[j]){
                break;
            }
        }
        if(j===res.length){
            res.push(arr[i]);
        }
    }
    return res;
}

示例：

console.log(unique2([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

3.使用for循环和对象

这种方法可以使用对象的属性来标记数组中的元素是否重复。具体实现代码如下：

function unique3(arr){
    var obj = {};
    var res = [];
    for(var i=0;i<arr.length;i++){
        if(!obj[arr[i]]){
            obj[arr[i]] = true;
            res.push(arr[i]);
        }
    }
    return res;
}

示例：

console.log(unique3([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

4.使用sort方法

这种方法可以先将数组排序，然后遍历数组，如果当前元素与前一个元素不同，则将其添加到新数组中。具体实现代码如下：

function unique4(arr){
    var res = [];
    arr.sort();
    res.push(arr[0]);
    for(var i=1;i<arr.length;i++){
        if(arr[i]!==res[res.length-1]){
            res.push(arr[i]);
        }
    }
    return res;
}

示例：

console.log(unique4([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 4, 5, 6]

5.使用ES6的Set数据结构

这种方法可以使用ES6的Set数据结构来进行去重。Set是一种类似于数组的数据结构，它可以自动去重。具体实现代码如下：

function unique5(arr){
    return Array.from(new Set(arr));
}

示例：

console.log(unique5([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

6.使用ES6的Map数据结构

这种方法可以使用ES6的Map数据结构来进行去重。Map是一种存储键值对的数据结构，它可以将数组中的每个元素作为键进行存储，重复的元素会被覆盖。具体实现代码如下：

function unique6(arr){
    var map = new Map();
    var res = [];
    for(var i=0;i<arr.length;i++){
        if(!map.has(arr[i])){
            map.set(arr[i],true);
            res.push(arr[i]);
        }
    }
    return res;
}

示例：

console.log(unique6([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

7.使用filter方法

这种方法可以使用filter方法来进行去重。filter方法可以对数组中的每个元素进行过滤，并返回满足条件的元素组成的新数组。具体实现代码如下：

function unique7(arr){
    return arr.filter(function(item,index,array){
        return array.indexOf(item)===index;
    });
}

示例：

console.log(unique7([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

8.使用reduce方法

这种方法可以使用reduce方法来进行去重，reduce方法可以对数组中的元素进行迭代，并将迭代结果作为下一次迭代的初始值。具体实现代码如下：

function unique8(arr){
    return arr.reduce(function(pre,cur){
        if(pre.indexOf(cur)===-1){
            pre.push(cur);
        }
        return pre;
    },[]);
}

示例：

console.log(unique8([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

9.使用递归

这种方法可以使用递归来进行去重。递归方法会将数组不断拆分成小数组，然后递归比较小数组中的元素是否相同。具体实现代码如下：

function unique9(arr){
    var res = [];
    var arrLen = arr.length;
    var recursiveUnique = function(arr){
        var item = arr[0];
        if(res.indexOf(item)===-1){
            res.push(item);
        }
        if(arr.length>1){
            recursiveUnique(arr.slice(1));
        }
    };
    recursiveUnique(arr);
    return res;
}

示例：

console.log(unique9([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

10.使用ES6的includes方法

这种方法可以使用ES6的includes方法来进行去重，includes方法可以判断数组中是否包含某个特定的元素。具体实现代码如下：

function unique10(arr){
    var res = [];
    for(var i=0;i<arr.length;i++){
        if(!res.includes(arr[i])){
            res.push(arr[i]);
        }
    }
    return res;
}

示例：

console.log(unique10([1,2,3,5,4,6,3,2,1,4])); // [1, 2, 3, 5, 4, 6]

总结

本文介绍了JavaScript实现数组去重的十种方法，每种方法都有各自的优缺点，可以根据实际情况选择合适的方法。