前言
在前端开发的时候，对于数据处理是很重要的一块，尤其是要根据实际的业务需求来处理数据，有很强的兼容性要求。而且有些时候后端提供的数据和实际的业务需求数据是有偏差的，所以前端在拿到后台返回的数据之后，需要对数据进行“二次加工”处理，从而来满足业务需求。那么本篇文章就来分享一下在处理数据时候比较重要的一种方式：JavaScript中对数组进行合并之后的去重操作，这是一个比较常见的操作，分享出来，提供查阅使用。
JavaScript中数组去重
在JavaScript中对数组进行去重操作有好几种方法，而且也是比较常见的操作方式，通过梳理之后可以总结如下几种对数组进行去重的方法，如有不完善的地方，欢迎指正批评。
一、通过使用双重for循环结合splice方法来去重
通过使用双重for循环结合数组的splice方法来实现数组去重，这是一种比较常用的方法，尤其是在ES6出现之前该方式比较常用，具体示例如下所示：
示例数组：
vararray=[1,2,3,4,5,5,4,3,2,1];
处理方法：
functionrepeat(array){for(vari=0,leng=array.length;ileng;i++){for(varj=i+1,leng=array.length;jleng;j++){if(array===array[j]){array.splice(j,1);j--;//每删除一个数，j的值就减去1leng—;//j值减小时，len也要对应减去1（目的就是减少循环的次数，节省程序性能）}}}returnarray;}console.log(repeat(array));//数组输出结果：[1,2,3,4,5]
二、通过使用ES6中的Set方法来去重
该方法适用于ES6，因为ES6中才有Set方法，通过使用Set方法可以进行数组去重问题，而且Set可以允许存储任何类型（初原始值或者引用的值）的唯一值。具体示例如下所示：
示例数组：
letarray=[1,2,3,4,5,5,4,3,2,1];
处理方法：
functionrepeat(array){returnArray.from(newSet(array));}console.log(repeat(array));//数组输出结果：[1,2,3,4,5]
三、通过使用ES6中的Map方法来去重
ES6中通过使用Map方法来去重，该方法适用于ES6中的数组去重。主要是通过创建一个空Map数据结构，然后遍历需要去重的数组，最后把数组的每一个元素作为key存到Map中，由于Map中不会出现相同的key，所以最后得到的结果就是数组去重后的所有元素。
示例数组：
letarray=[1,2,3,4,5,5,4,3,2,1];
处理方法：
functionrepeat(array){letmap=newMap();letarray1=[];//数组用于返回结果for(leti=0,leng=array.length;ileng;i++){if(map.has(array)){//判断是否存在keymap.set(array,true);}else{map.set(array,false);array1.push(array);}}returnarray1;}console.log(repeat(array));//数组输出结果：[1,2,3,4,5]
四、通过JavaScript中数组的indexOf方法来去重
在JavaScript中，数组的indexOf方法可以作去重处理，函数是array.indexOf(item,statt)，通过返回数组中某个指定的元素位置，如果没有则返回-1。具体的示例如下所示：
示例数组：
vararray=[1,2,3,4,5,5,4,3,2,1];
处理方法：
functionrepeat(array){vararray1=[];//新建数组用来存array的值for(vari=0,leng=array.length;ileng;i++){if(array1.indexOf(array)===-1){array1.push(array);}}returnarray1;}console.log(unique(array));//数组输出结果：[1,2,3,4,5]
五、通过JavaScript中数组的sort方法来去重
通过JavaScript中数组的sort方法来去重，操作原理就是根据相邻元素对比法来进行去重操作，函数array.sort(function)的参数必须是函数，是可选的，默认为升序。具体示例如下所示：
示例数组：
vararray=[1,2,3,4,5,5,4,3,2,1];
处理方法：
functionrepeat(array){array=array.sort();console.log(array);vararray1=[array[0]];for(vari=1,leng=array.length;ileng;i++){if(array!==array[i-1]){array1.push(array);}}returnarray1;}console.log(repeat(array));//数组输出结果：[1,2,3,4,5]
六、通过JavaScript中对象的属性不能相同的特点来去重
在JavaScript中对象的属性不能相同，通过用数组项作为一个对象的属性，会自动去除相同的值，实现数组去重效果，但是这个方法有缺陷，不建议使用，仅做了解即可。具体示例如下所示：
示例数组：
vararray=[1,2,3,4,5,5,4,3,2,1];
处理方法：
functionrepeat(array){vararray1=[];varobj={};for(vari=0,leng=array.length;ileng;i++){if(!obj[array]){array1.push(array);obj[array]=1;}else{obj[array]++;}}returnarray1;}console.log(repeat(array));//数组输出结果：[1,2,3,4,5]
七、通过JavaScript中数组的includes来去重
通过JavaScript中数组的includes来去重，函数array.includes(指定元素(必填),指定索引值(可选,默认值为0))，如果有值就返回true，没有值则返回false。具体示例如下所示：
示例数组：
vararray=[1,2,3,4,5,5,4,3,2,1];
处理方法：
functionrepeat(array){vararray1=[];for(vari=0,leng=array.length;ileng;i++){if(!array1.includes(array)){//检索array1中是否含有array中的值array1.push(array);}}returnarray1;}console.log(repeat(array));//数组输出结果：[1,2,3,4,5]
八、通过JavaScript中数组的filter方法来去重
通过JavaScript中数组的filter方法去重，用filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，函数array.filter(function(currentValue,index,arr),thisValue)，其中currentValue：当前元素的值(必选参数)、index：当前元素的索引值(可选)、arr：当前元素属于的数组对象(可选)、thisValue：对象作为该执行回调时使用，传递给函数，用作"this"的值，默认undefined(可选)。（上述内容摘自菜鸟教程官方解释）
示例数组：
vararray=[1,2,3,4,5,5,4,3,2,1];
操作原理
原始数组：[1,2,3,4,5,5,4,3,2,1];
索引值：0,1,2,3,4,5,6,7,8,9,
伪新数组：[1,2,3,4,5,5,4,3,2,1];
使用indexOf方法找到数组中的元素在元素中首次出现的索引值。
索引值：0,1,2,3,4,5,6,7,8,9,
最后返回前后索引值相同的元素：新数组：[1,2,3,4,5]。
处理方法：
functionrepeat(array){//如果新数组的当前元素的索引值==该元素在原始数组中的第一个索引，则返回当前元素returnarray.filter(function(item,index){returnarray.indexOf(item,0)===index;});}console.log(repeat(array));//数组输出结果：[1,2,3,4,5]
九、通过JavaScript中函数递归来去重
通过JavaScript中的函数递归来进行去重操作，运用递归的思想，先排序，然后从最后开始进行比较，遇到相同，就删除，这样也可以实现数组去重操作。具体示例如下所示：
示例数组：
vararray=[1,2,3,4,5,5,4,3,2,1];
处理方法：
functionrepeat(array){vararray1=array;varleng=array1.length;arr1.sort((a,b)={returna-b;});functionloop(index){if(index=1){if(array1[index]===array1[index-1]){array1.splice(index,1);}loop(index-1);//使用递归loop，然后进行数组去重}}loop(leng-1);returnarray1;}console.log(repeat(array));//数组输出结果：[1,2,3,4,5]
附：实用案例
实际开发遇到的场景，先合并两个数组，然后再对合并后的数组进行去重操作，具体示例如下所示：
文章来源：程序猿by三掌柜