JAVASCRIPT初學筆記41 三種取出陣列中不重複元素的方法

昨天在codewar看到一個基本題，大致的內容是要將陣列內的數字分為不重複的奇數偶數並分別按照升冪與降冪排列重新結合成一個新陣列。題目本身倒不是太重要，雖然是個很基礎的題目，卻也讓我複習了一下陣列的處理! 讓我們來看看如何做出不重複元素的陣列吧!

方法一 :forEach

const arr = [1,4,2,5,5,7,9]

function removeDuplicate(arr){
  const empty=[]
  arr.forEach(item=>{
    empty.includes(item)?'':empty.push(item)
  })
  return empty
}

console.log(removeDuplicate(arr)//[1,4,2,5,7,9] 

這應該算是新手最直觀會想到的做法了，當然用for loop也能做到同樣的事情。
概念相當簡單，先建立一個空陣列，接著利用迴圈配合判斷式將不重複的元素推進空陣列中，非常簡單直觀，缺點大概是有些過於冗長。

方法二 :reduce

const arr = [1,4,2,5,5,7,9]

function removeDuplicate(arr){
  const result = arr.reduce((obj,item)=>{
    obj[item]=1
    return obj
  },{})
  return Object.keys(result).map(item=>{
    return Number(item)
  })
}

console.log(removeDuplicate(arr)//[1,4,2,5,7,9]  

這個做法相對的比較不直覺，一般來說我們reduce會想到的只有加總或統計次數，但其實也可以透過這樣的做法配合Object.keys()取出不重複的元素。
概念是透過建立一個空物件，接著將出現過的元素設為一(變成一種奇怪的key-value pair 所有的value都是1，而key就是各個不重複的元素)，最後再將所有key值印出。由於在物件內的數值並不會經過轉型，在沒有經過額外處理時你會得到[“1″,"4″,"2″,"5″,"7″,"9″]的結果
於是我另外做了一層處理讓結果以數字呈現。

方法三: set & 擴展運算子(spread operator)

const arr = [1,4,2,5,5,7,9] 
arr = ([...new Set(arr)]) 
console.log(arr)

最為精簡的做法，需要使用set & 擴展運算子來達到這樣的結果，先簡單介紹一下set的用法。

const newSet = new Set()
[1,4,2,5,5,7,9].forEach(item=>{
   newSet.add(item)
})
console.log(newSet) //   Set { 1, 4, 2, 5, 7, 9 }

set本身是一個建構函數，會建立出一個類似陣列的物件，其中將不存在重複的元素。
同時set也可以接受陣列做為一個參數，會排除掉重複的元素並回傳一組set

const newSet = new Set([1,4,2,5,5,7,9])
console.log(newSet)  //   Set { 1, 4, 2, 5, 7, 9 } 

了解以上用法之後，接著就只要配合擴展運算子便可以將整組set展開並存為一個新陣列囉!
算是三種方法中我最喜歡的一種了，ES6引進的set是很實用的概念!

今天介紹了三種取出不重複元素的方法，也算是複習了一下一些陣列的處理~!希望有看到的人有所收穫囉!