JavaScript學(xué)習(xí)筆記之?dāng)?shù)組去重
來源:易賢網(wǎng) 閱讀:847 次 日期:2016-07-16 15:06:03
溫馨提示:易賢網(wǎng)小編為您整理了“JavaScript學(xué)習(xí)筆記之?dāng)?shù)組去重”,方便廣大網(wǎng)友查閱!

這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組去重的相關(guān)資料,需要的朋友可以參考下

話說面試常會碰到面試官會問JavaScript實現(xiàn)數(shù)組去重的問題,最近剛好在學(xué)習(xí)有關(guān)于JavaScript數(shù)組相關(guān)的知識,趁此機(jī)會整理了一些有關(guān)于JavaScript數(shù)組去重的方法。

下面這些數(shù)組去重的方法是自己收集和整理的,如有不對希望指正文中不對之處。

雙重循環(huán)去重

這個方法使用了兩個for循環(huán)做遍歷。整個思路是:

構(gòu)建一個空數(shù)組用來存放去重后的數(shù)組

外面的for循環(huán)對原數(shù)組做遍歷,每次從數(shù)組中取出一個元素與結(jié)果數(shù)組做對比

如果原數(shù)組取出的元素與結(jié)果數(shù)組元素相同,則跳出循環(huán);反之則將其存放到結(jié)果數(shù)組中

代碼如下:

Array.prototype.unique1 = function () {

// 構(gòu)建一個新數(shù)組,存放結(jié)果

var newArray = [this[0]];

// for循環(huán),每次從原數(shù)組中取出一個元素

// 用取出的元素循環(huán)與結(jié)果數(shù)組對比

for (var i = 1; i < this.length; i++) {

var repeat = false;

for (var j=0; j < newArray.length; j++) {

// 原數(shù)組取出的元素與結(jié)果數(shù)組元素相同

if(this[i] == newArray[j]) {

repeat = true;

break;

}

}

if(!repeat) {

// 如果結(jié)果數(shù)組中沒有該元素,則存放到結(jié)果數(shù)組中

newArray.push(this[i]);

}

}

return newArray;

}

假設(shè)我們有一個這樣的數(shù)組:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1',`2`];

arr.unique1(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5]

據(jù)說這種方法比較耗時,費性能。簡單做個測試(測試方法寫得比較拙逼):

function test () {

var arr = [];

for (var i = 0; i < 1000000; i++) {

arr.push(Math.round(Math.random(i) * 10000));

}

doTest(arr, 1);

}

function doTest(arr, n) {

var tStart = (new Date()).getTime();

var re = arr.unique1();

var tEnd = (new Date()).getTime();

console.log('雙重循環(huán)去重方法使用時間是:' + (tEnd - tStart) + 'ms');

return re;

}

test();

在Chrome控制器運行上面的代碼,測試雙重循環(huán)去重所費時間:11031ms。

上面的方法可以使用forEach()方法和indexOf()方法模擬實現(xiàn):

function unique1() {

var newArray = [];

this.forEach(function (index) {

if (newArray.indexOf(index) == -1) {

newArray.push(index);

}

});

return newArray;

}

通過unique1.apply(arr)或unique1.call(arr)調(diào)用。不過這種方法效率要快得多,同樣的上面測試代碼,所費時間5423ms,幾乎快了一半。

排序遍歷去重

先使用sort()方法對原數(shù)組做一個排序,排完序之后對數(shù)組做遍歷,并且檢查數(shù)組中的第i個元素與結(jié)果數(shù)組中最后一個元素是否相同。如果不同,則將元素放到結(jié)果數(shù)組中。

Array.prototype.unique2 = function () {

// 原數(shù)組先排序

this.sort();

// 構(gòu)建一個新數(shù)組存放結(jié)果

var newArray = [];

for (var i = 1; i < this.length; i++) {

// 檢查原數(shù)中的第i個元素與結(jié)果中的最后一個元素是否相同

// 因為排序了,所以重復(fù)元素會在相鄰位置

if(this[i] !== newArray[newArray.length - 1]) {

// 如果不同,將元素放到結(jié)果數(shù)組中

newArray.push(this[i]);

}

}

return newArray;

}

例如:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];

arr.unique2(); // ["1", 1, 2, "2", 3, 32, 34, 4, 5, 56, "a", "b", "c"]

這種方法有兩個特色:

去重后的數(shù)組會做排序,主要是因為原數(shù)在去重前做了排序

去重后的數(shù)組,與數(shù)字相同的數(shù)字字符無法區(qū)分,比如'1'和1

使用同樣的方法,測試所費時間:1232ms。

對象鍵值對法

這種去重方法實現(xiàn)思路是:

創(chuàng)建一個JavaScript對象以及新數(shù)組

使用for循環(huán)遍歷原數(shù)組,每次取出一個元素與JavaScript對象的鍵做對比

如果不包含,將存入對象的元素的值推入到結(jié)果數(shù)組中,并且將存入object對象中該屬性名的值設(shè)置為1

