javascript数组去重方法终极总结

 更新时间:2014年06月05日 11:22:34   作者:  
这篇文章主要介绍了javascript数组去重终极总结,本文列举了3种javascript数组去重方法,并分别分析了它们的优缺点,需要的朋友可以参考下

有时会碰上这种需求,需要将数组中重复的元素删除掉,而只保留一个。最先想到的办法很可能就是用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 方法在各浏览器中的算法应该也有区别。

相关文章

  • 页面中iframe相互传值传参

    页面中iframe相互传值传参

    兼容IE和火狐JS父窗口调用iframe里面的对象、函数的方法
    2009-12-12
  • VSCode开发TypeScript的实现步骤

    VSCode开发TypeScript的实现步骤

    本文主要介绍了VSCode开发TypeScript的实现步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 原生JS实现H5转盘游戏的示例代码

    原生JS实现H5转盘游戏的示例代码

    这篇文章主要介绍了如何利用原生JS实现转盘游戏,可以自由调整概率。文中的示例代码讲解详细,对我们学习JavaScript有一定帮助,需要的可以参考一下
    2022-03-03
  • Bootstrap实现的表格合并单元格示例

    Bootstrap实现的表格合并单元格示例

    这篇文章主要介绍了Bootstrap实现的表格合并单元格,涉及bootstrap界面布局相关操作技巧,需要的朋友可以参考下
    2018-02-02
  • JavaScript常用8种数组去重代码实例

    JavaScript常用8种数组去重代码实例

    这篇文章主要介绍了JavaScript常用8种数组去重代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 利用OpenAI ChatGPT进行编码尝试体验

    利用OpenAI ChatGPT进行编码尝试体验

    这几天chatgpt可是非常火的,下面这篇文章主要给大家介绍了关于利用OpenAI ChatGPT进行编码尝试体验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JavaScript如何自定义trim方法

    JavaScript如何自定义trim方法

    本文介绍了如何自定义trim方法,trim的作用就是去除字符串前后空格,这个方法在字符串处理方面很有实用价值,需要的朋友可以参考下
    2015-07-07
  • JS算法教程之字符串去重与字符串反转

    JS算法教程之字符串去重与字符串反转

    这篇文章主要给大家介绍了关于JS算法教程之字符串去重与字符串反转的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 基于javascript原生判断DOM是否加载完毕

    基于javascript原生判断DOM是否加载完毕

    这篇文章主要介绍了基于javascript原生判断DOM是否加载完毕,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • Ionic2调用本地SQlite实例

    Ionic2调用本地SQlite实例

    这篇文章主要介绍了Ionic2调用本地SQlite实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论