javascript数组去重方法终极总结


Posted in Javascript onJune 05, 2014

有时会碰上这种需求,需要将数组中重复的元素删除掉,而只保留一个。最先想到的办法很可能就是用2个for循环来做比较然后去除掉重复的元素,代码如下所示:

方法1:

Array.prototype.distinct = function(){
 var arr = [],
      len = this.length;
 for ( var i = 0; i < len; i++ ){
  for( var j = i+1; j < len; j++ ){
   if( this[i] === this[j] ){
    j = ++i;
   }
  }
  arr.push( this[i] );
 }
 return arr;
};

使用方法1如果碰到数据比较多时性能上会差很多。那么请继续看下面的方法。

方法2:

Array.prototype.distinct = function(){ var self = this,
  arr = self.concat().sort(); // 创建一个新数组并排序
 arr.sort(function( a, b ){
  if( a === b ){
   var n = self.indexOf( a ); //获取索引值
   self.splice( n, 1 );
  }
 });
 return self;
};

方法2使用了 sort 的自定义回调函数,也用到了 indexOf 这个IE6/7/8不支持的方法。当然,indexOf可以自己模拟,但是更大的问题是IE6/7/8的sort方法和标准浏览器之间也有差别。在IE6/7/8中使用 sort 方法的自定义回调函数陷阱比较多,上面的自定义 sort 的回调函数的代码在IE6/7/8中会直接报“缺少数字”的错误,回调函数的返回是NaN的话就会报这个错,因为理论上 sort 的回调函数只能返回整数。就算忽略返回值的问题还是有其他问题,最后也没有过多的去纠结了,方法2在IE6/7/8中行不通。

从愚人码头那里看来了方法3,下面是他的代码:

Array.prototype.delRepeat=function(){
 var newArray=[];
 var provisionalTable = {};
 for (var i = 0, item; (item= this[i]) != null; i++) {
        if (!provisionalTable[item]) {
            newArray.push(item);
            provisionalTable[item] = true;
        }
    }
    return newArray;
};

方法3使用了一个临时的对象来存储数组的元素,如果碰上重复的数组元素,将会忽略掉。但是,如果碰到下面这种数组:

var arr = [ 'firefox', 1, '1' ];

上面的数组如果用方法3会误将 1 和 “1” 当成重复元素而删除掉,于是有将方法3做了一点点的小修改,可以解决这个BUG。
方法3的修改版:

Array.prototype.distinct = function(){
 var arr = [],
  obj = {},
  i = 0,
  len = this.length,
  result;
 for( ; i < len; i++ ){
  result = this[i];
  if( obj[result] !== result ){
   arr.push( result );
   obj[result] = result;
  }
 }
 return arr;
};

之后又看了愚人码头文章后面的评论,该方法和Rekey提供的方法是一样的,但是这个方法也有BUG,如果碰到这样的2B数组就杯具了:

var arr = [ 'firefox', 1, '1', 1 ];

上面的数组用方法3的修改版,将不会删除后3个元素,不过这种数组有点极端了,如果碰到字符串字面量和数字相同的数据应该预先处理下以规避这种BUG。使用临时对象的方法比 sort 在标准浏览器中略快,sort 方法在各浏览器中的算法应该也有区别。

Javascript 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
javascript设计模式之解释器模式详解
Jun 05 #Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 #Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 #Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 #Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 #Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 #Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 #Javascript
You might like
用PHP读取超大文件的实例代码
2012/04/01 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
如何提高数据访问速度
2016/12/26 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python subprocess模块学习总结
2014/03/13 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python selenium 三种等待方式解读
2016/09/15 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
天网面试题
2013/04/07 面试题
师范生实习自我鉴定
2013/11/01 职场文书
考试不及格的检讨书
2014/01/22 职场文书
投标邀请书范文
2014/01/31 职场文书
普通党员对照检查材料
2014/08/28 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
教你怎么用python selenium实现自动化测试
2021/05/27 Python