目錄

• 前言👀
  
• 開始研究🐱‍🏍
  
• 原始🧶
  
• 利用indexOf優化原始方法✍
  
• 再次優化，filter方法🎉
  
• 換種思路？變成有序陣列✨
  
• 再再次優化，filter🧨
  
• ES6，Set來襲🧸
  
• 最後📖

前言👀

陣列去重應該是一個很常見的問題了，既然是常見的，那我們就更應該來學習一下！

免得自己不會，尷尬呀~ 嘿嘿

開始研究🐱‍🏍

原始🧶

陣列去重，最開始我的思路是這樣：定義一個新陣列，完後兩層for迴圈，如果資料第一次出現，就push到新數組裡，如果重複就break掉，利用j的值與res長度相等這一點來判斷資料唯一，最後返回新陣列就行了。

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

function unique(arr){
	var res = []
	for(var i = 0; i < arr.length; i++){
		for(var j = 0; j < res.length; j ++){
			ihttp://www.cppcns.comf(arr[i] === res[j]){
				break
			}
		}
		// 如果資料第一次出現，那麼執行完上面for語句後，j的值應該等於res的長度才對
		if(j === res.length){
			res.push(arr[i])
		}
	}
	return res;
}

console.log(unique(arr));

利用indexOf優化原始方法✍

我們先來簡單瞭解一下indexOf：

indexOf(http://www.cppcns.comitem,start) 方法可返回陣列中某個指定的元素位置。

該方法將從頭到尾地檢索陣列，看它是否含有對應的元素。開始檢索的位置在陣列 start 處或陣列的開頭（沒有指定 start 引數時）。如果找到一個 item，則返回 item 的第一次出現的位置。開始位置的索引為 0。

如果在陣列中沒找到指定元素則返回 -1。

看到這大家都明白我們利用的是哪一點了吧，沒錯，就是加粗的那一句話：如果在陣列中沒找到指定元素則返回 -1。

var arr = [1,'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));

再次優化，filter方法🎉

filter，顧名思義，過濾的意思，該方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。

思路：用filter代替一層迴圈與indexOf配合，達到過濾效果，直接返回去重過後的陣列。

var arr = [1,KgwWk'3','66']

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

換種思路？變成有序陣列✨

不知道刷過幾天力扣的小夥伴們有沒有這種感覺，看見題目中出現數組，眼睛就立刻往前瞄了瞄，看看是有序陣列還是無序陣列~

回到這個問題www.cppcns.com上，我們將要去重的陣列變成有序，重複的資料肯定都挨著了，用一個變數存放上一個元素值，再迴圈判斷當前值與上一個元素值是否相同，如果不相同，就將它新增到res中。

var arr = [1,'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));

再再次優化，filter🧨

剛剛悟了~，filter好像也可以把排序這裡重寫一下，變得更為簡潔，我們直接看程式碼：

var arr = [1,'66']

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

console.log(unique(arr));

ES6，Set來襲🧸

ES6給我們帶來了很多好處，其中，map、set尤為優秀。

Map 物件儲存鍵值對。任何值(物件或者原始值) 都可以作為一個鍵或一個值。

Set 物件允許你儲存任何型別的唯一值，無論是原始值或者是物件引用。

所以我們可以利用Set的這一特性，來進行去重處理。

var arr = [1,'66']

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

console.log(unique(arr));

注：Set是對象，所以要轉成陣列進行返回。

懂解構賦值的你，可以再簡化一點🧵

var arr = [1,'66']

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

console.log(unique(arr));

想了解一下解構賦值的也可以先康康這個：解構運算子的理解與運用

之前學習，記錄的筆記🎨

繼續優秀下去（箭頭函式）🏆

var arr = [1,'66']
var unique = (arr) => [...new Set(arr)]
console.log(unique(arr));

最後📖

從最開始的好幾行程式碼，到最後利用箭頭函式，可以一行就寫完，足以見得，只有不斷學習，才能寫出更優雅簡潔的程式碼。

到此這篇關於陣列去重問的文章就介紹到這了,更多相關Script陣列去重內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！