js数组的去重多种方案-前端开发

依稀记得年初找前端工作时候，有一次面试中对于html，css提问基本回答来了，然而碰到数组的去重问题了，由于这块没做足功课，没回答上来。具体对话如下:

• 面试官：讲一下一般前端js数组去重的方法，
• 我：一般js数组去重，有js提供的方法来去重，直接使用
• 面试官：那你讲一下具体怎么去重，
• 我：使用for循环和数组方法配合去重吧
• 面试官：那你讲一下具体实现步骤
• 我：额，这个回答我还是重复了上一句话，因为当时没思路，回答有点尴尬了…….

所以回去查了一下具体方法，一直到现在工作了一段时间了，在平常实际使用中，数组去重的使用概率还是蛮高都的，有时候经常需要对一些后台数据进行去重处理，所以我也记录一下去多种js数组去重方案，做个笔记，以后面试，防止忘记。

1，for + indexOf（）判断法

这个是一开始面试后找到的一个方法，也是相对简单数组去重了，关键点使用了indexOf()搜索数组中的元素，并返回它所在的位置。代码已做解释了如下：

//原数组 
var arr1 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
//一个新的临时数组 
var oarr1 = [];
//遍历当前数组 
for(var i = 0; i < arr1.length; i++) {
   //关键点indexOf() 判断数组中有没有字符串值，如果没有则返回 -1 
   // 如果当前数组的第i已经保存进了临时数组，那么跳过，否则把当前项push到临时数组里面 
  if(oarr1.indexOf(arr1[i]) == -1) {
     oarr1.push(arr1[i])
  }
}
document.write(oarr1+"<br />")
//原数组 
var arr1 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
//一个新的临时数组 
var oarr1 = [];
//遍历当前数组 
for(var i = 0; i < arr1.length; i++) {
   //关键点indexOf() 判断数组中有没有字符串值，如果没有则返回 -1 
   // 如果当前数组的第i已经保存进了临时数组，那么跳过，否则把当前项push到临时数组里面 
  if(oarr1.indexOf(arr1[i]) == -1) {
     oarr1.push(arr1[i])
  }
}
document.write(oarr1+"<br />")
//原数组 
var arr1 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
//一个新的临时数组 
var oarr1 = [];
//遍历当前数组 
for(var i = 0; i < arr1.length; i++) {
   //关键点indexOf() 判断数组中有没有字符串值，如果没有则返回 -1 
   // 如果当前数组的第i已经保存进了临时数组，那么跳过，否则把当前项push到临时数组里面 
	if(oarr1.indexOf(arr1[i]) == -1) {
	   oarr1.push(arr1[i])
	}
}
document.write(oarr1+"<br />")

2，filter()过滤

关键点： indexOf总是返回找到的第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

var arr2 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
var oarr2 = arr2.filter(function(v, i) {
  return arr2.indexOf(v) == i
});
document.write(oarr2+"<br />")
var arr2 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
var oarr2 = arr2.filter(function(v, i) {
  return arr2.indexOf(v) == i
});
document.write(oarr2+"<br />")
var arr2 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
var oarr2 = arr2.filter(function(v, i) {
	return arr2.indexOf(v) == i
});
document.write(oarr2+"<br />")

3，map()

Map是一组键值对的结构，具有极快的查找速度。通过指定函数处理数组每个元素，并返回处理后的数组(push)

var arr3 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
var newarr3 = [];
   arr3.map(function(v,i){
  if(arr3.indexOf(arr3[i])==i){
          newarr3.push(v);
  }
});
document.write(newarr3+"<br />");
var arr3 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
var newarr3 = [];
   arr3.map(function(v,i){
  if(arr3.indexOf(arr3[i])==i){
          newarr3.push(v);
  }
});
document.write(newarr3+"<br />");
var arr3 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
var newarr3 = [];
   arr3.map(function(v,i){
	if(arr3.indexOf(arr3[i])==i){
          newarr3.push(v);
	}
});
document.write(newarr3+"<br />");

4，Set 和 Array.from 去重法

var arr4 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
function dedupe(array) {
  // Array.from方法可以将 Set 结构转为数组。
  return Array.from(new Set(array));
}
document.write(dedupe(arr4)+"<br />");
var arr4 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
function dedupe(array) {
  // Array.from方法可以将 Set 结构转为数组。
  return Array.from(new Set(array));
}
document.write(dedupe(arr4)+"<br />");
var arr4 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
function dedupe(array) {
	// Array.from方法可以将 Set 结构转为数组。
	return Array.from(new Set(array));
}
document.write(dedupe(arr4)+"<br />");

5，splice()

splice(数组去重一个数与多个数字比)对数组进行删除、插入、替换，是最强大的数组方法。

var arr5 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
for(var i=0;i<arr5.length;i++){
  for(var j=i+1;j<arr5.length;j++){//一个数与多个数相比
    if(arr5[i]==arr5[j]){
      arr5.splice(j,1);
      j--;
    }
  }
}
document.write(arr5+"<br />")
var arr5 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
for(var i=0;i<arr5.length;i++){
  for(var j=i+1;j<arr5.length;j++){//一个数与多个数相比
    if(arr5[i]==arr5[j]){
      arr5.splice(j,1);
      j--;
    }
  }
}
document.write(arr5+"<br />")
var arr5 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
for(var i=0;i<arr5.length;i++){
	for(var j=i+1;j<arr5.length;j++){//一个数与多个数相比
		if(arr5[i]==arr5[j]){
			arr5.splice(j,1);
			j--;
		}
	}
}
document.write(arr5+"<br />")

6，push()

数组去重一一对比添加到数组末尾。

var arr = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
function abc(arr6){
  var oarr6=[];
  for(var i=0;i<arr6.length;i++){
    for(var j=0;j<arr6.length;j++){
        if(arr6[i]==oarr6[j]){
          break;}
      }
    if(arr[i]!=oarr6[j]){
        oarr6.push(arr6[i])
    }
  }return oarr6
}document.write(abc(arr)+"<br />")
var arr = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
function abc(arr6){
  var oarr6=[];
  for(var i=0;i<arr6.length;i++){
    for(var j=0;j<arr6.length;j++){
        if(arr6[i]==oarr6[j]){
          break;}
      }
    if(arr[i]!=oarr6[j]){
        oarr6.push(arr6[i])
    }

  }return oarr6
}document.write(abc(arr)+"<br />")
var arr = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
function abc(arr6){
	var oarr6=[];
	for(var i=0;i<arr6.length;i++){
		for(var j=0;j<arr6.length;j++){
				if(arr6[i]==oarr6[j]){
					break;}
			}
		if(arr[i]!=oarr6[j]){
				oarr6.push(arr6[i])
		}

	}return oarr6
}document.write(abc(arr)+"<br />")