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