JavaScript數(shù)組去重問(wèn)題如何解決

這篇文章主要介紹了JavaScript數(shù)組去重問(wèn)題如何解決的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇JavaScript數(shù)組去重問(wèn)題如何解決文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

原始

數(shù)組去重，最開始我的思路是這樣：定義一個(gè)新數(shù)組，完后兩層for循環(huán)，如果數(shù)據(jù)第一次出現(xiàn)，就push到新數(shù)組里，如果重復(fù)就break掉，利用j的值與res長(zhǎng)度相等這一點(diǎn)來(lái)判斷數(shù)據(jù)唯一，最后返回新數(shù)組就行了。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	for(var i = 0; i < arr.length; i++){
		for(var j = 0; j < res.length; j ++){
			if(arr[i] === res[j]){
				break
			}
		}
		// 如果數(shù)據(jù)第一次出現(xiàn)，那么執(zhí)行完上面for語(yǔ)句后，j的值應(yīng)該等于res的長(zhǎng)度才對(duì)
		if(j === res.length){
			res.push(arr[i])
		}
	}
	return res;
}

console.log(unique(arr));

利用indexOf優(yōu)化原始方法

我們先來(lái)簡(jiǎn)單了解一下indexOf：

indexOf(item,start) 方法可返回?cái)?shù)組中某個(gè)指定的元素位置。

該方法將從頭到尾地檢索數(shù)組，看它是否含有對(duì)應(yīng)的元素。開始檢索的位置在數(shù)組 start 處或數(shù)組的開頭（沒(méi)有指定 start 參數(shù)時(shí)）。如果找到一個(gè) item，則返回 item 的第一次出現(xiàn)的位置。開始位置的索引為 0。

如果在數(shù)組中沒(méi)找到指定元素則返回 -1。

看到這大家都明白我們利用的是哪一點(diǎn)了吧，沒(méi)錯(cuò)，就是加粗的那一句話：如果在數(shù)組中沒(méi)找到指定元素則返回 -1。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	for(var i = 0; i < arr.length; i++){
		if(res.indexOf(arr[i]) === -1){
			res.push(arr[i])
		}
	}
	return res;
}

console.log(unique(arr));

再次優(yōu)化，filter方法

filter，顧名思義，過(guò)濾的意思，該方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。

思路：用filter代替一層循環(huán)與indexOf配合，達(dá)到過(guò)濾效果，直接返回去重過(guò)后的數(shù)組。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = arr.filter(function(item,index,arr){
		return arr.indexOf(item) === index
	})
	return res;
}
console.log(unique(arr));

換種思路？變成有序數(shù)組

不知道刷過(guò)幾天力扣的小伙伴們有沒(méi)有這種感覺(jué)，看見(jiàn)題目中出現(xiàn)數(shù)組，眼睛就立刻往前瞄了瞄，看看是有序數(shù)組還是無(wú)序數(shù)組~

回到這個(gè)問(wèn)題上，我們將要去重的數(shù)組變成有序，重復(fù)的數(shù)據(jù)肯定都挨著了，用一個(gè)變量存放上一個(gè)元素值，再循環(huán)判斷當(dāng)前值與上一個(gè)元素值是否相同，如果不相同，就將它添加到res中。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	var pre
	arr = arr.sort()
	for(var i = 0; i < arr.length; i++){
		if(!i || pre !== arr[i]){
			res.push(arr[i])
		}
		pre = arr[i]
	}
	return res;
}

console.log(unique(arr));

再再次優(yōu)化，filter

剛剛悟了~，filter好像也可以把排序這里重寫一下，變得更為簡(jiǎn)潔，我們直接看代碼：

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = arr.sort().filter(function(item,index,arr){
		return !index || item !== arr[index - 1]
	})
	return res;
}

console.log(unique(arr));

ES6，Set來(lái)襲

ES6給我們帶來(lái)了很多好處，其中，map、set尤為優(yōu)秀。

Map 對(duì)象保存鍵值對(duì)。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。

Set 對(duì)象允許你存儲(chǔ)任何類型的唯一值，無(wú)論是原始值或者是對(duì)象引用。

所以我們可以利用Set的這一特性，來(lái)進(jìn)行去重處理。

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	return Array.from(new Set(arr))
}

console.log(unique(arr));

注：Set是對(duì)象，所以要轉(zhuǎn)成數(shù)組進(jìn)行返回。

懂解構(gòu)賦值的你，可以再簡(jiǎn)化一點(diǎn)

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	return [...new Set(arr)]
}

console.log(unique(arr));

想了解一下解構(gòu)賦值的也可以先康康這個(gè)：解構(gòu)運(yùn)算符的理解與運(yùn)用

繼續(xù)優(yōu)秀下去（箭頭函數(shù)）

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
var unique = (arr) => [...new Set(arr)]
console.log(unique(arr));

關(guān)于“JavaScript數(shù)組去重問(wèn)題如何解決”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“JavaScript數(shù)組去重問(wèn)題如何解決”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。