JS去除數(shù)組重復(fù)值的五種不同方法
今天工作遇到此問(wèn)題,嘗試多個(gè)方法不盡人意,故此寫個(gè)博客來(lái)總結(jié)一下如何在js中去除重復(fù)元素。
Array類型并沒(méi)有提供去重復(fù)的方法,如果要把數(shù)組的重復(fù)元素干掉,那得自己想辦法:
方法1:
Array.prototype.method1 = function(){ var arr[]; //定義一個(gè)臨時(shí)數(shù)組 for(var i = 0; i < this.length; i++){ //循環(huán)遍歷當(dāng)前數(shù)組 //判斷當(dāng)前數(shù)組下標(biāo)為i的元素是否已經(jīng)保存到臨時(shí)數(shù)組 //如果已保存,則跳過(guò),否則將此元素保存到臨時(shí)數(shù)組中 if(arr1.indexOf(this[i]) == -1){ arr.push(this[i]); } } return arr; }
方法2:
Array.prototype.method2 = function(){ var h{}; //定義一個(gè)hash表 var arr[]; //定義一個(gè)臨時(shí)數(shù)組 for(var i = 0; i < this.length; i++){ //循環(huán)遍歷當(dāng)前數(shù)組 //對(duì)元素進(jìn)行判斷,看是否已經(jīng)存在表中,如果存在則跳過(guò),否則存入臨時(shí)數(shù)組 if(!h[this[i]]){ //存入hash表 h[this[i]] = true; //把當(dāng)前數(shù)組元素存入到臨時(shí)數(shù)組中 arr.push(this[i]); } } return arr; }
方法3:
Array.prototype.method3 = function(){ //直接定義結(jié)果數(shù)組 var arr[this[0]]; for(var i = 1; i < this.length; i++){ //從數(shù)組第二項(xiàng)開(kāi)始循環(huán)遍歷此數(shù)組 //對(duì)元素進(jìn)行判斷: //如果數(shù)組當(dāng)前元素在此數(shù)組中第一次出現(xiàn)的位置不是i //那么我們可以判斷第i項(xiàng)元素是重復(fù)的,否則直接存入結(jié)果數(shù)組 if(this.indexOf(this[i]) == i){ arr.push(this[i]); } } return arr; }
方法4:
Array.prototype.method4 = function(){ //將數(shù)組進(jìn)行排序 this.sort(); //定義結(jié)果數(shù)組 var arr[this[0]]; for(var i = 1; i < this.length; i++){ //從數(shù)組第二項(xiàng)開(kāi)始循環(huán)遍歷數(shù)組 //判斷相鄰兩個(gè)元素是否相等,如果相等說(shuō)明數(shù)據(jù)重復(fù),否則將元素寫入結(jié)果數(shù)組 if(this[i] !== arr[arr.length - 1]){ arr.push(this[i]); } } return arr; }
例如:
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1']; alert(arr.method3());
方法1和方法3都用到了數(shù)組的indexOf()方法,此方法主要用來(lái)查找元素在數(shù)組中第一次出現(xiàn)的位置。比較浪費(fèi)資源和時(shí)間。
方法2使用的是hash表,把已經(jīng)出現(xiàn)過(guò)的元素通過(guò)下標(biāo)形式寫入到一個(gè)object內(nèi),下標(biāo)的引用要比用數(shù)組indexOf()方法搜索節(jié)省時(shí)間。
方法4是先將數(shù)組排序,然后一次比較相鄰的兩個(gè)元素的值,排序使用的是js原生的sort()方法。
讀者可以自行編寫程序測(cè)試四種方法的效率如何。例如:首先利用隨機(jī)函數(shù)生成一個(gè)50000長(zhǎng)度的隨機(jī)數(shù)數(shù)組,然后分別用四種方法進(jìn)行執(zhí)行,記錄程序運(yùn)行時(shí)間進(jìn)行比較四種方法的優(yōu)劣。
方法五、個(gè)人比較喜歡的一個(gè)函數(shù)
function unique(arr) { var result = [], isRepeated; for (var i = 0, len = arr.length; i < len; i++) { isRepeated = false; for (var j = 0, len = result.length; j < len; j++) { if (arr[i] == result[j]) { isRepeated = true; break; } } if (!isRepeated) { result.push(arr[i]); } } return result; }
總體思路是把數(shù)組元素逐個(gè)搬運(yùn)到另一個(gè)數(shù)組,搬運(yùn)的過(guò)程中檢查這個(gè)元素是否有重復(fù),如果有就直接丟掉。從嵌套循環(huán)就可以看出,這種方法效率極低。我們可以 用一個(gè)hashtable的結(jié)構(gòu)記錄已有的元素,這樣就可以避免內(nèi)層循環(huán)。恰好,在Javascript中實(shí)現(xiàn)hashtable是極為簡(jiǎn)單的,改進(jìn)如下:
function unique(arr) { var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); hash[elem] = true; } } return result; }
完整測(cè)試代碼
<script> var h_hewenqiArray = new Array(); h_hewenqiArray[0] = "jb51.net"; h_hewenqiArray[1] = "easysector"; h_hewenqiArray[2] = "jb51.net"; h_hewenqiArray[3] = "keleyi"; h_hewenqiArray[4] = "keleyi"; h_hewenqiArray[5] = "腳本之家"; h_hewenqiArray[6] = "jb51.net"; h_hewenqiArray[7] = "hoverclock"; h_hewenqiArray[8] = "yestop"; h_hewenqiArray[9] = 163; h_hewenqiArray[10] = "腳本之家"; h_hewenqiArray[11] = 163; h_hewenqiArray[12] = "hoverclock"; h_hewenqiArray[13] = "腳本之家"; var h_arrayLength = h_hewenqiArray.length; document.write("原始數(shù)組元素個(gè)數(shù):"+h_arrayLength + "<br />"); for (var i = 0; i < h_arrayLength; i++) { document.write(h_hewenqiArray[i]+"<br />"); } function hovercUnique(arr) { var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); hash[elem] = true; } } return result; //http://jb51.net.com } var h_hewenqiResult = hovercUnique(h_hewenqiArray); var h_resultLength = h_hewenqiResult.length; document.write("<br />去重復(fù)后數(shù)組元素個(gè)數(shù):" + h_resultLength + "<br />"); for (var i = 0; i < h_resultLength; i++) { document.write(h_hewenqiResult[i] + "<br />"); } </script>
以下是其它網(wǎng)友的補(bǔ)充
/// <summary>2 /// 回車鍵按鈕事件(此方法需要在頁(yè)面加載完后執(zhí)行,比如在Jquery中的ready中調(diào)用)--方法一
/// </summary>
/// 調(diào)用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEle();
/// alert(v_ArrayResult); //返回結(jié)果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEle = function () {
var o = {}, newArr = [], i, j;
for (i = 0; i < this.length; i++) {
if (typeof (o[this[i]]) == "undefined") {
o[this[i]] = "";
}
}
for (j in o) {
newArr.push(j)
}
return newArr;
}
/// <summary>
/// 回車鍵按鈕事件(此方法需要在頁(yè)面加載完后執(zhí)行,比如在Jquery中的ready中調(diào)用)--方法二
/// </summary>
/// 調(diào)用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEleReg();
/// alert(v_ArrayResult); //返回結(jié)果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEleReg = function () {
return this.reverse().join(",").match(/([^,]+)(?!.*\1)/ig).reverse();
}
/// <summary>
/// 回車鍵按鈕事件(此方法需要在頁(yè)面加載完后執(zhí)行,比如在Jquery中的ready中調(diào)用)--方法三
/// </summary>
/// <param name="array">數(shù)組</param>
/// 調(diào)用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// alert(unique(v_Array)); //返回結(jié)果:, 2, 3, 4, 5, 6, 7
function deleteEleFunction(array) {
var ret = [], record = {}, it, tmp, obj = "__object__", bak = [], i, len;
var type = {
"number": function (n) { return "__number__" + n; },
"string": function (n) { return "__string__" + n; },
"boolean": function (n) { return "__boolean__" + n; },
"undefined": function (n) { return "__undefined__"; },
"object": function (n) {
return n === null ? "__null__" : obj in n ? n[obj] : (n[obj] = obj + bak.push(n));
}
};
for (i = 0, len = array.length; i < len; i++) {
it = array[i]; tmp = type[typeof it](it);
if (!(tmp in record)) { ret.push(it); record[tmp] = true; }
}
for (i = 0, len = bak.length; i < len; delete bak[i++][obj]) { }
return ret;
};
/// <summary>< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />
/// 回車鍵按鈕事件(此方法需要在頁(yè)面加載完后執(zhí)行,比如在Jquery中的ready中調(diào)用)--方法四
/// </summary>
/// 調(diào)用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEleDis();
/// alert(v_ArrayResult); //返回結(jié)果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEleDis = function () {
var a = [], b = [];
for (var prop in this) {
var d = this[prop];
if (d === a[prop]) continue; //防止循環(huán)到prototype
if (b[d] != 1) {
a.push(d);
b[d] = 1;
}
}
return a;
}
相關(guān)文章
JavaScript降低代碼圈復(fù)雜度優(yōu)化技巧
當(dāng)一個(gè)項(xiàng)目經(jīng)過(guò)持續(xù)迭代,不斷增加功能,逐漸變成一個(gè)復(fù)雜的產(chǎn)品時(shí),新功能的開(kāi)發(fā)變得相對(duì)困難,其中一個(gè)很大的原因是代碼復(fù)雜度高,導(dǎo)致可維護(hù)性和可讀性都很差,本文將從前端JavaScript的角度出發(fā),介紹一些有效的方法和技巧來(lái)優(yōu)化前端代碼的圈復(fù)雜度2023-10-10從零開(kāi)始做一個(gè)pagination分頁(yè)組件
從零開(kāi)始做一個(gè)pagination分頁(yè)組件,這篇文章主要介紹了pagination分頁(yè)組件的制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JavaScript模塊化開(kāi)發(fā)流程分步講解
這篇文章主要介紹了JavaScript模塊化開(kāi)發(fā)流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01webpack-dev-server 的 host 配置 0.0.0.0的方法
這篇文章主要介紹了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,,需要的朋友可以參考下2024-01-01KnockoutJS 3.X API 第四章之表單value綁定
Knockout是一個(gè)以數(shù)據(jù)模型(data model)為基礎(chǔ)的能夠幫助你創(chuàng)建富文本,響應(yīng)顯示和編輯用戶界面的JavaScript類庫(kù)。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03解決在layer.open中使用時(shí)間控件laydate失敗的問(wèn)題
今天小編就為大家分享一篇解決在layer.open中使用時(shí)間控件laydate失敗的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09