js实现数组去重的5种方法

for循环

略

for循环 + indexOf / includes

  1. let arr = [1, 2, 1, 3, 2, 4, 3, 5, 4]
  3. let newArr = []
  4. for (let i = 0, l = arr.length; i < l; i++) {
  5.   if (newArr.indexOf(arr[i]) === -1) {
  6.     newArr.push(arr[i])
  7.   }
  8. }
  10. console.log(newArr)

forEach + includes / indexOf

  1. let arr = [1, 2, 1, 3, 2, 4, 3, 5, 4]
  3. let newArr = []
  4. arr.forEach(item => {
  5.   if (!newArr.includes(item)) newArr.push(item)
  6. })
  8. console.log(newArr)

基于对象处理

  1. let arr = [1, 2, 1, 3, 2, 4, 3, 5, 4]
  2. let obj = {}
  3. for (let i = 0; i < arr.length; i++) {
  4.   let item = arr[i]
  5.   // 如果对象中已经有该元素, 说明该元素是重复元素
  6.   if (obj[item] !== undefined) {
  7.     // 就把数组最后一位放在该位置, 相当于删掉了该元素
  8.     arr[i] = arr[arr.length - 1]
  9.     // 数组长度减1, 将最后一个元素去掉
  10.     arr.length--
  11.     // i减一, 保证下次循环从替换的元素开始
  12.     i--
  13.     continue
  14.   }
  15.   obj[item] = item
  16. }
  18. console.log(arr)

通过Set和拓展运算符…

  1. let arr = [1, 2, 1, 3, 2, 4, 3, 5, 4]
  2. let newArr = [...new Set(arr)]
  3. console.log(newArr)

JS实现数组去重方法总结（六种方法）

1. 双层循环，外层循环元素，内层循环时比较值

如果有相同的值则跳过，不相同则push进数组：

  1. Array.prototype.distinct = function(){
  2.  var arr = this,
  3.   result = [],
  4.   i,
  5.   j,
  6.   len = arr.length;
  7.  for(i = 0; i < len; i++){
  8.   for(j = i + 1; j < len; j++){
  9.    if(arr[i] === arr[j]){
  10.     j = ++i;
  11.    }
  12.   }
  13.   result.push(arr[i]);
  14.  }
  15.  return result;
  16. }
  17. var arra = [1,2,3,4,4,1,1,2,1,1,1];
  18. arra.distinct();    //返回[3,4,2,1]

2. 利用splice直接在原数组进行操作

双层循环，外层循环元素，内层循环时比较值
值相同时，则删去这个值
注意点：删除元素之后，需要将数组的长度也减1。

  1. Array.prototype.distinct = function (){
  2.  var arr = this,
  3.   i,
  4.   j,
  5.   len = arr.length;
  6.  for(i = 0; i < len; i++){
  7.   for(j = i + 1; j < len; j++){
  8.    if(arr[i] == arr[j]){
  9.     arr.splice(j,1);
  10.     len--;
  11.     j--;
  12.    }
  13.   }
  14.  }
  15.  return arr;
  16. };
  17. var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
  18. var b = a.distinct();
  19. console.log(b.toString()); //1,2,3,4,5,6,56

优点：简单易懂
缺点：占用内存高，速度慢

3. 利用对象的属性不能相同的特点进行去重

  1. Array.prototype.distinct = function (){
  2.  var arr = this,
  3.   i,
  4.   obj = {},
  5.   result = [],
  6.   len = arr.length;
  7.  for(i = 0; i< arr.length; i++){
  8.   if(!obj[arr[i]]){ //如果能查找到，证明数组元素重复了
  9.    obj[arr[i]] = 1;
  10.    result.push(arr[i]);
  11.   }
  12.  }
  13.  return result;
  14. };
  15. var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
  16. var b = a.distinct();
  17. console.log(b.toString()); //1,2,3,4,5,6,56

4. 数组递归去重

运用递归的思想
先排序，然后从最后开始比较，遇到相同，则删除：

  1. Array.prototype.distinct = function (){
  2.  var arr = this,
  3.   len = arr.length;
  4.  arr.sort(function(a,b){  //对数组进行排序才能方便比较
  5.   return a - b;
  6.  })
  7.  function loop(index){
  8.   if(index >= 1){
  9.    if(arr[index] === arr[index-1]){
  10.     arr.splice(index,1);
  11.    }
  12.    loop(index - 1); //递归loop函数进行去重
  13.   }
  14.  }
  15.  loop(len-1);
  16.  return arr;
  17. };
  18. var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];
  19. var b = a.distinct();
  20. console.log(b.toString());  //1,2,3,4,5,6,45,56

5. 利用indexOf以及forEach

  1. Array.prototype.distinct = function (){
  2.  var arr = this,
  3.   result = [],
  4.   len = arr.length;
  5.  arr.forEach(function(v, i ,arr){  //这里利用map，filter方法也可以实现
  6.   var bool = arr.indexOf(v,i+1);  //从传入参数的下一个索引值开始寻找是否存在重复
  7.   if(bool === -1){
  8.    result.push(v);
  9.   }
  10.  })
  11.  return result;
  12. };
  13. var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];
  14. var b = a.distinct();
  15. console.log(b.toString()); //1,23,2,3

6. 利用ES6的Set

Set数据结构，它类似于数组，其成员的值都是唯一的。
*注意S大写
利用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]

JavaScript数组去重（12种方法，史上最全）