javascript数组去掉重复


Posted in Javascript onMay 12, 2011

总得来说面试的过程还是收获了不少,主要是认清自己的差距到底有多大,知识面到底有多窄,适当打击一下自信心还是有必要的。在这里做一次全面的总结,关于javascript的数组去重问题。

考虑一个问题由简到繁相对容易接受一点,首先假设要去重的数组是比较简单的,例如:

var arr=[1,2,2,3,'5',6,5,'',' ']

这个数组只包含了数字,字符串两种类型。我们给数组原型上面添加去重的方法distinct,用第一种很容易想到的方法来实现,当然也是很笨很直接的,把这个数组复制一份然后循环两个数组,对比当前值与后面所有的值是否相等,如果与后面所有值都不等则把该值存到新数组里,如此最后再返回该新数组。方法如下:
//第一种方法 
Array.prototype.distinct=function(){ 
var clone,newArr=[],n=0; 
if(this.length<2)return; 
clone=this; 
for(var i=0,len=this.length;i<len;i++){ 
for(var j=i+1,len2=clone.length;j<len2;j++){ 
if(this[i]!==clone[j]){ 
n++; 
} 
} 
if(n==(len-i-1)){ 
newArr.push(this[i]) 
} 
n=0; 
} 
return newArr; 
} 
console.log([1,2,2,3,'5',6,5,'',' '].distinct()); 
/*获得被check的radio的值*/ 
function GetRadioValue(RadioName){ 
var obj; 
obj=document.getElementsByName(RadioName); 
if(obj!=null){ 
var i; 
for(i=0;i<obj.length;i++){ 
if(obj[i].checked){ 
return obj[i].value; 
} 
} 
} 
return null; 
} /*设置被选中属性*/ 
function SetRadioCheck(RadioName,i){ 
var obj; 
obj=document.getElementsByName(RadioName); 
obj[i].setAttribute("checked","checked"); 
}

基本可以满足我们的需求,对这样简单的类型比较确实不用费太多的脑经,但如果数组很长呢?如此遍历数组,数组长度为n,那么时间复杂度为n*n。显然该方法性能还有待提升。接下来是第二种方法,用到数组排序,在排序的过程去除重复的值。
//第二种方法 
Array.prototype.distinct=function(){ 
var newArr=this.concat().sort(),self=this; 
newArr.sort(function(a,b){ 
var n; 
if(a===b){ 
n=self.indexOf(a); 
self.splice(n,1); 
} 
}); 
return self; 
} 
console.log([1,2,2,3,'5',6,5,6,6,15,5,'5',5,'',' '].distinct());

这样代码看起来似乎短了很多,甚至连一个for循环都没有,但是sort得效率也高不到哪里去。再来看看第三种实现方法,用到的对象属性不会重名的原理
//第三种方法 
Array.prototype.distinct=function(){ 
var newArr=[],obj={}; 
for(var i=0,len=this.length;i<len;i++){ 
if(!obj[this[i]]){ 
newArr.push(this[i]); 
obj[this[i]]='new'; 
} 
} 
return newArr; 
} 
console.log([1,2,2,3,'5',6,5,6,6,15,5,'5',5,'',' '].distinct());

第三种方法运行看下结果,会发现跟上面的方法实现的结果不一致,细看原来它把数字5和字符串5当成重复的值给去掉了。看来类型必须保存起来然后再判断是否相等,这样便有了下面的第三种方法的补充版
//第三种方法补充版 
Array.prototype.distinct=function(){ 
var newArr=[],obj={}; 
for(var i=0,len=this.length;i<len;i++){ 
if(!obj[typeof(this[i])+this[i]]){ 
newArr.push(this[i]); 
obj[typeof(this[i])+this[i]]='new'; 
} 
} 
return newArr; 
}

上面举的例子是很简单的类型,我们拿更复杂的类型来测试一下
console.log([1,null,2,{a:'vc'},{},'5',6,5,6,{a:'vv'},15,5,'5',5,'',' ',[1],[1],[1,2],,].distinct());

发现{a:'vc'},{},{a:'vv'}这些不同的对象还是会被剔除掉,如果数组里面有对象则要继续遍历对象里面的属性和值,继续第三种方法的加强
//第三种方法加强版 
Array.prototype.distinct=function(){ 
var sameObj=function(a,b){ 
var tag = true; 
if(!a||!b)return false; 
for(var x in a){ 
if(!b[x]) 
return false; 
if(typeof(a[x])==='object'){ 
tag=sameObj(a[x],b[x]); 
}else{ 
if(a[x]!==b[x]) 
return false; 
} 
} 
return tag; 
} 
var newArr=[],obj={}; 
for(var i=0,len=this.length;i<len;i++){ 
if(!sameObj(obj[typeof(this[i])+this[i]],this[i])){ 
newArr.push(this[i]); 
obj[typeof(this[i])+this[i]]=this[i]; 
} 
} 
return newArr; 
}

用上面的例子测试发现基本木有问题,当然测试还可以更加变态更加纠缠,这里就不去深究了,目前来看此篇方法在网上属于比较齐全的,如果有更好更完善的方法请不吝赐教。
Javascript 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
Javascript的this详解
Mar 23 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
javascript 弹出层组件(升级版)
May 12 #Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 #Javascript
关于js获取radio和select的属性并控制的代码
May 12 #Javascript
js 第二代身份证号码的验证机制代码
May 12 #Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 #Javascript
五个jQuery图片画廊插件 推荐
May 12 #Javascript
JavaScript 继承使用分析
May 12 #Javascript
You might like
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
php中Smarty模板初体验
2011/08/08 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
javascript之bind使用介绍
2011/10/09 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python中取绝对值简单方法总结
2020/07/24 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
几道PHP的面试题
2012/05/19 面试题
中软Java笔试题
2012/11/11 面试题
西部世纪面试题
2014/12/05 面试题
学生实习介绍信
2014/01/15 职场文书