数组去重的10种方式（JavaScript）

1、利用ES6 Set去重（ES6中最常用）

function unique(arr) {
    // 通过new Set进行去重操作
    return Array.from(new Set(arr))
}

// 测试
var 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,     'true',
        true,  15,
        false, undefined,
        null,  NaN,
        'NaN', 0,
        'a',   {},
        {}
    ]
*/
/* 
    注意点：
    不考虑兼容性，这种去重的方法代码最少。
    这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。
*/

2、利用for嵌套for，然后splice去重（ES5中最常用）

function unique(arr) {
    for(var i = 0; i < arr.length; i++) {
        for(var j = i+1; j < arr.length; j++) {
            // 第一个等同于第二个，splice方法删掉第二个
            if(arr[i] == arr[j]) {
                arr.splice(j, 1)
                // 保证有多个重复的元素可以全部被删除，所以下标要--
                j--
            }
        }
    }
    return arr 
}

// 测试
var 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,         'true',
        15,        false,
        undefined, NaN,
        NaN,       'NaN',
        'a',       {},
        {}
    ]
*/
// 注意点
/* 
  NaN和{}没有去重，两个null直接消失了
  双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
*/

3、利用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
}
// 测试
var 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,     'true',
        true,  15,
        false, undefined,
        null,  NaN,
        NaN,   'NaN',
        0,     'a',
        {},    {}
    ]
*/
// 注意点 NaN、{}没有去重
// 解释：
/* 
    新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，
    如果有相同的值则跳过，不相同则push进数组
*/

indexOf() 不仅可以用来判断一个字符串中是否包含某个子字符，还可以用来判断某个数组是否含有某个元素

4、利用sort()

/* 
    思路：利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。
*/
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    // 没有特别声明的话，默认是升序排列操作
    arr = arr.sort()
    var array = [arr[0]]
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] != arr[i - 1]) {
            array.push(arr[i])
        }
    }
    return array
}
// 测试
var 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))

/* 
    [
        0,    1,
        15,   NaN,
        NaN,  'NaN',
        {},   {},
        'a',  false,
        null, 'true',
        true, undefined
    ]
    注意点：NaN、{} 没有去重
*/

5、利用includes

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = []
    for (let i = 0; i < arr.length; i++) {
        // includes: 检测数组是否有某个值
        if (!array.includes(arr[i])) {
            array.push(arr[i])
        }
    }
    return array
}

// 测试
var 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,     'true',
        true,  15,
        false, undefined,
        null,  NaN,
        'NaN', 0,
        'a',   {},
        {}
    ]
    注意点：{}没有去重
*/

6、利用hasOwnProperty ***所有的都可以去重

/* 
    思路：利用hasOwnProperty 判断是否存在对象属性
*/
function unique(arr) {
    var obj = {}
    return arr.filter(function (item, index, arr) {
        // 使用typeof就可以变成唯一的了，
        /* 
            typeof 'trye' + true
                'stringtrue' // 结果
            typeof true
                'boolean' // 结果
        */
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

// 测试
var 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,     'true',
        true,  15,
        false, undefined,
        null,  NaN,
        'NaN', 0,
        'a',   {}
    ]
    注意点：所有的都去重了
*/

/*
    arr.filter(item => item % 2 == 0)
    (2) [2, 4] 

    filter过滤出来的结果是 后面的条件满足的情况
*/

7、利用filter

function unique(arr) {
    return arr.filter(function(item, index, arr) {
        // 当前元素，在原始数组中第一个索引 == 当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index 
    })
}

// 测试
var 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,     'true',
        true,  15,
        false, undefined,
        null,  'NaN',
        0,     'a',
        {},    {}
    ]
    注意点:{}消除不掉
*/

indexOf() 的参数问题

• 第一个参数是查找的内容
• 第二个参数是从第几个开始找（表示从第几个位置开始查找）

let a = 'qqqqeasdhkjlzxcvbmhuo'
console.log(a.indexOf('e',1)) // 结果是4

8、利用Map() 这种数据结构去重

function unique(arr) {
    let map = new Map()
    let array = new Array() // 数组用于返回结果
    for (let i = 0; i < arr.length; i++) {
        if (map.has(arr[i])) { // 如果有该key值
            map.set(arr[i], true)
        } else {
            map.set(arr[i], false) // 如果没有该key值
            array.push(arr[i])
        }
    }
    return array
}


// 测试
var 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,     'true',
        true,  15,
        false, undefined,
        null,  NaN,
        'NaN', 0,
        'a',   {},
        {}
    ]
    注意点：{}没有消除
*/

9、利用reduce & includes 去重

function unique(arr) {
    return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], [])
}

// 测试
var 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,     'true',
        true,  15,
        false, undefined,
        null,  NaN,
        'NaN', 0,
        'a',   {},
        {}
    ]
    注意点：{} 不能被清除
*/

扩展运算符去重

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

// 测试
var 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,     'true',
            true,  15,
            false, undefined,
            null,  NaN,
            'NaN', 0,
            'a',   {},
            {}
        ]
    注意点：和第一种方式其实是一样的，只是简写而已
*/