使用JavaScript实现数组去重的四种方式思考

  • 使用indexOf()方法
1
2
3
4
5
6
7
8
9
Array.prototype.dupDect1=function(){
var res=[];//结果数组
for(var i=0;i<this.length;i++){
if(!res.indexOf(this[i])){
res.push(this[i]);
}
}
return res;
};

这种方式通过使用indexOf()方法遍历结果数组中是否已经添加了该元素,如果没有添加的话就加入到结果数组中。缺点:大数据量的时候,容易导致效率低。

  • 使用indexOf()方法,判断索引与该数组值的首次出现位置
1
2
3
4
5
6
7
8
9
Array.prototype.dupDect2=function(){
var res=[this[0]];
for(var i=1;i<this.length;i++){
if(this.indexOf(this[i])==i){
res.push(this[i]);
}
}
return res;
};

这种方式通过判断元素在数组中首次出现的位置判断是否是重复元素。
缺点:同样是使用indexOf来遍历数组,当大数据量时会效率低。

  • 使用一个对象来保存是否已经添加过
1
2
3
4
5
6
7
8
9
10
Array.prototype.dupDect3=function(){
var dup={},res=[];
for(var i=0;i<this.length;i++){
if(!dup[this[i]]){
dup[this[i]]=true;
res.push(this[i]);
}
}
return res;
};

这种方式通过键值的方式判断是否已经添加过,效率比较高。

  • 使用排序,然后判断当前元素与结果数组的最后一个元素是否重复
1
2
3
4
5
6
7
8
9
10
Array.prototype.dupDect4=function(){
this.sort();
var res=[this[0]];
for(var i=1;i<this.length;i++){
if(this[i]!=res[res.length-1]){
res.push(this[i]);
}
}
return res;
};

这种方式使用了数组的内置排序方法,效率相对前两种使用indexOf()方法的去重较高。
综述:以上四种数组去重的方法,第三种使用对象保存元素是否已经添加过的办法相对效率较高,推荐使用,但是第三种方法需保证数组中是同一类型的元素,否则当数组中出现 2和‘2’的时候导致只有一个能添加到结果数组。

  • 使用ES6的Set结构实现数组去重
1
2
3
function depDect5(arr){
return Array.from(new Set(arr));
}

这种方式利用了ES6种Set数据结构的特性实现数组去重。在ES6中,Set结构的成员必须是唯一的,其可以接受一个数组或者类数组对象作为参数,用来初始化。使用Array.from()函数可以将Set结构重新转换为数组。