數組去重 · 前端筆記

[TOC] # 雙層循環在這個方法中，我們使用循環嵌套，最外層循環 array，里面循環 res，如果 array[i] 的值跟 res[j] 的值相等，就跳出循環，如果都不等于，說明元素是唯一的，這時候 j 的值就會等于 res 的長度，根據這個特點進行判斷，將值添加進 res ~~~ function unique(array) { // res用來存儲結果 var res = []; for (var i = 0, arrayLen = array.length; i < arrayLen; i++) { for (var j = 0, resLen = res.length; j < resLen; j++ ) { if (array[i] === res[j]) { break; } } // 如果array[i]是唯一的，那么執行完循環，j等于resLen if (j === resLen) { res.push(array[i]) } } return res; } ~~~ # indexOf 外層遍歷目標數組，循環內用indexOf判斷當前項是否在 res 數組中 ~~~ function unique(array) { var res = []; for (var i = 0, len = array.length; i < len; i++) { var current = array[i]; if (res.indexOf(current) === -1) { res.push(current) } } return res; } ~~~ # 排序后去重試想我們先將要去重的數組使用 sort 方法排序后，相同的值就會被排在一起，然后我們就可以只判斷當前元素與上一個元素是否相同，相同就說明重復，不相同就添加進 res ~~~ function unique(array) { var res = []; var sortedArray = array.concat().sort(); var seen; for (var i = 0, len = sortedArray.length; i < len; i++) { // 如果是第一個元素或者相鄰的元素不相同 if (!i || seen !== sortedArray[i]) { res.push(sortedArray[i]) } seen = sortedArray[i]; } return res; } ~~~ # filter + indexOf ~~~ function unique(array) { var res = array.filter(function(item, index, array){ return array.indexOf(item) === index; }) return res; } ~~~ # filter + sort ~~~ function unique(array) { return array.concat().sort().filter(function(item, index, array){ return !index || item !== array[index - 1] }) } ~~~ # Set ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值 ~~~ function unique(array) { return [...new Set(array)]; } ~~~ # Map ~~~ function unique (arr) { const seen = new Map() return arr.filter((a) => !seen.has(a) && seen.set(a, 1)) } ~~~ # Object 鍵值對將對象序列化可以用來判斷對象值是否相等 ~~~ var array = [{value: 1}, {value: 1}, {value: 2}]; function unique(array) { var obj = {}; return array.filter(function(item, index, array){ console.log(typeof item + JSON.stringify(item)) return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true) }) } console.log(unique(array)); // [{value: 1}, {value: 2}] ~~~ # 自定義處理函數當需要對數組項做特殊處理時，需要自定義函數。如：字母的大小寫視為一致，比如'a'和'A'，保留一個 ~~~ /** * * @param {Array} array 表示要去重的數組，必填 * @param {Boolean} isSorted 表示函數傳入的數組是否已排過序，如果為 true，將會采用更快的方法進行去重 * @param {Function} iteratee 傳入一個函數，可以對每個元素進行重新的計算，然后根據處理的結果進行去重 */ var array = [1, 1, 'a', 'A', 2, 2]; function unique2(array, isSorted, iteratee) { var res = [] var seen = [] for (var i = 0, len = array.length; i < len; i++) { var value = array[i] var computed = iteratee ? iteratee(value, i, array) : value if (isSorted) { if (!i || seen !== computed) { res.push(value) } seen = computed } else if (iteratee) { if (seen.indexOf(computed) === -1) { seen.push(computed) res.push(value) } } else if (res.indexOf(value) === -1) { res.push(value) } } return res } unique(array, false, function(item){ return typeof item == 'string' ? item.toLowerCase() : item }) ~~~ # 特殊類型比較對于這樣一個數組 ~~~js var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN]; ~~~ 以上各種方法去重的結果到底是什么樣的呢？ | 方法 | 結果 | 說明 | | --- | --- | --- | | for循環 | \[1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN\] | 對象和 NaN 不去重 | | indexOf | \[1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN\] | 對象和 NaN 不去重 | | sort | \[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined\] | 對象和 NaN 不去重數字 1 也不去重 | | filter + indexOf | \[1, "1", null, undefined, String, String, /a/, /a/\] | 對象不去重 NaN 會被忽略掉 | | filter + sort | \[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined\] | 對象和 NaN 不去重數字 1 不去重 | | 優化后的鍵值對方法 | \[1, "1", null, undefined, String, /a/, NaN\] | 全部去重 | | Set | \[1, "1", null, undefined, String, String, /a/, /a/, NaN\] | 對象不去重 NaN 去重 | 想了解為什么會出現以上的結果，看兩個 demo 便能明白： ~~~js // demo1 var arr = [1, 2, NaN]; arr.indexOf(NaN); // -1 ~~~ indexOf 底層還是使用 === 進行判斷，因為 NaN === NaN的結果為 false，所以使用 indexOf 查找不到 NaN 元素 ~~~js // demo2 function unique(array) { return Array.from(new Set(array)); } console.log(unique([NaN, NaN])) // [NaN] ~~~ Set 認為盡管 NaN === NaN 為 false，但是這兩個元素是重復的。 # 參考資料 [JavaScript專題之數組去重](https://github.com/mqyqingfeng/Blog/issues/27)