JS数组去重的几种常见方法

一、简单的去重方法
 

1. // 最简单数组去重法  
2. /* 
3. * 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中 
4. * IE8以下不支持数组的indexOf方法 
5. * */  
6. function uniq(array){  
7.     var temp = []; //一个新的临时数组  
8.     for(var i = 0; i < array.length; i++){  
9.         if(temp.indexOf(array[i]) == -1){  
10.             temp.push(array[i]);  
11.         }  
12.     }  
13.     return temp;  
14. }  
15.   
16. var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];  
17. console.log(uniq(aa));  

二、对象键值法去重
 

1. /* 
2. * 速度最快， 占空间最多（空间换时间） 
3. * 
4. * 该方法执行的速度比其他任何方法都快， 就是占用的内存大一些。 
5. * 现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键， 
6. * 不是的话给对象新增该键并放入新数组。 
7. * 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”， 
8. * 不同的键可能会被误认为一样，例如n[val]-- n[1]、n["1"]； 
9. * 解决上述问题还是得调用“indexOf”。*/  
10. function uniq(array){  
11.     var temp = {}, r = [], len = array.length, val, type;  
12.     for (var i = 0; i < len; i++) {  
13.         val = array[i];  
14.         type = typeof val;  
15.         if (!temp[val]) {  
16.             temp[val] = [type];  
17.             r.push(val);  
18.         } else if (temp[val].indexOf(type) < 0) {  
19.             temp[val].push(type);  
20.             r.push(val);  
21.         }  
22.     }  
23.     return r;  
24. }  
25.   
26. var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];  
27. console.log(uniq(aa));  

三、排序后相邻去除法
 

1. /* 
2. * 给传入数组排序，排序后相同值相邻， 
3. * 然后遍历时,新数组只加入不与前一值重复的值。 
4. * 会打乱原来数组的顺序 
5. * */  
6. function uniq(array){  
7.     array.sort();  
8.     var temp=[array[0]];  
9.     for(var i = 1; i < array.length; i++){  
10.         if( array[i] !== temp[temp.length-1]){  
11.             temp.push(array[i]);  
12.         }  
13.     }  
14.     return temp;  
15. }  
16.   
17. var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];  
18. console.log(uniq(aa));  

四、数组下标法
 

1. /* 
2. * 
3. * 还是得调用“indexOf”性能跟方法1差不多， 
4. * 实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i， 
5. * 那么表示第i项是重复的，忽略掉。否则存入结果数组。 
6. * */  
7. function uniq(array){  
8.     var temp = [];  
9.     for(var i = 0; i < array.length; i++) {  
10.         //如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的  
11.         if(array.indexOf(array[i]) == i){  
12.             temp.push(array[i])  
13.         }  
14.     }  
15.     return temp;  
16. }  
17.   
18. var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];  
19. console.log(uniq(aa));  

五、优化遍历数组法
 

1. // 思路：获取没重复的最右一值放入新数组  
2. /* 
3. * 推荐的方法 
4. * 
5. * 方法的实现代码相当酷炫， 
6. * 实现思路：获取没重复的最右一值放入新数组。 
7. * （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/  
8. function uniq(array){  
9.     var temp = [];  
10.     var index = [];  
11.     var l = array.length;  
12.     for(var i = 0; i < l; i++) {  
13.         for(var j = i + 1; j < l; j++){  
14.             if (array[i] === array[j]){  
15.                 i++;  
16.                 j = i;  
17.             }  
18.         }  
19.         temp.push(array[i]);  
20.         index.push(i);  
21.     }  
22.     console.log(index);  
23.     return temp;  
24. }  
25.   
26. var aa = [1,2,2,3,5,3,6,5];  
27. console.log(uniq(aa)); 

六、利用ES6的set

Set数据结构，它类似于数组，其成员的值都是唯一的。

利用Array.from将Set结构转换成数组

1. function dedupe(array){  
2.  return Array.from(new Set(array));  
3. }  
4. dedupe([1,1,2,3]) //[1,2,3]  

拓展运算符(...)内部使用for...of循环

1. let arr = [1,2,3,3];  
2. let resultarr = [...new Set(arr)];   
3. console.log(resultarr); //[1,2,3]  

合并数组并去重的方法

一、concat()方法

思路：concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。该方法会产生一个新的数组。
 

• function concatArr(arr1, arr2){  
•   var arr = arr1.concat(arr2);  
•   arr = unique1(arr);//再引用上面的任意一个去重方法  
•   return arr;  
• }  

二、Array.prototype.push.apply()
思路：该方法优点是不会产生一个新的数组。

1. var a = [1, 2, 3];  
2. var b = [4, 5, 6];  
3. Array.prototype.push.apply(a, b);//a=[1,2,3,4,5,6]  
4. //等效于:a.push.apply(a, b);  
5. //也等效于[].push.apply(a, b);   
6. function concatArray(arr1,arr2){  
7.   Array.prototype.push.apply(arr1, arr2);  
8.   arr1 = unique1(arr1);  
9.   return arr1;  
10. }