首页 专题 文章 代码 归档

【去重】js数组去重的各个方法

1. 前言

这些方法了解下,也没啥毛病!

参考自:

https://segmentfault.com/a/1190000016418021?utm_source=tag-newest

2. es6中Set去重

function unique(arr) {
    // 通过es6的set来去重
    return Array.from(new Set(arr));//一行代码解决的问题
}

let arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))

优缺点:

1、不考虑兼容性,才方法代码很少。

2、无法去重{}

3. splice去重

function unique(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {         //第一个等同于第二个,splice方法删除第二个
                arr.splice(j, 1);
                j--;//为什么要减一?因为当前arr中的元素已经减少一个了,相当于后面的往前移了,所以减一再比较
            }
        }
    }
    return arr;
}
let arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))

4. indexOf去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array.indexOf(arr[i]) === -1) {
            array.push(arr[i])
        }
    }
    return array;
}
let arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))

此方法更好理解,新建一个数组,判断这个数组中有无旧数组的某个元素,没有就push进新数组。

5. sort去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    let arrry = [arr[0]];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
let arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))

先对原数组排序,相同的都排在一起了,然后新建一个新的数组,第一个元素就旧数组的第一个元素

然后再遍历旧数组(从下标1开始),和新数组的元素不等,那么久push到新数组

6. includes去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let array = [];
    for (let i = 0; i < arr.length; i++) {
        if (!array.includes(arr[i])) {//includes 检测数组是否有某个值
            array.push(arr[i]);
        }
    }
    return array
}
let arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))

目前这几种方法都是大同小异,有一个新数组,然后判断新数组中有无就数组的元素,没有就push进去

7. hasOwnProperty去重

function unique(arr) {
    var obj = {};
    return arr.filter(function (item, index, arr) {
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
let arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))

这个方法可以吧{}去重(前面的方法都不行)

8. filter去重

function unique(arr) {
    return arr.filter(function (item, index, arr) {
        //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
        return arr.indexOf(item, 0) === index;
    });
}
let arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))

9. 总结

大致都大同小异:

1、两层循环法

2、利用语法自身键不可重复性

其他的都是用了语言不同的api,比如indexOf 和includes 两层循环 都是同一类

此文阅读完毕,您可以:分享
二维码图片 扫描关注我们哟