一个系列带你搞定前端面试的手写代码环节(5) --- 数组去重

数组去重可太经典了，次次问，现在对于数组去重的考察不仅仅是写出一种了，而是写出你知道的所有方法，每种方法的优缺点。

数组去重的概念

数组去重，形如其名，把数组中重复的项去掉，应用场景非常的多。

// 来个示例数组
let arr = [1, 1, "1", "1", true, true, "true", {
    
    }, {
    
    }, "{}", null, null, undefined, undefined];

Set集合

这个方法应该是最无脑，最快速的方法了，因为Set集合的特性，它自身不允许存储重复的值，正好可以用来去重。

let unique1 = Array.from(new Set(arr));
console.log(unique1);

先把arr作为参数，传入new的Set集合内，然后利用ES6提供的Array.from再转为数组。

Map集合

Map集合虽然没有Set集合那么好用，但是可以很棒的处理数组去重问题。

let unique2 = arr => {
    
    
    let map = new Map();  // 或者用空对象 let obj = {} 利用对象属性不能重复的特性
    let brr = [];
    arr.forEach(item => {
    
    
        if(!map.has(item)) {
    
      // 如果是对象的话就判断 !obj[item]
            map.set(item, true);  // 如果是对象的话就 obj[item] = true 其他一样
            brr.push(item);
        }
    })
    return brr;
}
console.log(unique2(arr));

先声明一个Map集合，然后循环遍历需要去重的数组，map集合有一个has方法，可以判断当前集合中是否有这个项，还有一个set方法，可以给集合添加项。

在对循环数组时，如果当前数组的项，不在集合中，那么就添加到集合中，如果在的话，就不做任何处理，这样就实现了对数组的去重。

循环遍历调用API大法

传统上来说可以单纯的for循环遍历来实现数组去重，也可以用到一些API辅助完成，减少工作量，比如indexOf，这个方法的作用就是检测当前数组中是否包含你传入的这个值，如果有就返回这个值的索引，如果没有就返回 -1。还有includes，可以返回数组是否包含某个值，有就返回true，没有就返回false。

let unique3 = arr => {
    
    
    let brr = [];
    arr.forEach(item => {
    
    
        // 使用indexOf 返回数组是否包含某个值, 没有就返回 -1, 有就返回下标
        if(brr.indexOf(item) === -1) brr.push(item);
        // 或者使用 includes 返回数组是否包含某个值, 没有就返回 false, 有就返回true
        // if(!brr.includes(item)) brr.push(item);
    })
    return brr;
}
console.log(unique3(arr));

其实这种方式在本质上也是for循环遍历，但是调用ES5 ES6提供的API，可以在开发阶段比较简便的实现。

filter过滤

filter也是一个原生提供的高阶API，可以返回符合条件的集合。

let unique4 = arr => {
    
    
    // 使用filter返回符合条件的集合
    let brr = arr.filter((item, index) => {
    
    
        return arr.indexOf(item) === index;
    })
    return brr;
}
console.log(unique4(arr));

数组去重的方法可以大概的分为三类
Set集合、Map集合、循环遍历
循环遍历的方法有很多，可以使用最基本的for循环加判断语句来实现，也可以实现一些高阶的API来实现。

QQ:505417246
微信:18331092918
微信公众号:Code程序人生
个人博客:http://rayblog.ltd