前端最全数组去重，面试必备

今天给大家带来的是数组的去重

在面试的过程中这个问题是必问的内容

但是在实际的开发中已经不用手写了，只需要调一下方法就可以

那么为什么今天还要来说

主要也是为了面试，其实是对知识的回顾

废话不多说，进入正题吧

第一种数组去重的方法：这种方法是先拿出一个数组的值与其前面的那个值做比较，如果前面有这个值就删掉，如果没有则进行下一个的循环，这种写法可以实现数组的遍历，但是要写两个循环，就性能上来说肯定是很低

<script type="text/javascript">
 var arr=[];
	var a=arr;
	for(var i=0;i<10;i++){
 var arr1=Math.floor(Math.random()*10); 
 arr.push(arr1);//这样生成的数组难免会出现重复的项 
 } 
 console.log(a);/* 第一种数组去重的方法 */
 for(var i=0,len=arr.length;i<len;i++){
 for(var k=0;k<i;k++){
 if(arr[i]===arr[k]){ 
 arr.splice(i,1); 
 i--; 
 } 
 } 
 }
console.log(arr);
</script>

结果是：

第二种数组去重的方法：这种方法的实现是第一种的实现机制，只不过在查找的时候是没取出一个，分别与其后面的每一项进行查找

<script type="text/javascript">
 var arr=[];
for(var i=0;i<10;i++)
{var arr1=Math.floor(Math.random()*10); 
 arr.push(arr1);//这样生成的数组难免会出现重复的项 
}
console.log(arr); 
/* 第二种数组去重的方法 */
for(var i=0,len=arr.length;i<len;i++){
 for(var k=i+1;k<arr.length;k++){
 if(arr[i]===arr[k]){ 
 arr.splice(i,1); 
 i--; 
 } 
 } 
}
console.log(arr);

结果是：

第三种数组去重的方法：这种利用的原理是和第二种一样的查找方法，但是这种方法不是找到之后删除而是跳过这个值，上面的这三种方法其实都是差不多的，在ES3中经常使用，现在几乎不怎么用了，也就面试的时候会被问到

<script type="text/javascript"> 
 var arr=[];for(var i=0;i<10;i++){
 var arr1=Math.floor(Math.random()*10); 
 arr.push(arr1);//这样生成的数组难免会出现重复的项 
 }
console.log(arr); 
/* 第三种数组去重的方法 */
var arr2=[];
for(var i=0,len=arr.length;i<len;i++){
 for(var k=i+1,ken1=arr.length;i<len;k++){
 if(arr[i]===arr[k]){ 
 k=++i;//这种方式是如果相等的话直接跳过这个值 
 } 
 } 
 arr2.push(arr[i]) 
}
console.log(arr2);

结果是：

第四种数组去重的方法：上面的三种方法都是看原数组，但是这种方法不是看原数组，而是看去重的之后的数组，利用indexof()这个方法进行判断，将循环改成了一个，从性能来说是提高了性能

<script type="text/javascript">
 var arr=[];for(var i=0;i<10;i++){
 var arr1=Math.floor(Math.random()*10);
 arr.push(arr1);//这样生成的数组难免会出现重复的项 
 }console.log(arr); 
/* 第四种数组去重的方法 */
var arr2=[];
for(var i=0,len=arr.length;i<len;i++){
 if(arr2.indexOf(arr[i])===-1){ 
 arr2.push(arr[i]); 
 } 
}
console.log(arr2)
</script>

结果是：

第五种数组去重的方法；这里使用了箭头函数的概念，传入的参数第一个是数组的每一项，第二个参数是数组的索引值，其实就是判断传入的值用Indexof判断之后是否等于数组的索引值，归根到底就是借用了indexof()方法在传入一个参数的时候不管有多少个值只返回第一个的值的原理

<script type="text/javascript">
 var arr=[]
;for(var i=0;i<10;i++){
 var arr1=Math.floor(Math.random()*10);
 arr.push(arr1);//这样生成的数组难免会出现重复的项 
}console.log(arr);
/* 第五种数组去重的方法 ，这里使用了箭头函数*/
var arr2=arr.filter((item,index)=>{return arr.indexOf(item)===index});
console.log(arr2);/* 不适用箭头函数还可以这样写 *
/var arr3=arr.filter(function (item,index){
	return arr.indexOf(item)===index; });
 console.log(arr3);
</script>

结果是：

第六种数组去重的方法：这里利用的是对象的属性不能重复的原理，每遍历一个给他设置一个true的值，这个值就只能出现一次

<script type="text/javascript">
 var arr=[];for(var i=0;i<10;i++){
 var arr1=Math.floor(Math.random()*10); 
 arr.push(arr1);//这样生成的数组难免会出现重复的项 
 }
/* 数组的第六种去重的方法 */
console.log(arr);
var obj={};
var arr2=[];
for(var i=0,len=arr.length;i<len;i++){
 if(!obj[arr[i]]){ 
 arr2.push(arr[i]); 
 obj[arr[i]]=true; 
 } 
} 
console.log(arr2);
console.log(obj);
</script>

结果是：

第七种数组去重的方法：前面的几种都是ES5或者是ES3中的方法，后面的这几种是ES6中的方法，借助set方法实现

<script type="text/javascript">
 var arr=[];
for(var i=0;i<10;i++){
 var arr1=Math.floor(Math.random()*10); 
 arr.push(arr1);//这样生成的数组难免会出现重复的项 
}
console.log(arr);
/* 数组的第七种去重的方法 */
var arr1=Array.from(new Set(arr));console.log(arr1)
</script>

结果是：

最后一种数组的去重方法：同样也是借助set方法，这种方法是这几种方法里面最简单的一种了，只需要一行代码就可以搞定，但是必须得是你的浏览器支持ES6

<script type="text/javascript">
 var arr=[];
for(var i=0;i<10;i++){
 var arr1=Math.floor(Math.random()*10); 
 arr.push(arr1);
 //这样生成的数组难免会出现重复的项 
}console.log(arr);
/* 数组的第七种去重的方法 */
console.log([...new Set(arr)]);
</script>

结果是：

以上是数组的八种去重的方法，每一个都有他的优点，不知道平时你用的是哪一种，或者你更喜欢用哪一种，可能数组去重还会有其他的方法，但是那些方法都是围绕这些写的，本质上没有很大的区别