史上最全JavaScript数组去重的十种方法（推荐）

一、前言：

我们在实际工作中，或者在面试找工作时，都会用到或者被问到一个问题，那就是“数组如何去重”。是的，这个问题有很多种解决方案，看看下面的十种方式吧！

二、数组去重方式大汇总：

Methods 1

: 思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。

方法一---------------');

console.log(unique([1,1,2,3,5,6,7,4]));

Methods 2:

思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。

console.log('------------方法二---------------');

console.log(unique2([1,4]));

Methods 3

: 利用对象属性存在的特性，如果没有该属性则存入新数组。

console.log('------------方法三---------------');

console.log(unique3([1,4]));

Methods 4:

利用数组的indexOf下标属性来查询。

console.log('------------方法四---------------');

console.log(unique4([1,4]));

Methods 5

: 利用数组原型对象上的includes方法。

for(var i=0; i<arr.length; i++){
if( !res.includes(arr[i]) ){ // 如果res新数组包含当前循环item
res.push(arr[i]);
}
}
return res;
}

console.log('------------方法五---------------');

console.log(unique5([1,4]));

Methods 6

: 利用数组原型对象上的 filter 和 includes方法。

res = arr.filter(function(item){
return res.includes(item) ? '' : res.push(item);
});
return res;
}

console.log('------------方法六---------------');

console.log(unique6([1,4]));

Methods 7

: 利用数组原型对象上的 forEach 和 includes方法。

arr.forEach(function(item){
res.includes(item) ? '' : res.push(item);
});
return res;
}

console.log('------------方法七---------------');

console.log(unique7([1,4]));

Methods 8

: 利用数组原型对象上的 splice 方法。

console.log('------------方法八---------------');

console.log(unique8([1,4]));

Methods 9

: 利用数组原型对象上的 lastIndexOf 方法。

console.log('------------方法九---------------');

console.log(unique9([1,4]));

Methods 10

: 利用 ES6的set 方法。

console.log('------------方法十---------------');

console.log(unique10([1,4]));

三、其他：

有意思的是，当我把数组的长度变得很大的时候（如下所示），测试了一下不同方法的执行时间长短，会发现方法三、四、五、六、七相对来说会更有优势，而方法八的执行速度似乎一直垫底。你也可以在你本地跑一下试试！

//测试用的超大数组 var arr = [1,4,6];

//这里只是举例方法三（如果你把所有方法放在一起测试，会更直观的看到执行时间的差异）

<div class="jb51code">
<pre class="brush:js;">
var time3 = new Date().getTime();
function unique3(arr){
var res = [];
var obj = {};
for(var i=0; i<arr.length; i++){
if( !obj[arr[i]] ){
obj[arr[i]] = 1;
res.push(arr[i]);
}
}
return res;
}