正所謂“一山不容二虎，一淵不藏兩蛟”，在某些“矯情”的需求中，數組中不能存在重覆的元素，於是就有了對數組去重方法的討論，關於數組去重的方法由來已久，我當然也想不出什麼原創的方法了，這裡只是簡單的總結一下以備忘。 不過，我們要先聲明一下，上面的這句強行組成的諺語還有下一句叫做“除非一公一母” ；也就是 ...
正所謂“一山不容二虎，一淵不藏兩蛟”，在某些“矯情”的需求中，數組中不能存在重覆的元素，於是就有了對數組去重方法的討論，關於數組去重的方法由來已久，我當然也想不出什麼原創的方法了，這裡只是簡單的總結一下以備忘。
不過，我們要先聲明一下，上面的這句強行組成的諺語還有下一句叫做“除非一公一母” 
；也就是說如果是一公一母的兩個元素是可以同時存在的，為了避免混淆，這裡規定元素之間的比較為嚴格相等，兩個元素通過 === 比較返回 true 的視為相同元素，需要去重。接下來我們統一一下函數風格。函數名為Deduplication ,接受參數為數組，返回的參數也為數組。在正式開始寫代碼之前，還需要明確一點就是數組去重不是找出數組中只出現一次的元素，而是讓重覆的元素有且僅出現一次。好了接下來一一列舉我抄襲的數組去重方法，其實我還是修改了一些錯誤並且優化了一丁點的。
Idea1
思路：
-
雙層迴圈，外層迴圈待去重數組，內層迴圈檢查結果數組
-
如果在結果數組中有相同的值則跳過，不相同則push進結果數組
Solution1:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function Deduplication(arr) {
var result = [];
for (var i = 0, alen = arr.length; i < alen; i++) {
var item = arr[i];
for (var j = 0, rlen= result.length; j < rlen; j++) {
if (result[j] ===item)
break;
}
if (j === rlen)//如果遍歷完結果數組還沒找到，說明不是重覆的元素
result.push(item);
}
return result;
}
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(unique(arr));//[ 2, 8, 6, '2', 5, 4 ]
|
當然如果不考慮相容性的話，可以使用ES5新增加的數組迭代迭代方法和位置方法。
solution2:
| 1 2 3 4 5 6 7 8 9 10 11 12 |
function Deduplication(arr) {
var result = [];
arr.forEach (function(item,index,arr){
if(result.indexOf(item)===-1){
result.push(item);
}
});
return result;
}
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(unique(arr));//[ 2, 8, 6, '2', 5, 4 ]
|
更巧妙的方法是使用fliter來過濾原數組
solution3:
| 1 2 3 4 5 6 7 8 |
function Deduplication(a) {
return a.filter(function(item, index, array) {
return array.indexOf(item) === index;
//indexOf方法只會返回元素第一次出現的位置,所以元素第一次出現時會是true,後面再出現就是false了
});
}
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, 8, 6, '2', 5, 4 ]
|
Idea2
思路：
-
雙層迴圈，外層迴圈待去重數組，內層迴圈檢查外層迴圈當前項與其後面的所有的項
-
如果在當前項後面發現有相同的值，則跳過，否則push進結果數組
solution4:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function Deduplication(arr) {
var result = [];
for(var i = 0,len=arr.length; i <len; i++) {
for (var j = i + 1; j < len; j++){
if (arr[i] === arr[j]){
break;
//發現相同值就不需要迴圈了，而且後面的if判斷語句也不會通過，相當於執行下次外層迴圈了
}
}
if(j===len)//未發現後面有相同值
result.push(arr[i]);
}
return result;
}
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, '2', 5, 8, 4, 6 ]
|
觀察返回的數組會發現與前面的方法返回的不一樣，但是還是出掉了重覆的元素，仔細品讀源代碼會發現在發現當前項後面有重覆項時，當前項並沒有放入結果數組，而是繼續迴圈，這樣操作的結果是只有某個元素最後一次出現的位置才會被push進結果數組，而不像前面的方法是在元素第一次出現的時候就push進了數組。稍稍修改一下源代碼，下麵的源代碼也是基於這種思想的。
solution5:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function Deduplication(arr){
var result = [];
for(var i = 0,len=arr.length; i < len; i++){
for(var j = i + 1; j < len; j++){
if(arr[i] === arr[j]){
j=++i+1;
//如果當前項後面找到了重覆元素，i自增一次並返回+1的值給j，相當於進入了下一次外迴圈
}
}
result.push(arr[i]);
}
return result;
}
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, '2', 5, 8, 4, 6 ]
|
前面的兩種方法結果打亂了元素在原始數組中的順序，如果支持ES5的話，則可以用下麵的方法保持元素的原始順序。
solution6:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
function Deduplication(){
var result = [];
arr.forEach(function(item, index ,arr){ //這裡利用map，filter方法也可以實現
//從傳入參數的下一個索引值開始尋找是否存在重覆
if(arr.indexOf(item,index+1) === -1){
result.push(item);
}
})
return result;
};
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, 8, 6, '2', 5, 4 ]
|
Idea3
思路：
-
雙層迴圈，外層迴圈元素，內層迴圈時比較值
-
值相同時，則刪去這個值
solution7:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function Deduplication(arr){
for(var i = 0,len=arr.length; i < len; i++){
for(j = i + 1; j < len; j++){
if(arr[i] === arr[j]){
arr.splice(j,1);
//刪除後面的重覆元素，但是要註意的是刪除一個元素過後，原數組的長度會發生變化所以len要-1，
//j也要減一，這是為了防止當前項後面出現兩個相鄰的重覆元素的情況時，刪掉前一個，後一個前移
//下次內迴圈時j++後就漏掉了後一個
len--;
j--;
}
}
}
return arr;
};
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, 8, 6, '2', 5, 4 ]
|
也許你可以註意到這裡是直接通過數組的splice()方法直接在原數組上刪除元素的，arr是引用類型，這裡也可以不需要返回值。
solution8:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function Deduplication(arr){
for(var i = 0,len=arr.length; i < len; i++){
for(j = i + 1; j < len; j++){
if(arr[i] === arr[j]){
arr.splice(j,1);
//刪除後面的重覆元素，但是要註意的是刪除一個元素過後，原數組的長度會發生變化所以len要-1，
//j也要減一，這是為了防止當前項後面出現兩個相鄰的重覆元素的情況時，漏掉了後一個
len--;
j--;
}
}
}
};
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
Deduplication(arr);
console.log(arr);//[ 2, 8, 6, '2', 5, 4 ]
|
Idea4
思路：對象的不能有兩個相同的屬性，就像哈希表一樣
-
準備一個空的結果數組和一個空對象，迴圈遍曆數組
-
如果當前數組元素已經是對象的屬性則跳過，否則，將此元素作為對象的鍵，值可以為任意有效值如true，並將此元素push進結果數組
solution9:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
function Deduplication(arr){
var obj = {},result = [];
for(var i = 0,len=arr.length; i<len; i++){
if(!obj[arr[i]]){ //如果能查找到，證明數組元素重覆了
obj[arr[i]] = true;
result.push(arr[i]);
}
}
return result;
};
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, 8, 6, 5, 4 ]
|
當然如果支持ES5的話，上面的思想還可以簡化為：
solution10:
| 1 2 3 4 5 6 7 8 |
function Deduplication(arr) {
var obj = {};
return arr.filter(function(item) {
return obj.hasOwnProperty(item) ? false : (obj[item] = true);
});
}
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, 8, 6, 5, 4 ]
|
細心的小伙伴有沒有發現一個問題，數組中的字元串'2'並沒有出現在結果數組中，這是因為JavaScript中對象的屬性都是字元串，如果不是會自動轉化，這樣以來數字2和字元串'2'，對應的屬性是相同的，字元串'2'就被當做重覆的元素過濾掉了，所以這種方法比較適合於數組元素都是數字或者字元串的情況。不過我們仍然可以通過一些小技巧解決這個問題，可以把元素的數據類型也作為對象屬性的一部分。
solution11:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function Deduplication(arr){
var obj = {},result = [];
for(var i = 0,len=arr.length; i<len; i++){
var item=arr[i];
var key=typeof(item)+item;
if(!obj[key]){ //如果能查找到，證明數組元素重覆了
obj[key] = true;
result.push(arr[i]);
}
}
return result;
};
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, 8, 6, '2', 5, 4 ]
|
Idea5
思路：排序後再刪除重覆元素（so這個方法會打亂數組元素原來的順序）
-
排序後的重覆元素會變成相鄰元素
-
比較相鄰元素，刪除重覆值
solution12:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
function Deduplication(arr){
arr.sort(); //註意這個地方的concat：返回數組的副本併排序
for (var i =0,len=arr.length; i <len; i++) {
if (arr[i]===arr[i+1]) {
arr.splice(i,1);
len--;
i--;
}
}
return arr;
};
var arr=[2,8,6,'2',5,6,4,5,8,4,6];
console.log(Deduplication(arr));//[ 2, '2', 4, 5, 6, 8 ]
|
如果可以使用ES5特性的話，可以使用一下幾種變形
solution13：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function Deduplication(arr){
var newarr = arr.concat().sort(); //註意這個地方的concat：返回數組的副本併排序
newarr.sort(function(a,b){
//再對副本數組進行排序（相鄰的兩個元素進行比較）時，操作原有數組arr
if(a === b){
var index = arr.indexOf(a);
arr.splice(index,1);
}
});
<
  更多相關文章
一周排行
 所有分類
|