脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript数组去重

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 方法在各浏览器中的算法应该也有区别。

您可能感兴趣的文章:

相关文章

  • JS与HTML结合实现流程进度展示条思路详解

    JS与HTML结合实现流程进度展示条思路详解

    基于js与html相结合实现的流程进度展示条，非常实用，在各大网站都可以用到，下面小编给大家带来了JS与HTML结合实现流程进度展示条思路详解，需要的朋友参考下吧
    2017-09-09
  • js关于getImageData跨域问题的解决方法

    js关于getImageData跨域问题的解决方法

    这篇文章主要为大家详细介绍了js关于getImageData跨域问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Bootstrap轮播插件简单使用方法介绍

    Bootstrap轮播插件简单使用方法介绍

    这篇文章主要为大家详细介绍了Bootstrap轮播插件简单使用方法，介绍了使用bootstrap轮播插件的作用，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 微信小程序页面滑动屏幕加载数据效果

    微信小程序页面滑动屏幕加载数据效果

    这篇文章主要为大家详细介绍了微信小程序页面滑动屏幕加载数据效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js实现验证码干扰(动态)

    js实现验证码干扰(动态)

    这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02
  • JavaScript事件处理的方式(三种)

    JavaScript事件处理的方式(三种)

    最近这段时间因为每天要修改网站，为网站做特效，所以看了很多的js接触事件，自己只会使用一小部分，有时用的时候也比较混乱，现在系统的整理了一下，特此分享到脚本之家平台供大家参考下
    2016-04-04
  • TS中最常见的声明合并(接口合并)

    TS中最常见的声明合并(接口合并)

    这篇文章主要介绍了TS中最常见的声明合并：接口合并,TS中的声明合并，指的就是编译器会针对同名的声明合并为一个声明,合并后的声明会同时拥有原先两个或多个声明的特性,接口的合并也是一样，它会将双方的成员放到一个同名的接口里，更多详细内容请参考下面文章内容

    2021-12-12
  • 原生Javascript插件开发实践

    原生Javascript插件开发实践

    本文主要介绍了原生Javascript插件开发实践思路与代码，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript判断是否为数字的4种方法及效率比较

    JavaScript判断是否为数字的4种方法及效率比较

    这篇文章主要介绍了JavaScript判断是否为数字的4种方法及效率比较,本文直接给出判断方法实现代码及运行效率效果图,方便大家选择使用,需要的朋友可以参考下
    2015-04-04
  • Bootstrap3多级下拉菜单

    Bootstrap3多级下拉菜单

    这篇文章主要为大家详细介绍了Bootstrap3多级下拉菜单的相关资料，需引用bootstrap.min.css和bootstrap.min.css.js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论