js多种去重的方法总结

第一种是比较常规的方法

思路：

1.构建一个新的数组存放结果

2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比

3.若结果数组中没有该元素，则存到结果数组中

Array.prototype.unique1 = function(){
 var res = [this[0]];
 for(var i = 1; i < this.length; i++){
  var repeat = false;
  for(var j = 0; j < res.length; j++){
   if(this[i] == res[j]){
    repeat = true;
    break;
   }
  }
  if(!repeat){
   res.push(this[i]);
  }
 }
 return res;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
alert(arr.unique1());

第二种方法比上面的方法效率要高

思路：

1.先将原数组进行排序

2.检查原数组中的第i个元素与结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置

3.如果不相同，则将该元素存入结果数组中

Array.prototype.unique2 = function(){
 this.sort(); //先排序
 var res = [this[0]];
 for(var i = 1; i < this.length; i++){
  if(this[i] !== res[res.length - 1]){
   res.push(this[i]);
  }
 }
 return res;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
alert(arr.unique2());

第二种方法也会有一定的局限性，因为在去重前进行了排序，所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重，那这种方法便不可取了。

第三种方法（推荐使用）

思路：

1.创建一个新的数组存放结果

2.创建一个空对象

3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。

Array.prototype.unique3 = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());

$(document).ready(function(){
    var MarYeArr  = ["2017","2016","2015","2017","2019","2012"];
    //调用去重，排序
     MarYeArr = MarYears(MarYeArr).sort().reverse();   
 
});
//去重
    function MarYears(arr){
        var res = [];
        var json = {};
        for(var i = 0; i < arr.length; i++){
            if(!json[arr[i]]){
               res.push(arr[i]);
               json[arr[i]] = 1;
             }
        }
        return res;
    }

其中第1种和第3种方法都用到了数组的indexOf方法。此方法的目的是寻找存入参数在数组中第一次出现的位置。很显然，js引擎在实现这个方法的时候会遍历数组直到找到目标为止。所以此函数会浪费掉很多时间。而第2中方法用的是hash表。把已经出现过的通过下标的形式存入一个object内。下标的引用要比用indexOf搜索数组快的多。

为了判断这三种方法的效率如何，我做了一个测试程序，生成一个10000长度的随机数组成的数组，然后分别用几个方法来测试执行时间。结果表明第二种方法远远快于其他两种方法。但是内存占用方面应该第二种方法比较多，因为多了一个hash表。这就是所谓的空间换时间。

第四种方法：

Array.prototype.unique4 = function()
{
    this.sort();
    var re=[this[0]];
    for(var i = 1; i < this.length; i++)
    {
        if( this[i] !== re[re.length-1])
        {
            re.push(this[i]);
        }
    }
    return re;
}

这个方法的思路是先把数组排序，然后比较相邻的两个值。排序的时候用的JS原生的sort方法，JS引擎内部应该是用的快速排序吧。最终测试的结果是此方法运行时间平均是第二种方法的三倍左右，不过比第一种和第三种方法快了不少。

第五种办法：利用ES6中的Ser()key的集合去重 (确保浏览器支持ES6规范)

Array.prototype.unique5 = function () {
//测试浏览器是否支持ES6
var m = new Map();
var s = new Set();
alert('你的浏览器支持Map和Set！');
//创建2个示例数组 
var arr1 = [1,2,3,4,5]; 
var arr2 = [1,3,5,7,9]; 
//创建一个空数组 //用于存储去重结果 
var arr3 = []; 
//将arr1和arr2合并,并且用Set()存储,进行去重; 
var s = Set( arr1.concat ( arr2 ) ); 
//遍历s,并且执行事件; 
s.forEach( function (e){ 
//将s的内容添加到arr3中,即是去重结果; 
arr3.push(e); 
}) 
return arr3; 
}

第五种方法所用的Set（）是ES6的新内容.

——————————————————————————————————————————————————————————————————————————————

第一：

说明：通常就是把字符串分割成数组，再对数组操作，相对来说数组的方法多些，方便些，最后再join成字符串

关于sort()方法，之所以先对数组元素排序，就是因为可以把相同的字符归到一起，就不用再双层循环，要不然就得拿到每个元素，和剩余的逐个比对，这个sort会按照ASCII 字符顺序进行升序排列

<html>
<head>
<script src="jquery-1.8.1.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
 $('#delRepeat').click(function(){
  var str = $('#repeatValue').val();
   var strArr=str.split("");//把字符串分割成一个数组
   strArr.sort();//排序
   var result=new Array();//创建出一个结果数组
   var tempStr="";
   for(var i in strArr)
   {
     if(strArr[i] != tempStr)
     {
      result.push(strArr[i]);
      tempStr=strArr[i];
     }
     else
     {
      continue;
     }
   }
   $('#noRepeat').val(result.join(""))//把数组连成字符串并展示到页面
 })
})
</SCRIPT>
</head>
<body>
原值<input id="repeatValue" type="text" ><input id="delRepeat" type="button" value="去重">
<input type="text" id="noRepeat">
</body>
</html>

第二：

说明，这个unique方法确实方便，但有两个缺陷：

1、只对数组有效（直接字符串不行），并且该数组不能是数字数组,
2、只对相邻的重复元素有效，隔开的不行。

例如：[a,a,b,b,c,c]---unique----》[a,b,c]有效
[a,a,b,b,c,c,a]--unique-->[a,b,c,a]元素a仍然重复，无效

因此调用unique之前必须调用一下sort方法将其重复元素重排一下，挨在一起

但也因为调用了sort方法，顺序给重排了如：[b,b,c,c,a,a]---unique-->[a,b,c]不是[b,c,a]

<html>
<head>
<script src="jquery-1.8.1.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
 $('#delRepeat').click(function(){
  var str = $('#repeatValue').val();
   var strArr=str.split("");
   //排序
   strArr.sort();
    var result =$.unique(strArr);
   $('#noRepeat').val(result.join(""));
 })
})
</SCRIPT>
</head>
<body>
原值<input id="repeatValue" type="text" ><input id="delRepeat" type="button" value="去重">
<input type="text" id="noRepeat">
</body>
</html>

第三：

说明：

var reg =/(.)(?=.*1)/g;
.匹配任意字符，但只能匹配任意字符中的一个
(.)加上()就是将匹配的该字符存储起来供以后引用
(?=)预搜索（也有叫断言的，也有叫预查的），指明某个字符的右侧是什么，但不包含这部分，只取这个‘某个字符'
如：p(?=ing) 匹配字符串ping时匹配成功，但匹配到的字符是p不是ping
(?=.*1) 这个1就是指的前面(.)的这个字符，之前说它被加上小括号就是被存储起来了，现在1就是取存储的第一个（共一个）
*匹配次数，也有人称之为量词，指出现任意次
.*指出现任意次任意字符
(.)(?=.*1)指第一个匹配字符，如果右侧出现的内容中包含该字符时就匹配上该字符
g 指globle，全局匹配模式，匹配所有字符串

这个去重的结果其实是倒着来排序的，就是说重复字符出现在前面的都被置空了，是按一个字符从后往前出现的顺序排的

<html>
<head>
<script src="jquery-1.8.1.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
 $('#delRepeat').click(function(){
  var str = $('#repeatValue').val();
     var reg = /(.)(?=.*1)/g;//预搜索方式（有的叫断言）
     var result = str.replace(reg, "");
     $('#noRepeat').val(result);
 })
})
</SCRIPT>
</head>
<body>
原值<input id="repeatValue" type="text" value="aca" ><input id="delRepeat" type="button" value="去重">
<input type="text" id="noRepeat">
</body>
</html>