JS去除数组重复值的五种不同方法

 更新时间:2013年09月06日 17:32:40   投稿:whsnow  
去除数组重复值的方法有很多,本文整理了四种不同方式,在此与大家分享下,希望对大家有所帮助

今天工作遇到此问题,尝试多个方法不尽人意,故此写个博客来总结一下如何在js中去除重复元素。

Array类型并没有提供去重复的方法,如果要把数组的重复元素干掉,那得自己想办法:

方法1:

  Array.prototype.method1 = function(){ 
      var arr[];  //定义一个临时数组 
      for(var i = 0; i < this.length; i++){  //循环遍历当前数组 
        //判断当前数组下标为i的元素是否已经保存到临时数组 
        //如果已保存,则跳过,否则将此元素保存到临时数组中 
        if(arr1.indexOf(this[i]) == -1){ 
          arr.push(this[i]); 
        } 
      } 
      return arr; 
    }

方法2:

Array.prototype.method2 = function(){ 
      var h{};  //定义一个hash表 
      var arr[]; //定义一个临时数组 
       
      for(var i = 0; i < this.length; i++){  //循环遍历当前数组 
        //对元素进行判断,看是否已经存在表中,如果存在则跳过,否则存入临时数组 
        if(!h[this[i]]){ 
          //存入hash表 
          h[this[i]] = true; 
          //把当前数组元素存入到临时数组中 
          arr.push(this[i]); 
        } 
      } 
      return arr; 
    } 

方法3:

Array.prototype.method3 = function(){ 
      //直接定义结果数组 
      var arr[this[0]]; 
      for(var i = 1; i < this.length; i++){  //从数组第二项开始循环遍历此数组 
        //对元素进行判断: 
        //如果数组当前元素在此数组中第一次出现的位置不是i 
        //那么我们可以判断第i项元素是重复的,否则直接存入结果数组 
        if(this.indexOf(this[i]) == i){ 
          arr.push(this[i]); 
        } 
      } 
      return arr; 
     
    } 

方法4:

Array.prototype.method4 = function(){ 
      //将数组进行排序 
      this.sort(); 
      //定义结果数组 
      var arr[this[0]]; 
      for(var i = 1; i < this.length; i++){  //从数组第二项开始循环遍历数组 
        //判断相邻两个元素是否相等,如果相等说明数据重复,否则将元素写入结果数组 
        if(this[i] !== arr[arr.length - 1]){ 
          arr.push(this[i]); 
        }       
      } 
      return arr; 
       
    } 

例如:

 var arr = [112,112,34,'你好',112,112,34,'你好','str','str1']; 
    alert(arr.method3()); 

方法1和方法3都用到了数组的indexOf()方法,此方法主要用来查找元素在数组中第一次出现的位置。比较浪费资源和时间。
方法2使用的是hash表,把已经出现过的元素通过下标形式写入到一个object内,下标的引用要比用数组indexOf()方法搜索节省时间。
方法4是先将数组排序,然后一次比较相邻的两个元素的值,排序使用的是js原生的sort()方法。
读者可以自行编写程序测试四种方法的效率如何。例如:首先利用随机函数生成一个50000长度的随机数数组,然后分别用四种方法进行执行,记录程序运行时间进行比较四种方法的优劣。

方法五、个人比较喜欢的一个函数

function unique(arr) {
  var result = [], isRepeated;
  for (var i = 0, len = arr.length; i < len; i++) {
    isRepeated = false;
    for (var j = 0, len = result.length; j < len; j++) {
      if (arr[i] == result[j]) {  
        isRepeated = true;
        break;
      }
    }
    if (!isRepeated) {
      result.push(arr[i]);
    }
  }
  return result;
}

总体思路是把数组元素逐个搬运到另一个数组,搬运的过程中检查这个元素是否有重复,如果有就直接丢掉。从嵌套循环就可以看出,这种方法效率极低。我们可以 用一个hashtable的结构记录已有的元素,这样就可以避免内层循环。恰好,在Javascript中实现hashtable是极为简单的,改进如下:

function unique(arr) {
  var result = [], hash = {};
  for (var i = 0, elem; (elem = arr[i]) != null; i++) {
    if (!hash[elem]) {
      result.push(elem);
      hash[elem] = true;
    }
  }
  return result;
}

完整测试代码

<script>
var h_hewenqiArray = new Array();
h_hewenqiArray[0] = "jb51.net";
h_hewenqiArray[1] = "easysector";
h_hewenqiArray[2] = "jb51.net";
h_hewenqiArray[3] = "keleyi";
h_hewenqiArray[4] = "keleyi";
h_hewenqiArray[5] = "脚本之家";
h_hewenqiArray[6] = "jb51.net";
h_hewenqiArray[7] = "hoverclock";
h_hewenqiArray[8] = "yestop";
h_hewenqiArray[9] = 163;
h_hewenqiArray[10] = "脚本之家";
h_hewenqiArray[11] = 163;
h_hewenqiArray[12] = "hoverclock";
h_hewenqiArray[13] = "脚本之家";

