JavaScript數組去重總結

shmily 發(fā)布于2019-08-19 17:50 / 2585人閱讀

摘要：需求給定一個數組，里面有重復的數字，字符串，或者是二維的數組對象等，將里面的重復的去除，并返回新數組針對數字及字符串的方法測試數組為方法一思路用兩個循環(huán)，相互比較然后去掉重復的數字。

聲明:
本文給出的大多數方法都不是原創(chuàng)，在具體方法使用時給出了出處的鏈接，不過有部分方法實現(xiàn)較簡單很多地方都有，所以未注明，在最后會給出所有的參考鏈接。文章來自個人博客, 轉載請注明出處。

需求：

給定一個數組，里面有重復的數字，字符串，或者是二維的數組、對象等，將里面的重復的去除，并返回新數組

針對數字及字符串的方法

測試數組為： var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];

方法一
思路：用兩個for循環(huán)，相互比較然后去掉重復的數字。
實現(xiàn)：

var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
var uniqArray1 = function(arr) {
    var uniqArr = [];
    var arrLen = arr.length;
    for(var i = 0; i < arrLen; i++) {
          for(var j = i + 1; j < arrLen; j++) {
              if(arr[i] == arr[j]) {
                  j = ++i;
              }
        }
          uniqArr.push(arr[i]);
    }
      return uniqArr;
};
console.log(uniqArray1(arr));
//[ 7, "1", "3", "5" ]

方法一容易想到，但是當測試數據很多時，由于雙重循環(huán)會導致性能很差。

方法二
思路：新建數組，遍歷原數組，檢測當新數組中不存在原數組中的元素時將其push進去，最后返回新數組
實現(xiàn)：

var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
var uniqArray2 = function(arr) {
    var newArr = [];
    for(var i = 0,arrLen = arr.length; i < arrLen; i++) {
        //indexOf在IE8一下不支持
        if(newArr.indexOf(arr[i]) == -1) {   
            newArr.push(arr[i]);
        }
    }
    return newArr;
};
console.log(uniqArray2(arr));
//[ 1, 7, "1", 3, 5, "3", "5" ]

比方法一的性能好一些，但是對于需要考慮IE6-8的，需要額外再加點代碼:

//該代碼來自：http://www.cnblogs.com/wteam-xq/p/4732351.html
//判斷瀏覽器是否支持indexOf ，indexOf 為ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持
if (!Array.prototype.indexOf){
  // 新增indexOf方法
  Array.prototype.indexOf = function(item){
    var result = -1, a_item = null;
    if (this.length == 0){
      return result;
    }
    for(var i = 0, len = this.length; i < len; i++){
      a_item = this[i];
      if (a_item === item){
        result = i;
        break;
      }  
    }
    return result;
  }
}

方法三
思路：利用sort方法排序，然后比較數組中前后兩個數字是否相同，去掉不相同的返回新數組
實現(xiàn)：

