JS给数组去重的几种方法

前言

这是个常见的问题，也经常出现在面试题中，在看到这个题目的时候，你心里是否已经有了答案，又能快速的想到哪几种方案呢，本文记录几种方法，来看看吧！

说起数组去重，正常思路来讲想到的第一个方法大都是遍历数组吧，反正我是这样，那就先来看看用遍历的方法怎么解决。

遍历数组

这是最简单易懂的方法，实现的思路：遍历传入进来的数组，再创建一个新的数组，然后判断新数组内部是否存在遍历的值，如果不存在，则push。这样最后得到的新数组就是去重过的了。其中，判断是否存在数组内的方法是 indexOf ，如果数组中没找到元素则返回 -1 。点我了解indexOf()方法 ,下面看代码实现。

function dedupe(arr){
    const list = [];  //创建一个新数组list
    for(let i of arr){  //遍历传进来的arr数组
        // console.log(i)
        if(list.indexOf(i) == -1 ){ // 判断数组list中是否存在i
            list.push(i)
        }
    }
    return list
}
//调用dedupe
const arr = [2,2,5,1,6,7,4,4,63,4,"hello",'a',2,3];
console.log(dedupe(arr));

结果如图
Loding...

注意：所有主要浏览器都支持 indexOf() 方法，但是 Internet Explorer 8 及更早IE版本不支持该方法。

先排序再作相邻比较

实现思路：先对传入的数组进行排序，如果有相同的值，那么相同的值肯定是相邻的，再创建一个新数组，这时只需遍历排序后的数组，判断新数组中新进来的值是否跟上一个相等，如果不相等则push，下面看下代码实现。

function dedupe(arr){
    arr.sort();
    const list = []; // 创建新数组list
    for(let i = 0; i < arr.length; i++){   //遍历
        if(arr[i] != list[list.length - 1]){ // 判断当前遍历的数据与上一个加入新数组的值是否相等
            list.push(arr[i])
        }
    }
    return list;
}
//调用dedupe
const arr = [2,2,5,1,6,7,4,4,63,4,"hello",'a',2,3];
console.log(dedupe(arr));

结果如图
Loding...

注意：这里的sort排序有问题，是因为sort本质上是按照字符编码的顺序进行排序的，如果想按照其他标准进行排序，需要提供比较函数，具体点我了解sort

ES6提供的Set数据结构

实现思路：ES6提供的新的的数据结构Set，和数组类似，但不同的是，Ta成员的值没有重复的，都是唯一值。所以将传进来的数组通过new的Set实例，就可以把数组里面的重复值去除，看下代码实现。

function dedupe(arr) {
    return Array.from(new Set(arr));
}
//调用dedupe
const arr = [2,2,5,1,6,7,4,4,63,4,"hello",'a',2,3];
console.log(dedupe(arr));

结果如图
Loding...

注意：这里的 Array.from() 方法可以将Set结构转为数组，点我了解Set

ES6的扩展运算符和Set结构结合

实现思路：ES6提供的扩展运算符有这么一个功能,当对一个对象执行了扩展运算符时，会将内部遍历得到的值转为一个数组，在这里相当于上一个方法中的 Array.from() 的功能，只不过这样写更简便，下面看下代码实现。

function dedupe(arr){
    return [...new Set(arr)]
}
//调用dedupe
const arr = [2,2,5,1,6,7,4,4,63,4,"hello",'a',2,3];
console.log(dedupe(arr));

结果如图
Loding...

总结

上面的方法肯定又不严谨的地方，我测试了一些数据，一般的去重应该没啥问题，推荐用ES6的方法，新旧更替嘛，况且用着简单，关于更多ES6的新特性，这里推荐 阮一峰 大神的 ECMAScript6入门 点我阅读。讲的很清晰容易理解。