在進行數組操作時往往會遇到去掉重複項的問題,下面簡單介紹下數組去重的方法。
indexOf去重
Array.prototype.unique1 = function() {var arr = [];for (var i = 0; i < this.length; i++) {var item = this[i];if (arr.indexOf(item) === -1) {arr.push(item);}}return arr;}[1,2,3,'4',3,4,3,1,'34',2].unique1(); //[1, 2, 3, "4", 4, "34"]不過,在IE6-8 下,數組的indexOf 方法還不存在(雖然這已經算有點古老的話題了O(∩_∩)O~),但是,程序員就要寫一個indexOf方法:
var indexOf = [].indexOf ? function(arr, item) {return arr.indexOf(item);} :function indexOf(arr, item) {for (var i = 0; i < arr.length; i++) {if (arr[i] === item) {return i;}}return -1;}Array.prototype.unique2 = function() {var arr = [];for (var i = 0; i < this.length; i++) {var item = this[i];if (arr.indexOf(item) === -1) {arr.push(item);}}return arr;}[1,2,3,'4',3,4,3,1,'34',2].unique2(); //[1, 2, 3, "4", 4, "34"]indexOf還可以以這樣的去重思路:
Array.prototype.unique3 = function(){var arr = [this[0]]; for(var i = 1; i < this.length; i++) {if (this.indexOf(this[i]) == i){arr.push(this[i]);} }return arr;}[1,2,3,'4',3,4,3,1,'34',2].unique3(); //[1, 2, 3, "4", 4, "34"]hash去重
以上indexOf正確性沒問題,但性能上,兩重循環會降低性能。那我們就用hash。
Array.prototype.unique4 = function() {var arr = [];var hash = {};for (var i = 0; i < this.length; i++) {var item = this[i];var key = typeof(item) + itemif (hash[key] !== 1) {arr.push(item);hash[key] = 1;}} return arr;}[1,2,3,'4',3,4,3,1,'34',2].unique4(); //[1, 2, 3, "4", 4, "34"]核心是構建了一個hash 對象來替代indexOf。空間換時間。注意在JavaScript 裡,對象的鍵值只能是字符串(當然,ES6提供了Map數據結構。它類似於對象,也是鍵值對的集合,但是“鍵”的範圍不限於字符串,各種類型的值(包括對象)都可以當作鍵。也就是說,Object結構提供了“字符串―值”的對應,Map結構提供了“值―值”的對應,是一種更完善的Hash結構現。),因此需要var key = typeof(item) + item 來區分數值1 和字符串'1' 等情況。
那如果你想要'4' 和4 被認為是相同的話(其他方法同理)
Array.prototype.unique5 = function(){var arr=[];var hash={};for(var i=0,len=this.length;i<len;i++){if(!hash[this[i]]){ arr.push(this[i]);hash[this[i]]=true;}}return arr;}[1,2,3,'4',3,4,3,1,'34',2].unique5(); //[1, 2, 3, "4", "34"]排序後去重
Array.prototype.unique6 = function(){this.sort();var arr = [this[0]];for(var i = 1; i < this.length; i++){if( this[i] !== arr[arr.length-1]){arr.push(this[i]);}}return arr;}[1,2,3,'4',3,4,3,1,'34',2].unique6(); //[1, 2, 3, "34", "4", 4]先把數組排序,然後比較相鄰的兩個值,排序的時候用的JS原生的sort方法,所以非常快。而這個方法的缺陷只有一點,比較字符時按照字符編碼的順序進行排序。所以會看到10排在2前面這種情況。不過在去重中不影響。不過,解決sort的這個問題,是sort方法接受一個參數,這個參數是一個方法:
function compare(value1,value2) {if (value1 < value2) {return -1;} else if (value1 > value2) {return 1;} else {return 0;}}[1,2,5,2,10,3,20].sort(compare); //[1, 2, 2, 3, 5, 10, 20]Set去重
ES6提供了新的數據結構Set。它類似於數組,但是成員的值都是唯一的,沒有重複的值。現在瀏覽器正在全面支持,服務端的node也已經支持。
Array.prototype.unique7 = function(){return Array.from(new Set(this));}[1,2,3,'4',3,4,3,1,'34',2].unique7(); //[1, 2, 3, "4", 4, "34"]方法庫
推荐一個方法庫Underscore.js,在node或瀏覽器js中都很受歡迎。
const _ = require('underscore');_.uniq([1, 2, 1, 3, 1, 4]); //[1, 2, 3, 4]測試時間
以上方法均可以用一個簡單的方法去測試一下所耗費的時間,然後對各個方法做比較擇優:
console.time("test");[1,2,3,'4',3,4,3,1,'34',2].unique7();console.timeEnd("test");==> VM314:3 test: 0.378ms讓數據變得大一點,就隨機創建100萬個數:
var arr = [];var num = 0;for(var i = 0; i < 1000000; i++){num = Math.floor(Math.random()*100);arr.push(num);}console.time("test");arr.unique7();console.timeEnd("test");以上所述是小編給大家介紹的JavaScript數組去重由慢到快由繁到簡,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!