前言

最近在看代码，发现一个数组去重方法，突然发现数组去重的重要性，网上面查了一下，又是一个大大的知识点啊。
本文参考部分网上教程以及个人总结。

数组去重的方法

在数组去重的过程中，以一开始的逻辑设计我们可以使用最基础的方法。 for

双层循环

var array = [3,6,3,4,5,'A','b','a','A']
function unique(array) {
    var res = []
    for (var i = 0, len = array.length; i < len; i++) {
        for ( var j = 0, reslen = res.length; j < reslen; j++) {
            if(array[i] === res[j]) {
                break;
            }
        }
        // 应用了变量提升，判断如果array数组，在res中执行完揗环后还没找到，就添加到res数组中
        if (j === reslen) {
            res.push(array[i])
        }
    }
    return res
}

console.log(unique(array))
// [3, 6, 4, 5, "A", "b", "a"]

这个方法很基础，也是学程序必须会的.优点是很好的兼容,缺点就是有变量提升等问题.

indexOf (es5)

es5过后大量使用indexOf,indexOf能快速查找数组当找不到的时候会返回-1

var array = [3,6,3,4,5,'A','b','a','A']

function unique(array) {
    var res = []
    for (var i = 0, len = array.length; i < len; i++) {
        var current = array[i]
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res
}

添加了indexOf后简化了很多代码,也轻松实现去重.

Filter (es5)

es5后可以更一步通过filter简化循环.

var array = [3,6,3,4,5,'A','b','a','A']
function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res
}

这方法在jquery 源码上面也看到.非常实用

ES6 的方法 (es6)

随着 ES6 的到来，去重的方法又有了进展，比如我们可以使用 Set 和 Map 数据结构，以 Set 为例，ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

var array = [3,6,3,4,5,'A','b','a','A','3']

function unique(array) {
    return Array.from(new Set(array));
}

三行实现去重太可怕了
甚至一行

1
2
3

[...new Set([3,6,3,4,5,'A','b','a','A','3'])]
or
var unique = (array) => [...new Set(array)]

其它

这里还有其它方法实现去重,比如Object的Key Value 比对,或者下面方法:

const arr = [1,1,2,2,4,1,5,6,2,3,1]
const unique = arr => arr.map(x => [x])
    .reduce(
        (x,[y]) => x.includes(y) ?
        x : [...x,y]
    )

最后

如果数组是大量数据量处理的情况下,在去重前再排序一下会提高处理效率.

扩展阅读

JavaScript专题之数组去重

JS数组去重方法最优解

前言