多种方式数组去重

556 阅读1分钟

前言:数组去重是老话题了,越炒越香哈哈,今天我们也翻出来炒一炒,注重理解,也讲实现。本文并非原创,主要参考 JavaScript专题之数组去重

双重循环

这是最原始的方法了,直接上代码

var array = [1, 1, '1', '1', 'a', 'g', 7,'a', 'g',]
function unique(array) {
    // res用来存储结果
    var res = []
    for (var i = 0; i < array.length; i++) {
        for (var j = 0; j < res.length; j++) {
            if (array[i] === res[j]) {
                break
            }
        }
        // 如果array[i]是唯一的,那么执行完循环,j等于resLen
        if (j === res.length) {
            res.push(array[i])
        }
    }
    return res
}
console.log(unique(array)) //[ 1, '1', 'a', 'g', 7 ]

这个代码看起来有点简单,还有个有点是兼容性好,但是时间复杂度明显就有 O(n²)了,效率不高。

indexOf

我们可以使用 indexOf 简化内部循环:

var array = [1, 1, '1', '1', 'a', 'g', 7, 'a', 'g',]
function unique(array) {
    // res用来存储结果
    var res = []
    for (var i = 0; i < array.length; i++) {
        let current = array[i]
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res
}
console.log(unique(array)) //[ 1, '1', 'a', 'g', 7 ]

排序后去重

我们使用数组 sort方法排序以后,相同的值就会排在一起,我们只要判断当前元素与上一元素是否相同,相同就是重复,不相同就添加进 返回数组里面就可以了。

var array = [1, 1, '1', '1', 'a', 'g', 7, 'a', 'g',]
function unique(array) {
    // res用来存储结果
    let res = []
    let sortArray = array.sort()
    let seen
    for (let i = 0; i < sortArray.length; i++) {
        if (!i || seen !== sortArray[i]) {
            res.push(sortArray[i])
        }
        seen = sortArray[i]
    }
    return res
}
console.log(unique(array)) //[ 1, '1', 'a', 'g', 7 ]

// 简化版
const unique = array => array.sort().filter((val, index) => val !==array[index+1])
console.log(unique(array))

unique API

知道了这两种方法后,我们可以去尝试写一个名为 unique 的工具函数,我们根据一个参数 isSorted 判断传入的数组是否是已排序的,如果为 true,我们就判断相邻元素是否相同,如果为 false,我们就使用 indexOf 进行判断

var array1 = [1, 2, '1', 2, 1];
var array2 = [1, 1, '1', 2, 2];

function unique(array, isSorted) {
    var res = []
    var seen = []

    for (var i = 0; i < array.length; i++) {
        var value = array[i]
        if (isSorted) {
            if (!i || seen !== value) {
                res.push(value)
            }
            seen = value
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }
    }
    return res
}
console.log(unique(array1)); // [1, 2, "1"]
console.log(unique(array2, true)); // [1, "1", 2]

Object 键值对

去重的方法众多,尽管我们已经跟着 underscore 写了一个 unqiue API,但是让我们看看其他的方法拓展下视野:

这种方法是利用一个空的 Object 对象,我们把数组的值存成 Object 的 key 值,比如 Object[value1] = true,在判断另一个值的时候,如果 Object[value2]存在的话,就说明该值是重复的。示例代码如下:

var array = [1, 2, 1, 1, '1'];
function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(item) ? false : (obj[item] = true)
    })
}
console.log(unique(array)); // [1, 2]

我们可以发现,是有问题的,因为 1 和 '1' 是不同的,但是这种方法会判断为同一个值,这是因为对象的键值只能是字符串,所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题:

var array = [1, 2, 1, 1, '1'];
function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
console.log(unique(array)); // [1, 2, "1"]

然而,即便如此,我们依然无法正确区分出两个对象,比如 {value: 1} 和 {value: 2},因为 typeof item + item 的结果都会是 object[object Object],不过我们可以使用 JSON.stringify 将对象序列化:

var array = [{value: 1}, {value: 1}, {value: 2}];
function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}
console.log(unique(array)); // [{value: 1}, {value: 2}]

ES6

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

是不是感觉就像是为去重而准备的?让我们来写一版:

```

var array = [1, 2, 1, 1, '1'];
function unique(array) {
   return Array.from(new Set(array));
}
console.log(unique(array)); // [1, 2, "1"]

甚至可以再简化下:

function unique(array) {
    return [...new Set(array)];
}

还可以再简化下:

var unique = (a) => [...new Set(a)]