var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
var uniqArray3 = function(arr) {
    arr.sort();
    var newArr = [arr[0]];
    for(var i = 1, arrLen = arr.length; i < arrLen; i++) {
        if( arr[i] != newArr[newArr.length- 1]) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
};
console.log(uniqArray3(arr));
//[ 1, 3, 5, 7 ]

一個關于sort方法的小插曲:

關于sort方法需要補充一點，如果需要利用sort進行升序或降序排列，為了實現(xiàn)排序，
sort()方法會調用每個數組項的toString()轉型方法，然后比較得到的字符串確定如何排序，例如：

var values = [1,10,5,65,666,223];
values.sort();
console.log(values);
//[ 1, 10, 223, 5, 65, 666 ]

即使數組中每一項都是數值，sort()比較的也是字符串，而在比較字符串時"10"位于"5"前面，于是數組的順序就不是預期的了。
sort可以接受一個比較函數，進而達到我們預期的比較結果：

function compare(a , b) {
    if( a < b) {
        return -1;
    }else if(a>b) {
        return 1;
    }else {
        return 0;
    }
}
var values = [1,10,5,65,666,223];
values.sort(compare);
console.log(values);
//[ 1, 5, 10, 65, 223, 666 ]

這樣就得到了升序排列，而想要降序時，只需要在打印時reverse()一下即可。

方法四
思路：利用對象中是否有一樣的屬性進行比較。
實現(xiàn)：

//from:http://blog.jobbole.com/33099/
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
var uniqArray4 = function(arr) {
    var result = [];
    var hash = {};    
    var item,key;
    for(var i = 0, arrLen = arr.length; i < arrLen; i++) {
        item = arr[i];
        //對象的鍵值只能是字符串，
        key = typeof(item) + item;   //區(qū)分數值 1 和字符串 "1" 等情況
        if(!hash[key]) {  
              result.push(item);  //hash用來反射key是否重復
              hash[key] = true;   //表明該值存進新數組了
        }
    }
    return result;
};
console.log(uniqArray4(arr));
//[ 1, 7, "1", 3, 5, "3", "5" ]

方法五
思路：利用對象字面量的key和value關聯(lián)性，
實現(xiàn)：

//from: https://segmentfault.com/q/1010000000262609
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
var uniqArray5 = function(arr) {
    var obj = {};
    var len = arr.length;
    for(var i = 0; i < len; i++) {
       obj[arr[i]] = arr[i];
    }
    return Object.keys(obj);
};
console.log(uniqArray5(arr));
//[ "1", "3", "5", "7" ]

方法六
思路：利用數組的filter方法
實現(xiàn)：

//from: https://segmentfault.com/q/1010000003864059
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
var uniqArray6 = function(arr) {
    return arr.filter(function (elem, index) {
        return arr.indexOf(elem) === index;
    });
};
console.log(uniqArray6(arr));
//[ 1, 7, "1", 3, 5, "3", "5" ]

對于filter()方法的補充：
filter: 對數組中的每一個元素調用參數中指定的過濾函數，并將對于過濾函數返回值為true的那些數組元素集合為新的數組返回。

方法七
思路：利用數組的filter方法

var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
  var uniqArray8 = arr.filter(function(element, index,array) {
        return array.indexOf(element) >= index;
    });
console.log(uniqArray8);
//[ 1, 7, "1", 3, 5, "3", "5" ]

方法八
思路：利用數組的filter方法

var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
 var uniqArray9 = arr.filter(function(element, index,array) {
    return arr.lastIndexOf(element) === index;
    });
console.log(uniqArray9);
//[ 7, 1, "1", 5, 3, "3", "5" ]

方法九
思路：利用reduce方法

var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
   var uniqArray8 = function(a) {
       return a.reduce(function(p, c) {
           if (p.indexOf(c) < 0) p.push(c);
           return p;
       }, []);
    };
console.log(uniqArray8(arr));
//[ 1, 7, "1", 3, 5, "3", "5" ]

關于reduce方法的補充：
reduce()方法從數組的第一項開始，在每一項上調用函數，這個函數返回的任何值都會作為第一個參數自動傳給下一項。

方法十
使用ES6的set方法。

Array.prototype.getUnique = function() {
    return [...new Set( [this] )];
};

方法十一
使用jQuery
實現(xiàn)：

//from:http://stackoverflow.com/questions/1960473/unique-values-in-an-array
(function($){
    var _old = $.unique;
    $.unique = function(arr){
        if (!!arr[0].nodeType){
            return _old.apply(this,arguments);
        } else {
            return $.grep(arr,function(v,k){
                return $.inArray(v,arr) === k;
            });
        }
    };
})(jQuery);

var arr = ["first",7,true,2,7,true,"last","last"];
$.unique(arr); 
// ["first", 7, true, 2, "last"]

var arr = [1,2,3,4,5,4,3,2,1];
$.unique(arr); 
// [1, 2, 3, 4, 5]

針對二維數組的去重方法

思路：通過isArray方法判斷數組中是否還有數組，如果有數組，在該數組上再次遍歷
實現(xiàn)：

//from: https://segmentfault.com/q/1010000000444289
var arr = [1,2,3,[1,1,2],[3,2],2];
var uniqArray11 = function(arr) {
    var result = arr.reduce(function(v, i) {
        //判斷有沒有二維數組
        if(Array.isArray(i)) {
            i.forEach(function(item) {
                if(v.indexOf(item) < 0) {
                    v.push(item);
                }
            });
        }else if(v.indexOf(i) < 0){
            v.push(i);
        }
        return v;
    }, []);
  return result;
};
console.log(uniqArray11(arr));
//[ 1, 2, 3 ]

針對對象的去重方法

實現(xiàn)：

//from:http://stackoverflow.com/questions/1960473/unique-values-in-an-array
Array.prototype.getUnique = function() {
        var hash = {}, result = [], key; 
        for ( var i = 0, l = this.length; i < l; ++i ) {
            key = JSON.stringify(this[i]);
            if ( !hash.hasOwnProperty(key) ) {
                hash[key] = true;
                result.push(this[i]);
            }
        }
        return result;
    };

var data = [
        {
            name: "aaa",
            value: 123
        },
        {
            name: "bbb",
            value: 234
        },
        {
            name: "aaa",
            value: 123
        },
        {
            name: "bbb",
            value: 789
        }
    ];
console.log(data.getUnique()); 
//[ { name: "aaa", value: 123 },
//  { name: "bbb", value: 234 },
//  { name: "bbb", value: 789 } ]

文章參考鏈接

下面是本文所述方法的來源鏈接：

http://www.cnblogs.com/wteam-xq/p/4732351.html

http://blog.jobbole.com/33099/

https://segmentfault.com/q/1010000000262609

https://segmentfault.com/q/1010000003864059

https://segmentfault.com/q/1010000000444289

http://stackoverflow.com/questions/1960473/unique-values-in-an-array

http://stackoverflow.com/questions/11246758/how-to-get-unique-values-in-an-array

GPU云服務器云服務器 java數組去重總結數組去重數組去重二維數組去重

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/78891.html

<javaScript> 數組去重的方法總結(2017年)

摘要：現(xiàn)在要求去重下面這個數組測試重復重復方法一測試重復重復去重后測試重復是新加的集合集合中的值不會重復。歡迎大家一起討論提出新的去重方法。有任何錯誤請在評論指出。現(xiàn)在要求去重下面這個數組 [1, 2, 3, 3, 3, 0, 1, 2, 測試, 重復, 重復, NaN, NaN, false, false]; 方法一：ES6 Set() let arr = [1, 2, 3, 3, 3,...

hightopo 2019-08-20 16:32 評論0 收藏0
<javaScript> 數組去重的方法總結(2017年)

摘要：現(xiàn)在要求去重下面這個數組測試重復重復方法一測試重復重復去重后測試重復是新加的集合集合中的值不會重復。歡迎大家一起討論提出新的去重方法。有任何錯誤請在評論指出。現(xiàn)在要求去重下面這個數組 [1, 2, 3, 3, 3, 0, 1, 2, 測試, 重復, 重復, NaN, NaN, false, false]; 方法一：ES6 Set() let arr = [1, 2, 3, 3, 3,...

YanceyOfficial 2019-08-01 16:50 評論0 收藏0
JavaScript數組去重的總結

摘要：數組去重方法的總結前言在中數組是比較常用的，本文中總結了下數組去重的幾種常用方法，如有問題，請指正。 JavaScript數組去重方法的總結前言在JavaScript中數組是比較常用的，本文中總結了下數組去重的幾種常用方法，如有問題，請指正。簡單粗暴的一種，ES6中set方法： var arr = [1,2,2,3,3,4,5,5]; console.log([...new Se...

Tonny 2019-08-26 11:40 評論0 收藏0
JS專題之數組去重

摘要：將元素作為對象的鍵，默認鍵對應的值為如果對象中沒有這個鍵，則將這個元素放入結果數組中去。前言數組去重在日常開發(fā)中的使用頻率還是較高的，也是網上隨便一抓一大把的話題，所以，我寫這篇文章目的在于歸納和總結，既然很多人都在提的數組去重，自己到底了解多少呢。又或者是如果自己在開發(fā)中遇到了去重的需求，自己能想到更好的解決方案嗎。這次我們來理一理怎么做數組去重才能做得最合適，既要考慮兼容性，...

only_do 2019-08-26 13:29 評論0 收藏0
JavaScript系列--八種【數組去重】方法的總結

摘要：缺點不兼容以下瀏覽器七高階函數方法用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回，否則返回。方法六高階函數優(yōu)點高階函數的高級用法。一、前言數組去重是一個老生常談的問題，但是有時候會彈出點其他東西。二、雙重循環(huán) 這個方法是最常見的，最原始的方法。 // 方法一：雙重循環(huán) var array = [1,1,1,2,1,1,2] function unique(arr...

Xufc 2019-08-23 18:14 評論0 收藏0
JavaScript數組方法之數組去重方法

摘要：工作過程中經常會用到數組去重，用到的時候往往一時想不到好方法，所以這里來總結一下去重方法。和方法分別為添加成員方法和得到鍵值方法。因此，利用方法也可以實現(xiàn)數組的去重。工作過程中經常會用到數組去重，用到的時候往往一時想不到好方法，所以這里來總結一下去重方法。使用es6去重代碼很簡單，而且ES6已經相當普及了。所以先來介紹一下es6中的方法。 1.ES6中Map結構方法 function...

CarlBenjamin 2019-08-22 15:18 評論0 收藏0