JavaScript 還不錯用的 set

最近才發現這個好用的方法。

簡述

new Set 是 ES6 推出的一種資料型態，如果你不希望「Array 裡出現重複的值」，這個絕對好用。

先來看個簡短的範例，你大概就知道用法了：

const obj = {
  name: 'PeaNu'
}

const mySet = new Set() // {}

mySet.add(1)
mySet.add(1) // 重複的不會放進去
mySet.add(3)
mySet.add(3) // 重複的不會放進去
mySet.add(5)
mySet.add(6)
mySet.add(obj)

console.log(mySet) // { 1, 3, 5, 6, {name: 'PeaNu'} }
console.log(mySet.has(3)) // true
console.log(mySet.has(4)) // false

console.log(mySet.delete(obj)) // true 刪除成功
console.log(mySet.delete(7)) // false 刪除失敗
console.log(mySet) // { 1, 3, 5, 6 }
console.log(mySet.size) // 4

// 下面這幾個還不太確定用途，可以先知道一下就好。
console.log(mySet.entries())
console.log(mySet.keys())
console.log(mySet.values())

接下來會示範幾個實際應用。

過濾掉陣列中重複的元素

因為 new 出來的 Set 會是 Object，所以記得用 ... 轉成 Array 就好了。

const array = [1, 1, 3, 4, 5, 6, 6, 3, 4]
const mySet = new Set(array) // { 1, 3, 4, 5, 6 }
const filterArray = [...mySet] // 轉成 array
console.log(filterArray) // [1, 3, 4, 5, 6]

檢查陣列中是否包含某物件

const classroom = new Set()
const PeaNu = { id: 1, name: 'PeaNu' }
const PPB = { id: 2, name: 'PPB' }
const Nick = { id: 3, name: 'Nick' }

// 把學生加入 Set
classroom.add(PeaNu)
classroom.add(PPB)
classroom.add(Nick)

// 檢查 PeaNu 在不在 Set 裡
if (classroom.has(PeaNu)) {
  console.log(`${PeaNu.name} is in the classroom`)
}

// 移除 Nick
classroom.delete(Nick)

if (!classroom.has(Nick)) {
  console.log('Can not find Nick')
}

// 顯示 Set 的數量
console.log(`Now there are ${classroom.size} students`)