摘要:需求給定一個數(shù)組,里面有重復(fù)的數(shù)字,字符串,或者是二維的數(shù)組對象等,將里面的重復(fù)的去除,并返回新數(shù)組針對數(shù)字及字符串的方法測試數(shù)組為方法一思路用兩個循環(huán),相互比較然后去掉重復(fù)的數(shù)字。
聲明:
本文給出的大多數(shù)方法都不是原創(chuàng),在具體方法使用時給出了出處的鏈接,不過有部分方法實現(xiàn)較簡單很多地方都有,所以未注明,在最后會給出所有的參考鏈接。文章來自個人博客, 轉(zhuǎn)載請注明出處。
給定一個數(shù)組,里面有重復(fù)的數(shù)字,字符串,或者是二維的數(shù)組、對象等,將里面的重復(fù)的去除,并返回新數(shù)組
針對數(shù)字及字符串的方法測試數(shù)組為: var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"];
方法一
思路:用兩個for循環(huán),相互比較然后去掉重復(fù)的數(shù)字。
實現(xiàn):
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray1 = function(arr) { var uniqArr = []; var arrLen = arr.length; for(var i = 0; i < arrLen; i++) { for(var j = i + 1; j < arrLen; j++) { if(arr[i] == arr[j]) { j = ++i; } } uniqArr.push(arr[i]); } return uniqArr; }; console.log(uniqArray1(arr)); //[ 7, "1", "3", "5" ]
方法一容易想到,但是當(dāng)測試數(shù)據(jù)很多時,由于雙重循環(huán)會導(dǎo)致性能很差。
方法二
思路:新建數(shù)組,遍歷原數(shù)組,檢測當(dāng)新數(shù)組中不存在原數(shù)組中的元素時將其push進(jìn)去,最后返回新數(shù)組
實現(xiàn):
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray2 = function(arr) { var newArr = []; for(var i = 0,arrLen = arr.length; i < arrLen; i++) { //indexOf在IE8一下不支持 if(newArr.indexOf(arr[i]) == -1) { newArr.push(arr[i]); } } return newArr; }; console.log(uniqArray2(arr)); //[ 1, 7, "1", 3, 5, "3", "5" ]
比方法一的性能好一些,但是對于需要考慮IE6-8的,需要額外再加點代碼:
//該代碼來自:http://www.cnblogs.com/wteam-xq/p/4732351.html //判斷瀏覽器是否支持indexOf ,indexOf 為ecmaScript5新方法 IE8以下(包括IE8, IE8只支持部分ecma5)不支持 if (!Array.prototype.indexOf){ // 新增indexOf方法 Array.prototype.indexOf = function(item){ var result = -1, a_item = null; if (this.length == 0){ return result; } for(var i = 0, len = this.length; i < len; i++){ a_item = this[i]; if (a_item === item){ result = i; break; } } return result; } }
方法三
思路:利用sort方法排序,然后比較數(shù)組中前后兩個數(shù)字是否相同,去掉不相同的返回新數(shù)組
實現(xiàn):
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray3 = function(arr) { arr.sort(); var newArr = [arr[0]]; for(var i = 1, arrLen = arr.length; i < arrLen; i++) { if( arr[i] != newArr[newArr.length- 1]) { newArr.push(arr[i]); } } return newArr; }; console.log(uniqArray3(arr)); //[ 1, 3, 5, 7 ]
一個關(guān)于sort方法的小插曲:
關(guān)于sort方法需要補(bǔ)充一點,如果需要利用sort進(jìn)行升序或降序排列,為了實現(xiàn)排序,
sort()方法會調(diào)用每個數(shù)組項的toString()轉(zhuǎn)型方法,然后比較得到的字符串確定如何排序,例如:
var values = [1,10,5,65,666,223]; values.sort(); console.log(values); //[ 1, 10, 223, 5, 65, 666 ]
即使數(shù)組中每一項都是數(shù)值,sort()比較的也是字符串,而在比較字符串時"10"位于"5"前面,于是數(shù)組的順序就不是預(yù)期的了。
sort可以接受一個比較函數(shù),進(jìn)而達(dá)到我們預(yù)期的比較結(jié)果:
function compare(a , b) { if( a < b) { return -1; }else if(a>b) { return 1; }else { return 0; } } var values = [1,10,5,65,666,223]; values.sort(compare); console.log(values); //[ 1, 5, 10, 65, 223, 666 ]
這樣就得到了升序排列,而想要降序時,只需要在打印時reverse()一下即可。
方法四
思路:利用對象中是否有一樣的屬性進(jìn)行比較。
實現(xiàn):
//from:http://blog.jobbole.com/33099/ var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray4 = function(arr) { var result = []; var hash = {}; var item,key; for(var i = 0, arrLen = arr.length; i < arrLen; i++) { item = arr[i]; //對象的鍵值只能是字符串, key = typeof(item) + item; //區(qū)分?jǐn)?shù)值 1 和字符串 "1" 等情況 if(!hash[key]) { result.push(item); //hash用來反射key是否重復(fù) hash[key] = true; //表明該值存進(jìn)新數(shù)組了 } } return result; }; console.log(uniqArray4(arr)); //[ 1, 7, "1", 3, 5, "3", "5" ]
方法五
思路:利用對象字面量的key和value關(guān)聯(lián)性,
實現(xiàn):
//from: https://segmentfault.com/q/1010000000262609 var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray5 = function(arr) { var obj = {}; var len = arr.length; for(var i = 0; i < len; i++) { obj[arr[i]] = arr[i]; } return Object.keys(obj); }; console.log(uniqArray5(arr)); //[ "1", "3", "5", "7" ]
方法六
思路:利用數(shù)組的filter方法
實現(xiàn):
//from: https://segmentfault.com/q/1010000003864059 var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray6 = function(arr) { return arr.filter(function (elem, index) { return arr.indexOf(elem) === index; }); }; console.log(uniqArray6(arr)); //[ 1, 7, "1", 3, 5, "3", "5" ]
對于filter()方法的補(bǔ)充:
filter: 對數(shù)組中的每一個元素調(diào)用參數(shù)中指定的過濾函數(shù),并將對于過濾函數(shù)返回值為true的那些數(shù)組元素集合為新的數(shù)組返回。
方法七
思路:利用數(shù)組的filter方法
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray8 = arr.filter(function(element, index,array) { return array.indexOf(element) >= index; }); console.log(uniqArray8); //[ 1, 7, "1", 3, 5, "3", "5" ]
方法八
思路:利用數(shù)組的filter方法
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray9 = arr.filter(function(element, index,array) { return arr.lastIndexOf(element) === index; }); console.log(uniqArray9); //[ 7, 1, "1", 5, 3, "3", "5" ]
方法九
思路:利用reduce方法
var arr = [1, 7, 7, 1, "1",3, 5, 3, "3", "5"]; var uniqArray8 = function(a) { return a.reduce(function(p, c) { if (p.indexOf(c) < 0) p.push(c); return p; }, []); }; console.log(uniqArray8(arr)); //[ 1, 7, "1", 3, 5, "3", "5" ]
關(guān)于reduce方法的補(bǔ)充:
reduce()方法從數(shù)組的第一項開始,在每一項上調(diào)用函數(shù),這個函數(shù)返回的任何值都會作為第一個參數(shù)自動傳給下一項。
方法十
使用ES6的set方法。
Array.prototype.getUnique = function() { return [...new Set( [this] )]; };
方法十一
使用jQuery
實現(xiàn):
//from:http://stackoverflow.com/questions/1960473/unique-values-in-an-array (function($){ var _old = $.unique; $.unique = function(arr){ if (!!arr[0].nodeType){ return _old.apply(this,arguments); } else { return $.grep(arr,function(v,k){ return $.inArray(v,arr) === k; }); } }; })(jQuery); var arr = ["first",7,true,2,7,true,"last","last"]; $.unique(arr); // ["first", 7, true, 2, "last"] var arr = [1,2,3,4,5,4,3,2,1]; $.unique(arr); // [1, 2, 3, 4, 5]針對二維數(shù)組的去重方法
思路:通過isArray方法判斷數(shù)組中是否還有數(shù)組,如果有數(shù)組,在該數(shù)組上再次遍歷
實現(xiàn):
//from: https://segmentfault.com/q/1010000000444289 var arr = [1,2,3,[1,1,2],[3,2],2]; var uniqArray11 = function(arr) { var result = arr.reduce(function(v, i) { //判斷有沒有二維數(shù)組 if(Array.isArray(i)) { i.forEach(function(item) { if(v.indexOf(item) < 0) { v.push(item); } }); }else if(v.indexOf(i) < 0){ v.push(i); } return v; }, []); return result; }; console.log(uniqArray11(arr)); //[ 1, 2, 3 ]針對對象的去重方法
實現(xiàn):
//from:http://stackoverflow.com/questions/1960473/unique-values-in-an-array Array.prototype.getUnique = function() { var hash = {}, result = [], key; for ( var i = 0, l = this.length; i < l; ++i ) { key = JSON.stringify(this[i]); if ( !hash.hasOwnProperty(key) ) { hash[key] = true; result.push(this[i]); } } return result; }; var data = [ { name: "aaa", value: 123 }, { name: "bbb", value: 234 }, { name: "aaa", value: 123 }, { name: "bbb", value: 789 } ]; console.log(data.getUnique()); //[ { name: "aaa", value: 123 }, // { name: "bbb", value: 234 }, // { name: "bbb", value: 789 } ]文章參考鏈接
下面是本文所述方法的來源鏈接:
http://www.cnblogs.com/wteam-xq/p/4732351.html
http://blog.jobbole.com/33099/
https://segmentfault.com/q/1010000000262609
https://segmentfault.com/q/1010000003864059
https://segmentfault.com/q/1010000000444289
http://stackoverflow.com/questions/1960473/unique-values-in-an-array
http://stackoverflow.com/questions/11246758/how-to-get-unique-values-in-an-array
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/78891.html
摘要:現(xiàn)在要求去重下面這個數(shù)組測試重復(fù)重復(fù)方法一測試重復(fù)重復(fù)去重后測試重復(fù)是新加的集合集合中的值不會重復(fù)。歡迎大家一起討論提出新的去重方法。有任何錯誤請在評論指出。 現(xiàn)在要求去重下面這個數(shù)組 [1, 2, 3, 3, 3, 0, 1, 2, 測試, 重復(fù), 重復(fù), NaN, NaN, false, false]; 方法一:ES6 Set() let arr = [1, 2, 3, 3, 3,...
摘要:現(xiàn)在要求去重下面這個數(shù)組測試重復(fù)重復(fù)方法一測試重復(fù)重復(fù)去重后測試重復(fù)是新加的集合集合中的值不會重復(fù)。歡迎大家一起討論提出新的去重方法。有任何錯誤請在評論指出。 現(xiàn)在要求去重下面這個數(shù)組 [1, 2, 3, 3, 3, 0, 1, 2, 測試, 重復(fù), 重復(fù), NaN, NaN, false, false]; 方法一:ES6 Set() let arr = [1, 2, 3, 3, 3,...
摘要:數(shù)組去重方法的總結(jié)前言在中數(shù)組是比較常用的,本文中總結(jié)了下數(shù)組去重的幾種常用方法,如有問題,請指正。 JavaScript數(shù)組去重方法的總結(jié) 前言 在JavaScript中數(shù)組是比較常用的,本文中總結(jié)了下數(shù)組去重的幾種常用方法,如有問題,請指正。 簡單粗暴的一種,ES6中set方法: var arr = [1,2,2,3,3,4,5,5]; console.log([...new Se...
摘要:將元素作為對象的鍵,默認(rèn)鍵對應(yīng)的值為如果對象中沒有這個鍵,則將這個元素放入結(jié)果數(shù)組中去。 前言 數(shù)組去重在日常開發(fā)中的使用頻率還是較高的,也是網(wǎng)上隨便一抓一大把的話題,所以,我寫這篇文章目的在于歸納和總結(jié),既然很多人都在提的數(shù)組去重,自己到底了解多少呢。又或者是如果自己在開發(fā)中遇到了去重的需求,自己能想到更好的解決方案嗎。 這次我們來理一理怎么做數(shù)組去重才能做得最合適,既要考慮兼容性,...
摘要:缺點不兼容以下瀏覽器七高階函數(shù)方法用來判斷一個數(shù)組是否包含一個指定的值,根據(jù)情況,如果包含則返回,否則返回。方法六高階函數(shù)優(yōu)點高階函數(shù)的高級用法。 一、前言 數(shù)組去重是一個老生常談的問題,但是有時候會彈出點其他東西。 二、雙重循環(huán) 這個方法是最常見的,最原始的方法。 // 方法一:雙重循環(huán) var array = [1,1,1,2,1,1,2] function unique(arr...
摘要:工作過程中經(jīng)常會用到數(shù)組去重,用到的時候往往一時想不到好方法,所以這里來總結(jié)一下去重方法。和方法分別為添加成員方法和得到鍵值方法。因此,利用方法也可以實現(xiàn)數(shù)組的去重。 工作過程中經(jīng)常會用到數(shù)組去重,用到的時候往往一時想不到好方法,所以這里來總結(jié)一下去重方法。使用es6去重代碼很簡單,而且ES6已經(jīng)相當(dāng)普及了。所以先來介紹一下es6中的方法。 1.ES6中Map結(jié)構(gòu)方法 function...
閱讀 4510·2021-09-22 14:57
閱讀 554·2019-08-30 15:56
閱讀 2657·2019-08-30 15:53
閱讀 2234·2019-08-29 14:15
閱讀 1684·2019-08-28 17:54
閱讀 553·2019-08-26 13:37
閱讀 3471·2019-08-26 10:57
閱讀 1040·2019-08-26 10:32