js的5种数组去重方法

1、使用Set实现数组去重

Set对象允许存储任何类型的唯一值，无论是原始类型还是引用类型。Set中的元素只会出现一次，即Set中的元素是唯一的。

let obj = {a: 1}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',obj,obj]

function removeDuplicate(arr) {
    return [...new Set(arr)]
}

console.log( removeDuplicate(arr) )
//[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}]

2、用filter方法实现数组去重

用来筛序数组中的每个元素的函数，return一个表达式，为true则保留该元素，false则不保留

let obj = {a: 1}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',obj,obj]

function removeDuplicate(arr) {
    // indexOf返回该元素在数组中第一次出现的索引
    return arr.filter((value, index) => arr.indexOf(value) === index)
}

console.log( removeDuplicate(arr1) )
//[1, 'true', true, 15, false, undefined, null, 'NaN', 0, 'a', {…}] 没有NaN

所以用filter方法无法过滤NaN

3、用includes方法实现数组去重

includes用来判断数组中是否包含某个字段，是返回true，否返回false。也可以判断indexOf的值不等于-1

let obj = {a: 1}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',obj,obj]

function removeDuplicate(arr) {
    // 判断是否是数组
    if (!Array.isArray(arr)) {
        console.log("TypeError!!!")
        return false
    }
    let array = []
    for (let ch of arr) {
        if (!array.includes(ch)) {
            array.push(ch)
        }
    }
    return array
}

console.log(removeDuplicate(arr))
//[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}]

4、对包含 相同内容 的对象或数组的 数组去重

上面几个方法去重，传入的形参中的对象实际上是指向同一个缓存区中，存的是对象的地址，对比的也是对象的地址

如果传入了两个内容相同，但其实指向地址不同的对象，它们是无法区分的

比如： removeDuplicate( [ 3 , 3 , 'a' , 'a' , { 'b': 1 } , { 'b' : 1 }] )

传入的这个参数，得到的是 [ 3 , 'a' , { 'b': 1 } , { 'b' : 1 }]

去除内容相同的对象可以把它们反序列化成字符串，再比较

let arr = [3,3,'a','a',{'c':1},{'c':1},[1,2,3],[1,2,3]]

function removeDuplicate(arr) {
    let set = new Set()
    return arr.filter(v => {
        if (typeof v === "object" && v !== null) {
            v = JSON.stringify(v)
        }
        if (set.has(v)) return false
        set.add(v)
        return true
    })

}

console.log( removeDuplicate(arr) )

5、在原数组上进行操作

上面四个方法都是根据函数返回新的字段，那如果要改变传入的原数组

let obj = {a: 1}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',obj,obj]

function removeDuplicate(arr) {
    let set = new Set()
    for (let i = 0; i < arr.length; i++) {
        if (!set.has(arr[i])) {
            set.add(arr[i])
        } else {
            arr.splice(i, 1)
            i--
        }
    }
}

removeDuplicate(arr)
console.log( arr )
//[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}]