Web前端:js数组去重的方法-开课吧Web前端教程

Javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

在实际工作或面试中，我们经常会遇到“数组去重”问题，接下来就是使用js实现的数组去重的多种方法：

1.将数组的每一个元素依次与其他元素做比较，发现重复元素，删除

vararr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];

console.log(arr);//[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5]

functionnoRepeat1(arr){

for(vari=0;i<arr.length-1;i++){

for(varj=i+1;j<arr.length;j++){

if(arr[i]===arr[j]){

arr.splice(j,1);

j--;

}

}

}

returnarr;

}

vararr2=noRepeat1(arr);

console.log(arr2);//[1,23,3,5,6,7,9,8]

2.借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等

vararr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];

console.log(arr);//[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5]

functionnoRepeat2(arr){

for(vari=0;i<arr.length;i++){

if(arr.indexOf(arr[i])!=i){

arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移

i--;//数组下标回退

}

}

returnarr;

}

varnewArr=noRepeat2(arr);

console.log(newArr);//[1,23,3,5,6,7,9,8]

3.利用数组中的filter方法

vararr=['apple','banana','pear','apple','orange','orange'];

console.log(arr)//["apple","banana","pear","apple","orange","orange"]

varnewArr=arr.filter(function(value,index,self){

returnself.indexOf(value)===index;

});

console.log(newArr);//["apple","banana","pear","orange"]

4.借助新数组通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中

vararr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];

console.log(arr)//[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5]

functionnoRepeat4(arr){

varret=[];

for(vari=0;i<arr.length;i++){

if(arr.indexOf(arr[i])==i){

ret.push(arr[i]);

}

}

returnret;

}

vararr2=noRepeat4(arr);

console.log(arr2);//[1,23,3,5,6,7,9,8]

5.利用空对象来记录新数组中已经存储过的元素

vararr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5];

console.log(arr)//[1,23,1,1,1,3,23,5,6,7,9,9,8,5]

varobj={};

varnewArr=[];

for(vari=0;i<arr.length;i++){

if(!obj[arr[i]]){

obj[arr[i]]=true;

newArr.push(arr[i]);

}

}

console.log(newArr);//[1,23,3,5,6,7,9,8]

6.借助新数组，判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中

vararr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5];

console.log(arr);//[1,23,1,1,1,3,23,5,6,7,9,9,8,5]

functionnoRepeat6(arr){

varnewArr=[];

for(vari=0;i<arr.length;i++){

if(newArr.indexOf(arr[i])==-1){

newArr.push(arr[i]);

}

}

returnnewArr;

}

vararr2=noRepeat6(arr);

console.log(arr2);//[1,23,3,5,6,7,9,8]

7.借助新数组，判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中（原数组长度不变但被按字符串顺序排序）

vararr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5];

console.log(arr);//[1,23,1,1,1,3,23,5,6,7,9,9,8,5]

functionnoRepeat7(arr){

varret=[],

end;//临时变量用于对比重复元素

arr.sort();//将数重新组排序

end=arr[0];

ret.push(arr[0]);

for(vari=1;i<arr.length;i++){

if(arr[i]!=end){//当前元素如果和临时元素不等则将此元素添加到新数组中

ret.push(arr[i]);

end=arr[i];

}

}

returnret;

}

vararr2=noRepeat7(arr);

console.log(arr2);//[1,23,3,5,6,7,8,9]

8.此方法没有借助新数组直接改变原数组,并且去重后的数组被排序

vararr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5];

console.log(arr);//[1,23,1,1,1,3,23,5,6,7,9,9,8,5]

functionnoRepeat8(arr){

varend;//临时变量用于对比重复元素

arr.sort();//将数重新组排序

end=arr[0];

for(vari=1;i<arr.length;i++){

if(arr[i]==end){//当前元素如果和临时元素相等则将此元素从数组中删除

arr.splice(i,1);

i--;

}else{

end=arr[i];

}

}

returnarr;

}

vararr2=noRepeat8(arr);

console.log(arr2);//[1,23,3,5,6,7,8,9]

9.双层循环改变原数组

vararr=[1,1,2,2,3,3,4,4,5,5,4,3,1,2,6,6,6,6];

console.log(arr);//[1,1,2,2,3,3,4,4,5,5,4,3,1,2,6,6,6,6]

functionnoRepeat9(arr){

for(vari=0;i<arr.length;i++){

for(varj=0;j<arr.length;j++){

if(arr[i]==arr[j]&&i!=j){//将后面重复的数删掉

arr.splice(j,1);

}

}

}

returnarr;

}

vararr2=noRepeat9(arr);

console.log(arr2);//[1,2,3,4,5,6]

10.借助新数组

vararr=[1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];

console.log(arr);//[1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1]

varnewArr=[];

for(vari=0;i<arr.length;i++){

varrepArr=[];//接收重复数据后面的下标

//内层循环找出有重复数据的下标

for(varj=i+1;j<arr.length;j++){

if(arr[i]==arr[j]){

repArr.push(j);//找出后面重复数据的下标

}

}

//console.log(repArr);

if(repArr.length==0){//若重复数组没有值说明其不是重复数据

newArr.push(arr[i]);

}

}

console.log(newArr);//[5,4,3,2,1]

11.借助ES6提供的Set结构

vararr=[1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];

console.log(arr);//[1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1]

functionnoRepeat11(arr){

varnewArr=[];

varmyset=newSet(arr);//利用了Set结构不能接收重复数据的特点

for(varvalofmyset){

newArr.push(val)

}

returnnewArr;

}

vararr2=noRepeat11(arr)

console.log(arr2);//[1,2,3,4,5]

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。