JS实用功能-9、面试中常遇见的数组去重

JS数组去重是面试中并不少见的问题，听起来很简单，当你兴高采烈地回答了你的方法之后，你以为这道题就结束了吗？No，一般来说，面试官会继续问你“除了你刚刚说的方法，还有其他更好的方法吗？”，这时的你就需要了解多几种JS数组去重的方法了。

下面我们先来看看常见的去重方法先吧。

 一、双重for循环

拿前一个数据和后面的数据做对比，与后面相同的就删除。

//方法1
const unique = arr => {
  if(!(arr instanceof Array) || arr.length == 0){
    console.log('数组数据异常');
    return;
  }
  for(let i = 0; i < arr.length; i++){
    for(let j = i+1; j < arr.length; j++){
      if(arr[i] === arr[j]){
        arr.splice(j,1); //删除重复数据
        j--;
      }
    }
  }
  return arr;
}

测试数据：

let arr = [1,1,false,false,true,true,null,null,undefined,undefined,NaN,NaN,{},{},'a','a'];

测试结果：

 在结果中可以看出，部分相同的数据都已经被去掉了，但是true、NaN、{}这三个是没有去除的。应该是“==”判断的问题。

可以来看看NaN的情况：

 两个NaN对比，居然是个false，难怪没有去重成功。其他应该也是相对如此的，那么这种去重方法还是存在不足的。

二、单个for循环和indexOf

遍历原数组，将每个元素插入到新数组中。插入前先判断新数组中是否存在改元素。利用数组的indexOf方法来查重，有就返回元素在数组中的下标，不存在就返回-1.

const unique = arr => {
　.....
  let arr1 = [];// 新建一个数组来存放arr中的元素
  for(let i = 0; i < arr.length; i++){
      if(arr1.indexOf(arr[i]) == -1){
          arr1.push(arr[i]);
      }
  }
  return arr1;
}

测试数据：

let arr = [1,1,false,false,true,true,null,null,undefined,undefined,NaN,NaN,{},{},'a','a'];

输出结果：

 看来这个对true去重有作用了呀，但是NaN、{}还是不起作用。

三、单个for循环和includes

这个跟第二个差不多，不同的是重复判断用的是数组的includes方法，它返回是Boolean类型，如果包含某个元素就返回true，反正false。

const unique = arr => {
  .....
  let arr1 = [];// 新建一个数组来存放arr中的元素
  for(let i = 0; i < arr.length; i++){
      if(!arr1.includes(arr[i])){
          arr1.push(arr[i]);
      }
  }
  return arr1;
}

测试数据：

let arr = [1,1,false,false,true,true,null,null,undefined,undefined,NaN,NaN,{},{},'a','a'];

输出结果：

  这次比前两次好了很多，能判断NaN了。

四、单个for循环和sort

先用sort方法对数组进行排序，然后对比相邻两个元素是否相等，做去重处理。

const unique = arr => {
　.....
  arr = arr.sort();
  let arr1 = [arr[0]];
  for(let i = 1;i < arr.length;i++){
      if(arr[i] !== arr[i-1]){
          arr1.push(arr[i]);
      }
  }
  return arr1;
}

测试数据：

let arr = [1,1,false,false,true,true,null,null,undefined,undefined,NaN,NaN,{},{},'a','a'];

测试结果：

 效果还是很好的嘛。

五、ES6的Set集合

Set集合作为ES6新加入的数据结构，存储类似于数组，但是里面的元素是不能重复的。我们可以先将数组转成Set集合，去重之后，再转为数组输出。

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

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组，不过它也是ES6的新特性。

测试数据：

let arr = [1,1,false,false,true,true,null,null,undefined,undefined,NaN,NaN,{},{},'a','a'];

测试结果：

 看来效果还是很不错的啊，除了 {} 不能去重外，其他都完成了。

六、数组的filter函数

filter()会创建一个新数组，循环对数组中的元素调用callback函数， 如果返回true 保留，如果返回false 过滤掉,  返回新数组，老数组不变。

const unique = arr => {
  return arr.filter((item,index) => {
    return arr.indexOf(item) === index;
  });
}

测数据：

let arr = [1,1,false,false,true,true,null,null,undefined,undefined,NaN,NaN,{},{},'a','a'];

测试结果：

 这个方法也是除了 {} 无法去重外，其他都可以成功了。

七、ES6的Map对象

Map作为ES6的一种新型数据结构，类似json，用键值对方式存储数据。Map中有has()方法，返回一个Boolean类型，来表明Map中是否存在指定元素。

const unique = arr => {
  .....
  let map = new Map();
  let arr1 = []
  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);
          arr1.push(arr[i]);
      }
  }
  return arr1;
}

测试数据：

let arr = [1,1,false,false,true,true,null,null,undefined,undefined,NaN,NaN,{},{},'a','a'];

测试结果：

 也是除了{}去不了重之外，其他都正常。

八、递归

这种方法其实跟第一种方法差不多，通过循环判断前一个元素和后面元素是否相同来查重。不过要求掌握递归算法的。

const unique = arr => {
  let arr1 = arr;
  let len = arr1.length;
  function loop(index){
    if(index >= 1){
      if(arr1[index] === arr1[index-1] ){
          arr1.splice(index,1);
      }
      loop(index - 1);  // 递归loop，然后数组去重
    }
  }
  loop(len-1);
  return arr1;
}

测试数据：

let arr = [1,1,false,false,true,true,null,null,undefined,undefined,NaN,NaN,{},{},'a','a'];

测试结果：

 处理NaN和{}无法去重外，其他都没问题。

上面的方法都能解决日常开发中的大部分去重问题，但都不能解决 {} 去重问题，难道就真的没办法了吗？

对象是永不相等的，在用 === 号的情况下，因为它们属于引用类型，在三等符号的情况下判断是内存地址了，当且仅当它们引用同一个基对象时，它们才相等。

九、Map和Set对JSON数组去重

其实可以将对象转换成字符串，然后让字符串对比，就可以做到去重的效果。

const unique = arr => {
  const map = new Map()
  return arr.filter( item => !map.has(JSON.stringify(item)) && map.set(JSON.stringify(item), 1));
}

测试数据1：

let json = [{},{}];

测试结果1：

 测试数据2：

let json2 = [{a: 1, b: 2}, {a: 1, b: 2}];

测试结果2：

 通过上面的方法也就很好的解决了 对象 相等的问题，其实知道原理之后，用for循环也是可以解决的，但是，最近在学ES6，顺便装一下13。

上面就是这篇的全部内容了。