JavaScript學習筆記之數組去重，javascript學習筆記

JavaScript學習筆記之數組去重，javascript學習筆記

推薦閱讀：JavaScript學習筆記之數組的增、刪、改、查

JavaScript學習筆記之數組求和方法

JavaScript學習筆記之數組隨機排序

話說面試常會碰到面試官會問JavaScript實現數組去重的問題，最近剛好在學習有關於JavaScript數組相關的知識,趁此機會整理了一些有關於JavaScript數組去重的方法。

下面這些數組去重的方法是自己收集和整理的，如有不對希望指本文中不對之處。

雙重迴圈去重

這個方法使用了兩個for迴圈做遍曆。整個思路是：

構建一個空數組用來存放去重後的數組

外面的for迴圈對原數組做遍曆，每次從數組中取出一個元素與結果數組做對比
如果原數組取出的元素與結果數組元素相同，則跳出迴圈;反之則將其存放到結果數組中

代碼如下:

Array.prototype.unique1 = function () {// 構建一個新數組，存放結果var newArray = [this[0]];// for迴圈，每次從原數組中取出一個元素// 用取出的元素迴圈與結果數組對比for (var i = 1; i < this.length; i++) {var repeat = false;for (var j=0; j < newArray.length; j++) {// 原數組取出的元素與結果數組元素相同if(this[i] == newArray[j]) {repeat = true;break;}}if(!repeat) {// 如果結果數組中沒有該元素，則存放到結果數組中newArray.push(this[i]);}}return newArray;}

假設我們有一個這樣的數組：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1',`2`];arr.unique1(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5]

據說這種方法比較耗時，費效能。簡單做個測試(測試方法寫得比較拙逼)：

function test () {var arr = [];for (var i = 0; i < 1000000; i++) {arr.push(Math.round(Math.random(i) * 10000));}doTest(arr, 1);}function doTest(arr, n) {var tStart = (new Date()).getTime();var re = arr.unique1();var tEnd = (new Date()).getTime();console.log('雙重迴圈去重方法使用時間是:' + (tEnd - tStart) + 'ms');return re;}test();

在Chrome控制器運行上面的代碼，測試雙重迴圈去重所費時間：11031ms。

上面的方法可以使用forEach()方法和indexOf()方法類比實現：

function unique1() {var newArray = [];this.forEach(function (index) {if (newArray.indexOf(index) == -1) {newArray.push(index);}});return newArray;}

通過unique1.apply(arr)或unique1.call(arr)調用。不過這種方法效率要快得多，同樣的上面測試代碼，所費時間5423ms，幾乎快了一半。

排序遍曆去重

先使用sort()方法對原數組做一個排序，排完序之後對數組做遍曆，並且檢查數組中的第i個元素與結果數組中最後一個元素是否相同。如果不同，則將元素放到結果數組中。

Array.prototype.unique2 = function () {// 原數組先排序this.sort();// 構建一個新數組存放結果var newArray = [];for (var i = 1; i < this.length; i++) {// 檢查原數中的第i個元素與結果中的最後一個元素是否相同// 因為排序了，所以重複元素會在相鄰位置if(this[i] !== newArray[newArray.length - 1]) {// 如果不同，將元素放到結果數組中newArray.push(this[i]);}}return newArray;}

例如：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique2(); // ["1", 1, 2, "2", 3, 32, 34, 4, 5, 56, "a", "b", "c"]

這種方法有兩個特色：

去重後的數組會做排序，主要是因為原數在去重前做了排序

去重後的數組，與數字相同的數字字元無法區分，比如'1'和1

使用同樣的方法，測試所費時間：1232ms。

對象索引值對法

這種去重方法實現思路是：

建立一個JavaScript對象以及新數組

使用for迴圈遍曆原數組，每次取出一個元素與JavaScript對象的鍵做對比

如果不包含，將存入對象的元素的值推入到結果數組中,並且將存入object對象中該屬性名稱的值設定為1

代碼如下:

Array.prototype.unique3 = function () {// 構建一個新數組存放結果var newArray = [];// 建立一個Null 物件var object = {};// for迴圈時，每次取出一個元素與對象進行對比// 如果這個元素不重複，則將它存放到結果數中// 同時把這個元素的內容作為對象的一個屬性，並賦值為1,// 存入到第2步建立的對象中for (var i = 0; i < this.length; i++){// 檢測在object對象中是否包含遍曆到的元素的值if(!object[typeof(this[i]) + this[i]]) {// 如果不包含，將存入對象的元素的值推入到結果數組中newArray.push(this[i]);// 如果不包含，存入object對象中該屬性名稱的值設定為1object[typeof(this[i]) + this[i]] = 1;}}return newArray;}

運行前面的樣本：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique3(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

同樣的，不同的鍵可能會被誤認為一樣；例如： a[1]、a["1"] 。這種方法所費時間：621ms。 這種方法所費時間是最短，但就是佔用記憶體大一些。

除了上面幾種方法，還有其他幾種方法如下：

// 方法四Array.prototype.unique4 = function () {// 構建一個新數組存放結果var newArray = [];// 遍曆整個數組for (var i = 0; i < this.length; i++) {// 遍曆是否有重複的值for (j = i + 1; j < this.length; j++) {// 如果有相同元素，自增i變數，跳出i的迴圈if(this[i] === this[j]) {j = ++i;}}// 如果沒有相同元素，將元素推入到結果數組中newArray.push(this[i]);}return newArray;}

Chrome測試結果

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique4(); // ["a", 1, 3, 4, 56, 32, 34, 2, "b", "c", 5, "1", "2"]

同樣的，1和'1'無法區分。

// 方法五Array.prototype.unique5 = function () {// 構建一個新數組存放結果var newArray = [];// 遍曆整個數組for (var i = 0; i < this.length; i++) {// 如果當前數組的第i值儲存到臨時數組，那麼跳過var index = this[i];// 如果數組項不在結果數組中，將這個值推入結果數組中if (newArray.indexOf(index) === -1) {newArray.push(index);}}return newArray;}

Chrome測試結果:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

同樣的，類似於1和'1'無法區分。所費時間：14361ms。

// 方法六Array.prototype.unique6 = function () {return this.reduce(function (newArray, index) {if(newArray.indexOf(index) < 0) {newArray.push(index);}return newArray;},[]);}

測試結果如下：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

所費時間：16490ms。

// 方法七Array.prototype.unique7 = function(){var newArray;newArray = this.filter(function (ele,i,arr) {return arr.indexOf(ele) === i;});return newArray;}

測試結果：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

所費時間：13201ms。

方法雖然很多種，但相比下來，下面這種方法是較為優秀的方案：

Array.prototype.unique3 = function () {// 構建一個新數組存放結果var newArray = [];// 建立一個Null 物件var object = {};// for迴圈時，每次取出一個元素與對象進行對比// 如果這個元素不重複，則將它存放到結果數中// 同時把這個元素的內容作為對象的一個屬性，並賦值為1,// 存入到第2步建立的對象中for (var i = 0; i < this.length; i++){// 檢測在object對象中是否包含遍曆到的元素的值if(!object[typeof(this[i]) + this[i]]) {// 如果不包含，將存入對象的元素的值推入到結果數組中newArray.push(this[i]);// 如果不包含，存入object對象中該屬性名稱的值設定為1object[typeof(this[i]) + this[i]] = 1;}}return newArray;}

但在ES6去重還有更簡單，更最佳化的方案，比如：

// ES6function unique (arr) {const seen = new Map()return arr.filter((a) => !seen.has(a) && seen.set(a, 1))}// orfunction unique (arr) {return Array.from(new Set(arr))}

以上所述是小編給大家介紹的JavaScript學習筆記之數組去重，希望對大家有所協助！

您可能感興趣的文章:

• javascript數字數組去重複項的實現代碼
• 兩種常用的javascript數組去重方法思路及代碼
• javascript數組去重3種方法的效能測試與比較
• js取兩個數組的交集|差集|並集|補集|去重範例程式碼
• js演算法中的排序、數組去重詳細概述
• js實現數組去重、判斷數組以及對象中的內容是否相同
• 兩個數組去重的JS代碼
• js數組去重的三種常用方法總結
• 關於js數組去重的問題小結