var h_arrayLength = h_hewenqiArray.length;
document.write("原始数组元素个数:"+h_arrayLength + "<br />");
for (var i = 0; i < h_arrayLength; i++)
{
document.write(h_hewenqiArray[i]+"<br />");
}


function hovercUnique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
//http://jb51.net.com
}

var h_hewenqiResult = hovercUnique(h_hewenqiArray);

var h_resultLength = h_hewenqiResult.length;
document.write("<br />去重复后数组元素个数:" + h_resultLength + "<br />");
for (var i = 0; i < h_resultLength; i++) {
document.write(h_hewenqiResult[i] + "<br />");
} 
</script>

以下是其它网友的补充

复制代码 代码如下:

/// <summary>2 /// 回车键按钮事件(此方法需要在页面加载完后执行,比如在Jquery中的ready中调用)--方法一
/// </summary>
/// 调用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEle();
/// alert(v_ArrayResult); //返回结果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEle = function () {
var o = {}, newArr = [], i, j;
for (i = 0; i < this.length; i++) {
if (typeof (o[this[i]]) == "undefined") {
o[this[i]] = "";
}
}
for (j in o) {
newArr.push(j)
}
return newArr;
}
/// <summary>
/// 回车键按钮事件(此方法需要在页面加载完后执行,比如在Jquery中的ready中调用)--方法二
/// </summary>
/// 调用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEleReg();
/// alert(v_ArrayResult); //返回结果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEleReg = function () {
return this.reverse().join(",").match(/([^,]+)(?!.*\1)/ig).reverse();
}
/// <summary>
/// 回车键按钮事件(此方法需要在页面加载完后执行,比如在Jquery中的ready中调用)--方法三
/// </summary>
/// <param name="array">数组</param>
/// 调用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// alert(unique(v_Array)); //返回结果:, 2, 3, 4, 5, 6, 7
function deleteEleFunction(array) {
var ret = [], record = {}, it, tmp, obj = "__object__", bak = [], i, len;
var type = {
"number": function (n) { return "__number__" + n; },
"string": function (n) { return "__string__" + n; },
"boolean": function (n) { return "__boolean__" + n; },
"undefined": function (n) { return "__undefined__"; },
"object": function (n) {
return n === null ? "__null__" : obj in n ? n[obj] : (n[obj] = obj + bak.push(n));
}
};
for (i = 0, len = array.length; i < len; i++) {
it = array[i]; tmp = type[typeof it](it);
if (!(tmp in record)) { ret.push(it); record[tmp] = true; }
}
for (i = 0, len = bak.length; i < len; delete bak[i++][obj]) { }
return ret;
};

/// <summary>< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />
/// 回车键按钮事件(此方法需要在页面加载完后执行,比如在Jquery中的ready中调用)--方法四
/// </summary>
/// 调用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEleDis();
/// alert(v_ArrayResult); //返回结果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEleDis = function () {
var a = [], b = [];
for (var prop in this) {
var d = this[prop];
if (d === a[prop]) continue; //防止循环到prototype
if (b[d] != 1) {
a.push(d);
b[d] = 1;
}
}
return a;
}

相关文章

  • JavaScript降低代码圈复杂度优化技巧

    JavaScript降低代码圈复杂度优化技巧

    当一个项目经过持续迭代,不断增加功能,逐渐变成一个复杂的产品时,新功能的开发变得相对困难,其中一个很大的原因是代码复杂度高,导致可维护性和可读性都很差,本文将从前端JavaScript的角度出发,介绍一些有效的方法和技巧来优化前端代码的圈复杂度
    2023-10-10
  • 从零开始做一个pagination分页组件

    从零开始做一个pagination分页组件

    从零开始做一个pagination分页组件,这篇文章主要介绍了pagination分页组件的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript模块化开发流程分步讲解

    JavaScript模块化开发流程分步讲解

    这篇文章主要介绍了JavaScript模块化开发流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • webpack-dev-server 的 host 配置 0.0.0.0的方法

    webpack-dev-server 的 host 配置 0.0.0.0的方法

    这篇文章主要介绍了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下
    2024-01-01
  • KnockoutJS 3.X API 第四章之表单value绑定

    KnockoutJS 3.X API 第四章之表单value绑定

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。这篇文章主要介绍了KnockoutJS 3.X API 第四章之表单value绑定的相关资料,需要的朋友可以参考下
    2016-10-10
  • 原生js实现半透明遮罩层效果具体代码

    原生js实现半透明遮罩层效果具体代码

    半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助
    2013-06-06
  • JavaScript数据结构之双向链表

    JavaScript数据结构之双向链表

    这篇文章主要为大家详细介绍了JavaScript数据结构之双向链表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 解决在layer.open中使用时间控件laydate失败的问题

    解决在layer.open中使用时间控件laydate失败的问题

    今天小编就为大家分享一篇解决在layer.open中使用时间控件laydate失败的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 详解es6新增数组方法简便了哪些操作

    详解es6新增数组方法简便了哪些操作

    这篇文章主要介绍了详解es6新增数组方法简便了哪些操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 浅谈JavaScript中指针和地址

    浅谈JavaScript中指针和地址

    Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程,其中this指针就是实现面向对象的一个很重要的特性。
    2015-07-07

最新评论