技术实践第八期｜前端开发：JavaScript中数组去重的方法汇总
官方小二*更新于2022-3-10*
亲爱的开发者们，
大家好，本期技术实践内容由友盟+社区KOL为大家奉上实用的干货总结：JavaScript中数组去重的方法汇总。希望可以帮助到更多的开发者在实际工作中解决相关的问题。
🥳开发者们如果有想要探讨的或遇到过的技术问题，欢迎留言告诉我们！
*作者：三掌柜*
前言
在前端开发的时候，对于数据处理是很重要的一块，尤其是要根据实际的业务需求来处理数据，有很强的兼容性要求。而且有些时候后端提供的数据和实际的业务需求数据是有偏差的，所以前端在拿到后台返回的数据之后，需要对数据进行“二次加工”处理，从而来满足业务需求。那么本篇文章就来分享一下在处理数据时候比较重要的一种方式：JavaScript中对数组进行合并之后的去重操作，这是一个比较常见的操作，分享出来，提供查阅使用。
JavaScript中数组去重
在JavaScript中对数组进行去重操作有好几种方法，而且也是比较常见的操作方式，通过梳理之后可以总结如下几种对数组进行去重的方法，如有不完善的地方，欢迎指正批评。
一、通过使用双重for循环结合splice方法来去重
通过使用双重for循环结合数组的splice方法来实现数组去重，这是一种比较常用的方法，尤其是在ES6出现之前该方式比较常用，具体示例如下所示：
示例数组：
vararray = [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。具体的示例如下所示：
示例数组：
vararray = [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 ) 的参数必须是函数，是可选的，默认为升序。具体示例如下所示：
示例数组：
vararray = [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中对象的属性不能相同，通过用数组项作为一个对象的属性，会自动去除相同的值，实现数组去重效果，但是这个方法有缺陷，不建议使用，仅做了解即可。具体示例如下所示：
示例数组：
vararray = [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。具体示例如下所示：
示例数组：
vararray = [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(可选)。（上述内容摘自菜鸟教程官方解释）
示例数组：
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]。
处理方法：
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中的函数递归来进行去重操作，运用递归的思想，先排序，然后从最后开始进行比较，遇到相同，就删除，这样也可以实现数组去重操作。具体示例如下所示：
示例数组：
vararray = [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]附：实用案例
实际开发遇到的场景，先合并两个数组，然后再对合并后的数组进行去重操作，具体示例如下所示：
最后
通过上面介绍的关于JavaScript中数组去重的使用汇总，在Vue.js开发中的使用就游刃有余了，这也是在开发过程中必用的功能。
「往期干货回顾👉」：