代碼如下:

Array.prototype.unique3 = function () {

// 構(gòu)建一個新數(shù)組存放結(jié)果

var newArray = [];

// 創(chuàng)建一個空對象

var object = {};

// for循環(huán)時,每次取出一個元素與對象進(jìn)行對比

// 如果這個元素不重復(fù),則將它存放到結(jié)果數(shù)中

// 同時把這個元素的內(nèi)容作為對象的一個屬性,并賦值為1,

// 存入到第2步建立的對象中

for (var i = 0; i < this.length; i++){

// 檢測在object對象中是否包含遍歷到的元素的值

if(!object[typeof(this[i]) + this[i]]) {

// 如果不包含,將存入對象的元素的值推入到結(jié)果數(shù)組中

newArray.push(this[i]);

// 如果不包含,存入object對象中該屬性名的值設(shè)置為1

object[typeof(this[i]) + this[i]] = 1;

}

}

return newArray;

}

運行前面的示例:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];

arr.unique3(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

同樣的,不同的鍵可能會被誤認(rèn)為一樣;例如: a[1]、a["1"] 。這種方法所費時間:621ms。 這種方法所費時間是最短,但就是占用內(nèi)存大一些。

除了上面幾種方法,還有其他幾種方法如下:

// 方法四

Array.prototype.unique4 = function () {

// 構(gòu)建一個新數(shù)組存放結(jié)果

var newArray = [];

// 遍歷整個數(shù)組

for (var i = 0; i < this.length; i++) {

// 遍歷是否有重復(fù)的值

for (j = i + 1; j < this.length; j++) {

// 如果有相同元素,自增i變量,跳出i的循環(huán)

if(this[i] === this[j]) {

j = ++i;

}

}

// 如果沒有相同元素,將元素推入到結(jié)果數(shù)組中

newArray.push(this[i]);

}

return newArray;

}

Chrome測試結(jié)果

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];

arr.unique4(); // ["a", 1, 3, 4, 56, 32, 34, 2, "b", "c", 5, "1", "2"]

同樣的,1和'1'無法區(qū)分。

// 方法五

Array.prototype.unique5 = function () {

// 構(gòu)建一個新數(shù)組存放結(jié)果

var newArray = [];

// 遍歷整個數(shù)組

for (var i = 0; i < this.length; i++) {

// 如果當(dāng)前數(shù)組的第i值保存到臨時數(shù)組,那么跳過

var index = this[i];

// 如果數(shù)組項不在結(jié)果數(shù)組中,將這個值推入結(jié)果數(shù)組中

if (newArray.indexOf(index) === -1) {

newArray.push(index);

}

}

return newArray;

}

Chrome測試結(jié)果:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];

arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

同樣的,類似于1和'1'無法區(qū)分。所費時間:14361ms。

// 方法六

Array.prototype.unique6 = function () {

return this.reduce(function (newArray, index) {

if(newArray.indexOf(index) < 0) {

newArray.push(index);

}

return newArray;

},[]);

}

測試結(jié)果如下:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];

arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

所費時間:16490ms。

// 方法七

Array.prototype.unique7 = function(){

var newArray;

newArray = this.filter(function (ele,i,arr) {

return arr.indexOf(ele) === i;

});

return newArray;

}

測試結(jié)果:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];

arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

所費時間:13201ms。

方法雖然很多種,但相比下來,下面這種方法是較為優(yōu)秀的方案:

Array.prototype.unique3 = function () {

// 構(gòu)建一個新數(shù)組存放結(jié)果

var newArray = [];

// 創(chuàng)建一個空對象

var object = {};

// for循環(huán)時,每次取出一個元素與對象進(jìn)行對比

// 如果這個元素不重復(fù),則將它存放到結(jié)果數(shù)中

// 同時把這個元素的內(nèi)容作為對象的一個屬性,并賦值為1,

// 存入到第2步建立的對象中

for (var i = 0; i < this.length; i++){

// 檢測在object對象中是否包含遍歷到的元素的值

if(!object[typeof(this[i]) + this[i]]) {

// 如果不包含,將存入對象的元素的值推入到結(jié)果數(shù)組中

newArray.push(this[i]);

// 如果不包含,存入object對象中該屬性名的值設(shè)置為1

object[typeof(this[i]) + this[i]] = 1;

}

}

return newArray;

}

但在ES6去重還有更簡單,更優(yōu)化的方案,比如:

// ES6

function unique (arr) {

const seen = new Map()

return arr.filter((a) => !seen.has(a) && seen.set(a, 1))

}

// or

function unique (arr) {

return Array.from(new Set(arr))

}

以上所述是小編給大家介紹的JavaScript學(xué)習(xí)筆記之?dāng)?shù)組去重,希望對大家有所幫助!

更多信息請查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:JavaScript學(xué)習(xí)筆記之?dāng)?shù)組去重
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機(jī)號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機(jī)站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)