JavaScript 数组去重

1.简单的循环遍历

最容易想到的方法就是for循环遍历数组，并用indexOf判断是否在数组中已经存在相同的值。

var arr=[1,2,3,"1","2",5,6,7,1,8,7];

function unique(arr){
  var res = [];
  var i=0,len=arr.length,val=0;
  for(;i<len;i++){
    val=arr[i];
    if(res.indexOf(val)<0){
      res.push(val);
    }
  }
  return res;
}

console.log(unique(arr)); // [1, 2, 3, "1", "2", 5, 6, 7, 8]

2.对象键值对法

这个方法是新建一个空对象，遍历数组中的值，如果这个值是对象的键值，就跳过，否则就给这个对象添加这个键值。该方法速度快，但是比较耗内存。

要注意的是，因为 js 对象中的键值都是 string 类型，所以判断是否为一个对象的键值时会进行 toString() 转换，如果数组中同时包含数字 1 和字符串“1”这种经过 toString() 转换后相同的，就会混淆。这里的方法是把数组中的类型也记录下来，判断时也判断一下类型是否相同。

var arr=[1,2,3,"1","2",5,6,7,1,8,7];

function unique(arr){
  var obj={},len=arr.length,i=0,res=[];
  for(;i<len;i++){
    var k=arr[i];
    var type=typeof k;
    if(!obj[k]){
      obj[k]=type;  // 把数据类型记录到对象的值中
      res.push(k);     
    }else if(obj[k].indexOf(type)<0){  // 判断是否类型也相同
      obj[k].concat(" "+type); 
      res.push(k);
    }
  }
  return res; 
}

console.log(unique(arr));  //  [1, 2, 3, "1", "2", 5, 6, 7, 8]

3.ES6 set 方法

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。所以可以利用它没有重复值这个特性来对数组去重。

var arr=[1,2,3,"1","2",5,6,7,1,8,7];

function unique(arr){
  var myset=new Set(arr);  // 用Set构造器将Array转换为Set
  var res=[...myset];  // 用...(展开操作符)操作符将Set转换为Array
  return res;
}

console.log(unique(arr));  // [1, 2, 3, "1", "2", 5, 6, 7, 8]

4.使用 filter

使用 filter去除重复元素,因为 indexOf 总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，所以可以被filter过滤掉。

var arr=[1,2,3,"1","2",5,6,7,1,8,7];

function unique(arr){
   var res = arr.filter(function (element, index, self) {
      return self.indexOf(element) === index;
    });
   return res;
}

console.log(unique(arr)); // [1, 2, 3, "1", "2", 5, 6, 7, 8]