【JS】数组去重的几种方式

数组去重的方法有很多，接下来，讲几种常见的方式：

一、includes方法 + for循环

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false.

const array = [1,2,3,2,4,6,3,1, undefined, NaN, 'NAN', null, true, 'true', false, 'false', NaN, undefined];

const unique = (arr) => {
    // 判断是不是数组
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        // 判断newArr里是否包含arr[i]字段
        if (!newArr.includes(arr[i])) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

unique(array);
// [1, 2, 3, 4, 6, undefined, NaN, 'NAN', null, true, 'true', false, 'false']

原理很简单，主要是两步：

1. 判断是不是数组，不是数组，直接返回；如果是数组，进入下一步；
2. 遍历传进来的数组，newArr里如果不包括该字段，将该字段添加到newArr里，最后返回newArr。

另外，使用indexOf也是可以的，这里就不多说了。

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

二、Map结构 + for循环

关于Map的has、set用法，之前有写过一篇文章，可以移步参考一下Map数据结构。

这个方法和上面的includes类似。

const array = [1,2,3,2,4,6,3,1, undefined, NaN, 'NAN', null, true, 'true', false, 'false', NaN, undefined];

const unique = (arr) => {
    let map = new Map();
    let newArr = new Array(); 
    for (let i = 0; i < arr.length; i++) {
        // 判断是否已存在arr[i]
        if(!map.has(arr[i])) {  
            map.set(arr[i], true); 
            newArr.push(arr[i]);
        }
    } 
    return newArr ;
}

unique(array);
// [1, 2, 3, 4, 6, undefined, NaN, 'NAN', null, true, 'true', false, 'false']

三、Array.from + set

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

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

const array = [1,2,3,2,4,6,3,1, undefined, NaN, 'NAN', null, true, 'true', false, 'false', NaN, undefined];

const unique = (arr) => {
    return Array.from(new Set(arr));
}

unique(array);
// [1, 2, 3, 4, 6, undefined, NaN, 'NAN', null, true, 'true', false, 'false']

在这里，Set是一个类数组，而Array.from在这里的目的就是将它转换成数组 。

 四、扩展运算符 + set

const array = [1,2,3,2,4,6,3,1, undefined, NaN, 'NAN', null, true, 'true', false, 'false', NaN, undefined, {}, {}];

const unique = (arr) => {
    return [...new Set(arr)];
}

unique(array);
// [1, 2, 3, 4, 6, undefined, NaN, 'NAN', null, true, 'true', false, 'false']

 其实和第三种方法类似，扩展运算符在这里的目的也只是将类数组转换成数组。

值得注意的是，上述方法对于引用类型并不适用，比如对象，上面的方法是没有做到去重的。

简单来说，数组去重主要就是两种思路：

1、双重循环（诸如：includes、indexOf）

2、方法自身键的不可重复性（诸如：Set、Map）

当然，方法有很多，这里说的也只是比较常见的几种。

如果有什么不对的地方或者其他方法，欢迎大家评论区补充与分享哦！