JavaScript数组去重的方式

现在有这样的一个数组：

const arr = [1, 23, 4, 5, 6,3,4,5];

需要封装一个方法，去掉数组中重复的元素，需要的得到这样的目标数组：

const arr = [1, 23, 4, 5, 6,3,];

1、遍历数组

通过遍历数组来实现去重功能，那么就需要定义一个新数组来接收目标数组，在遍历原数组的时候，判断目标数组是否含有该元素，如果没有，那么就将该元素添加到目标数组中，如下代码：

function unique(array) {
    var result = [];
    for (var i = 0; i < array.length; i++) {
        if (result.indexOf(array[i]) === -1) {
            result.push(array[i]);
        }
    }
    return result;
}
console.log(unique(arr)); // [ 1, 23, 4, 5, 6, 3 ]

这个方法思路简单，但是需要定义新的变量。

2、key-value

对方法1的函数进行一个延伸，就是新建一个对象和数组，遍历数组的时候，判断数组元素时候是对象的属性，如果不是，则将该元素添加到目标数组，并且将该元素作为对象的新属性；如果不是，则不对该元素进行处理。其中需要对元素做一个类型判断，否则会出现Number和String的冲突，代码如下：

function unique2(array) {
    var obj = {}, result = [], val, type;
    for (var i = 0; i < array.length; i++) {
        val = array[i];
        type = typeof val;
        if (!obj[val]) {
            obj[val] = [type];
            result.push(val);
        } else if (obj[val].indexOf(type) < 0) {   // 判断数据类型是否存在 
            obj[val].push(type);
            result.push(val);
        }
    }
    return result;
}
console.log(unique2(arr)); //[ 1, 23, 4,   5,6, 3,  '5']

3、排序去重

通过原生的sort函数，对原数组进行排序，然后对排序后的数组进行一个相邻元素的去重，代码如下：

function unique3(array) {
    var result = [array[0]];
    array.sort(function (a, b) { return a - b });
    for (var i = 0; i < array.length; i++) {
        if (array[i] !== result[result.length - 1]) {
            result.push(array[i]);
        }
    }
    return result;
}
console.log(unique3(arr)); //[1, 3, 4, 5,'5', 6, 23]

需要定义一个目标数组。

4、双层循环数组

只是这种方式，一个数组需要遍历两次，代码如下：

function unique4(array) {
    var result = [];
    for (var i = 0, l = array.length; i < array.length; i++) {
        for (var j = i + 1; j < l; j++) {
            // 依次与后面的值进行比较，如果出现相同的值，则更改索引值
            if (array[i] === array[j]) {
                j = ++i;
            }
        }
        // 每轮比较完毕后，索引为i的值为数组中只出现一次的值
        result.push(array[i]);
    }
    return result;
}
console.log(unique4(arr)); //[1, 23, 5, 6, 3, 4, '5']

5、reduce函数

通过reduce函数实现去重，也是需要定义一个对象，虽然不需要重新定义目标数组，是因为reduce函数的第二个参数，需要传入一个空数组即可， 代码如下：

function unique5(array) {
    var obj = {}, type;
    return array.reduce(function (preValue, curValue) {
        type = typeof curValue;
        if (!obj[curValue]) {
            obj[curValue] = [type];
            preValue.push(curValue);
        } else if (obj[curValue].indexOf(type) < 0) {   // 判断数据类型是否存在
             obj[curValue].push(type);
            preValue.push(curValue);
        }
        return preValue;
    }, []);
 }
console.log(unique5(arr)); //[1, 23, 5, 6, 3, 4, '5']

6、ES6的Set数据结构

通过Set数据结构和Array.from(),，set结构具有每个成员唯一性，本身就具有去重的功能，但是它是类数组而不是数组，所以通过Array.form函数对类数组做一个转换。

function unique6(array) {
    return Array.from(new Set(array));
}
console.log(unique6(arr)); //[1, 23, 5, 6, 3, 4, '5']