js陣列去重方法分析與總結

陣列去重經常被人拿來說事，雖然在工作中不常用，但他能夠很好的考察js基礎知識掌握的深度和廣度，下面從js的不同階段總結一下去重的方法。

該階段主要通過迴圈遍歷陣列從而達到去重的目的

// 以下所有方法預設都那拿該陣列進行測試
var array = [1,1
,'1'
,'1'
,null
,null
,undefined
,undefined
,new
string
('1'
),new
string
('1'
),/a/
,/a/
,nan
,nan
,{},{},,,,];
function
unique_es3_on2
(arr) }if
(flag) 
}return
ret;
}unique_es3_on2(array)

結果如下圖：

可見除了nan沒有去掉，其他效果都還挺好。原因就是nan===nan的結果是false。還有就是使用巢狀的迴圈，時間複雜度高，效能不是很好。

function
unique_es3_on
(arr) 
,        i,
len =
arr.length
,        ret = ;
for(i =
0; i < len ; i++) 
}return
ret;
}

結果如下圖：

雖然時間複雜度不高了，但是效果並不好。因為物件的屬性是字串，所以會把陣列所有元素預設轉化為字串，就會產生以下問題：

數值1和字串'1'以及包裝型別new string('1')，轉化為字串以後是相同的會被去掉。

物件轉化為字串以後會被誤判，==>'',{}==>'[object object]',還有就是形式相同，記憶體位址不同的物件會被去除。

為了解決型別轉換以後出現的問題，可以用typeof操作符轉一下：

function
unique_es3_on
(arr) 
,        i,
len =
arr.length
,        str,
ret = ;
for(i =
0; i < len ; i++) 
}return
ret;
}

結果如圖：

可以看到型別轉換的問題基本解決，但物件部分基本都被去除了，因為他們和字串相加時還是會發生轉化，解決的方案是把上面的str換成str = typeof arr[i] + json.stringify(arr[i])，相加之前先簡單序列化一下。

結果如圖：

從以上可以看出該階段的各種方法或多或少的都有一些問題，該去除的沒去掉，比如nan。不該去的給去掉了，比如，形式相同但記憶體位址不同的物件(是否應該去掉全看你怎麼定義)。

function
unique_es5
(arr) 
)}

結果如圖：

可以看到除了nan，其他表現都是正常的。其中indexof對於nan總是返回-1，所以導致誤判。

let
unique_includes = (arr) =>
});return
newarr;
}

結果如圖：

可以看到結果是符合預期的，es6中陣列的擴充套件方法includes解決了用indexof的弊端(不夠直觀，結果還要和索引進行比較。對nan的誤判)。

let
unique_set = (arr) =>

結果和includes方法一樣，此處利用es6新增資料結構set的特性，達到去重的目的。

let
unique_map = (arr) =>
}return
ret;
}

結果和includes一樣：

此處利用es6新增資料結構map的特性，之前的鍵值對集合（js物件），只能用字串當作健，map這種資料結構打破了這一限制，各種型別的值都可以當作健，而且map的健是跟記憶體位址繫結的，只要記憶體位址不同就認為是不同的健，解決了之前形式相同而記憶體位址不同被去掉的問題。對於簡單資料型別，只要嚴格相等就認為是相同的健，特例nan也認為是相同的健。所以就解決了之前的兩個大難題。

雖然只是乙個簡單的去重問題，但這一路實踐下來，可以看到js越來越強大，功能也越來越完善，同時也越來越優雅。現在再聽到有人說，js只是處理簡單表單驗證的玩具車語言之類的云云，我想我也會忍不住在他耳邊懟一句：那他媽是從前

js陣列去重方法分析與總結

js陣列去重方法分析與總結

js陣列去重方法總結

Js陣列去重方法總結

js陣列去重方法分析與總結

js陣列去重方法分析與總結

js陣列去重方法總結

Js陣列去重方法總結

相關推薦