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

今天工作遇到此问题,尝试多个方法不尽人意,故此写个博客来总结一下如何在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;
}

(0)

相关推荐

  • JavaScript合并两个数组并去除重复项的方法

    本文实例讲述了JavaScript合并两个数组并去除重复项的方法.分享给大家供大家参考.具体实现方法如下: Array.prototype.unique = function() { var a = this.concat(); for(var i=0; i for(var j=i+1; j if(a[i] === a[j]) a.splice(j, 1); } } return a; }; //Demo var array1 = ["a","b"]; var ar

  • Javascript 去除数组的重复元素

    我打开firebug的console,花了30秒想,30秒写,结果如下:(x为目标数组,y是去除重复元素后的结果) 复制代码 代码如下: var x=[1,1,3,4,5,3]; var y=[]; var tArray=function(i,arr){ var yap=false; for(var j=0;j<arr.length;j++){ if(arr[j]==i){yap=true;break;}; } if(!yap) arr.push(i); }; for(var t=0;t<x.

  • js 巧妙去除数组中的重复项

    时不时的看下YUI的源码, 总会有些收获. 一. YUI中的源码' 复制代码 代码如下: var toObject = function(a) { var o = {}; for (var i=0, j=a.length; i<j; i=i+1) { // 这里我调整了下, YUI源码中是i<a.length o[a[i]] = true; } return o; }; var keys = function(o) { var a=[], i; for (i in o) { if (o.has

  • 详解JavaScript数组和字符串中去除重复值的方法

    原理在代码中表现得非常清晰,我们直接来看代码例子: var ages = array.map(function(obj) { return obj.age; }); ages = ages.filter(function(v,i) { return ages.indexOf(v) == i; }); console.log(ages); //=> [17, 35] function isBigEnough(element) { return element >= 10; } var filte

  • javascript中去除数组重复元素的实现方法【实例】

    在实际应用中,我们很多时候都可能需要去除数组中的重复元素,下面就是javascript数组去重的方法实现: <script language="javascript"> <!-- /*判断数组中是否存在某个元素的方法*/ function isExistInArr(_array, _element){ if(!_array || !_element) return false; if(!_array.length){ return (_array == _elemen

  • js 高效去除数组重复元素示例代码

    复制代码 代码如下: function unique(data){ data = data || []; var a = {}; for (var i=0; i<data.length; i++) { var v = data[i]; if (typeof(a[v]) == 'undefined'){ a[v] = 1; } }; data.length=0; for (var i in a){ data[data.length] = i; } return data; } function t

  • JavaScript去除数组里重复值的方法

    本文实例讲述了JavaScript去除数组里重复值的方法.分享给大家供大家参考.具体如下: var unique = function(origArr) { var newArr = [], origLen = origArr.length, found, x, y; for ( x = 0; x < origLen; x++ ) { found = undefined; for ( y = 0; y < newArr.length; y++ ) { if ( origArr[x] === n

  • JS实现合并两个数组并去除重复项只留一个的方法

    本文实例讲述了JS实现合并两个数组并去除重复项只留一个的方法.分享给大家供大家参考,具体如下: //It's merge arr1 and arr2 , delete the same element only leave one //It's only apdapter array. If object, no. //The sequence of the two array is not required. mergeArray:function (arr1, arr2){ for (var

  • JavaScript中数组去除重复的三种方法

    废话不多说了,具体方法如下所示: 方法一:返回新数组每个位子类型没变 function outRepeat(a){ var hash=[],arr=[]; for (var i = 0; i < a.length; i++) { hash[a[i]]!=null; if(!hash[a[i]]){ arr.push(a[i]); hash[a[i]]=true; } } console.log(arr); } outRepeat([2,4,4,5,"a","a"

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

    今天工作遇到此问题,尝试多个方法不尽人意,故此写个博客来总结一下如何在js中去除重复元素. Array类型并没有提供去重复的方法,如果要把数组的重复元素干掉,那得自己想办法: 方法1: Array.prototype.method1 = function(){ var arr[]; //定义一个临时数组 for(var i = 0; i < this.length; i++){ //循环遍历当前数组 //判断当前数组下标为i的元素是否已经保存到临时数组 //如果已保存,则跳过,否则将此元素保存到

  • java去除数组重复元素的四种方法

    方法1: 需要一个存储去重后元素的数组,然后两层循环,外层遍历原数组,内容逐个判断是否和之后的元素重复,然后再提出来存入新的数组.方法System.arraycopy(被复制的数组,起始下标,接收的新数组,起始下标,结束下标);可以直接复制数组,既然这样,我就没必要纠结新数组的长度了,直接声明一个跟原数组长度一样的临时数组,只要记录下去重后的元素个数,然后就可以确定去重后数组长度再去将临时数组拷贝到新数组就行了. package testPro.test; public class testDi

  • js数组中去除重复值的几种方法

    在日常开发中,我们可能会遇到将一个数组中里面的重复值去除,那么,我就将我自己所学习到的几种方法分享出来 去除数组重复值方法: 1,利用indexOf()方法去除 思路:创建一个新数组,然后循环要去重的数组,然后用新数组去找要去重数组的值,如果找不到则使用.push添加到新数组,最后把新数组返回回去就行了 看不懂没关系,上代码就比较容易懂了 function fun(arr){ let newsArr = []; for (let i = 0; i < arr.length; i++) { if(

  • PHP两种去掉数组重复值的方法比较

    去除一个数组中的重复值,可以使用foreach方法,也可以使用array_unique方法,下面的代码两种方法都使用了. <?php $arrF = array(); $arrS = array(); $intTotal = 100; $intRand = 10; for($i=0; $i < $intTotal; $i++) { $arrF[] = rand(1, $intRand); $arrS[] = rand(1, $intRand); } $arrT = array_merge($a

  • JavaScript实现删除数组重复元素的5种常用高效算法总结

    本文实例讲述了JavaScript实现删除数组重复元素的5种常用高效算法.分享给大家供大家参考,具体如下: 这里就 js 如何实现数组去重整理出5种方法,并附上演示Demo 以及 源码. 1.遍历数组法 最简单的去重方法, 实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下: // 最简单数组去重法 function unique1

  • JavaScript基于对象去除数组重复项的方法

    本文实例讲述了JavaScript基于对象去除数组重复项的方法.分享给大家供大家参考,具体如下: JavaScript中,去除数组重复项是一个很常用的函数,而且在面试中也很经常被提问到.很多人在面对这个问题的时候,一般都是采用多层for循环来一步一步的比较,然后删除,那样不仅代码量很多,而且性能也很不好.在JavaScript的对象中,有一个特性就是key永远不重复,如果重复后面的就会覆盖前面的. 三个步骤: 1# 把数组转换成js对象 2# 把数组值变成js对象中的key 3# 把对象还原成数

  • JavaScript中数组去重常用的五种方法详解

    目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返

  • PHP删除二维数组中相同元素及数组重复值的方法示例

    本文实例讲述了PHP删除二维数组中相同元素及数组重复值的方法.分享给大家供大家参考,具体如下: function assoc_title($arr, $key) { $tmp_arr = array(); foreach ($arr as $k => $v) { if (in_array($v[$key], $tmp_arr)) { unset($arr[$k]); } else { $tmp_arr[] = $v[$key]; } } return $arr; }//assoc_title e

  • 基于JS实现回到页面顶部的五种写法(从实现到增强)

    写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style=&qu

  • Python中移除List重复项的五种方法

    本文列些处几种去除在Python 列表中(list)可能存在的重复项,这在很多应用程序中都会遇到的需求,作为程序员最好了解其中的几种方法 以备在用到时能够写出有效的程序. 方法1:朴素方法 这种方式是在遍历整个list的基础上,将第一个出现的元素添加在新的列表中. 示例代码: # Python 3 code to demonstrate # removing duplicated from list # using naive methods # initializing list test_l

随机推荐