Javascript 数组去重的方法(四种)详解及实例代码


Posted in Javascript onNovember 24, 2016

 Javascript 数组去重的四种方法

四种算法来实现这个目的:

第一种方法:

Array.prototype.unique1 = function () {
 var n = []; //一个新的临时数组
 for (var i = 0; i < this.length; i++) //遍历当前数组
 {
  //如果当前数组的第i已经保存进了临时数组,那么跳过,
  //否则把当前项push到临时数组里面
  if (n.indexOf(this[i]) == -1) n.push(this[i]);
 }
 return n;
}

 第二种方法:

Array.prototype.unique2 = function()
{
 var n = {},r=[]; //n为hash表,r为临时数组
 for(var i = 0; i < this.length; i++) //遍历当前数组
 {
 if (!n[this[i]]) //如果hash表中没有当前项
 {
  n[this[i]] = true; //存入hash表
  r.push(this[i]); //把当前数组的当前项push到临时数组里面
 }
 }
 return r;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
alert(arr.unique2());

 第三种方法:

Array.prototype.unique3 = function()
{
 var n = [this[0]]; //结果数组
 for(var i = 1; i < this.length; i++) //从第二项开始遍历
 {
 //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
 //那么表示第i项是重复的,忽略掉。否则存入结果数组
 if (this.indexOf(this[i]) == i) n.push(this[i]);
 }
 return n;
}

  其中第1种和第3种方法都用到了数组的indexOf方法。此方法的目的是寻找存入参数在数组中第一次出现的位置。很显然,js引擎在实现这个方法的时候会遍历数组直到找到目标为止。所以此函数会浪费掉很多时间。 而第2中方法用的是hash表。把已经出现过的通过下标的形式存入一个object内。下标的引用要比用indexOf搜索数组快的多。

    为了判断这三种方法的效率如何,我做了一个测试程序,生成一个10000长度的随机数组成的数组,然后分别用几个方法来测试执行时间。 结果表明第二种方法远远快于其他两种方法。 但是内存占用方面应该第二种方法比较多,因为多了一个hash表。这就是所谓的空间换时间。  就是这个 测试页面,你也可以去看看。

第四种方法:

Array.prototype.unique4 = function()
{
 this.sort();
 var re=[this[0]];
 for(var i = 1; i < this.length; i++)
 {
 if( this[i] !== re[re.length-1])
 {
  re.push(this[i]);
 }
 }
 return re;
}

    这个方法的思路是先把数组排序,然后比较相邻的两个值。 排序的时候用的JS原生的sort方法,JS引擎内部应该是用的快速排序吧。 最终测试的结果是此方法运行时间平均是第二种方法的三倍左右,不过比第一种和第三种方法快了不少。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js 实现复制到粘贴板的功能代码
May 13 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
jquery提示效果实例分析
Nov 25 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 #Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 #Javascript
微信小程序-详解数据缓存
Nov 24 #Javascript
如何实现json数据可视化详解
Nov 24 #Javascript
BootStrap 可编辑表Table格
Nov 24 #Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 #Javascript
You might like
mysql 字段类型说明
2007/04/27 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js倒计时小程序
2013/11/05 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
python中dict使用方法详解
2019/07/17 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
python中@contextmanager实例用法
2021/02/07 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
优秀大学生推荐信范文
2013/11/28 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
关于打架的检讨书
2014/01/17 职场文书
导购员的岗位职责
2014/02/08 职场文书
兴趣小组活动总结
2014/05/05 职场文书
优秀教师推荐材料
2014/12/16 职场文书
神龙架导游词
2015/02/11 职场文书
创建文明城市倡议书
2015/04/28 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
优化Mysql查询的示例
2022/04/26 MySQL
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript