JS 學習筆記 : Set & Filter

set 是 ES6 中提出的一個新的資料結構，一樣看到在 PJCHENDer - [JS] JavaScript 集合（Set） 的筆記中所提到的 :

ES6 中如果希望「陣列（Array）」的元素不會重複，可以使用 Set。

set 這個類似陣列的資料結構中，所有的元素都是唯一值，也沒有順序。

另外，filter 語法在操作 set 的交集時會用到，同時在寫 React 的時候，同樣是在 Todolist 的範例中，當我們要刪除指定 id 的 Todoitem，也會用到 filter ，因此這一篇文章中，也會稍微的寫到使用 filter 的情況。

set()

set 基礎用法 :

1. 建立一個空的 set

   const setOne = new Set()
   

2. 建立一個有資料的 set (舉例 : 叮叮旅遊過的地方)

   const dingTouristPlace = new Set(['東京', '倫敦', '廣州', '首爾'])
   

3. 在原有的 set 加入新的值

   dingTouristPlace.add('巴黎')
   

4. 不能加入重複的值，所以不會出現兩個重複的元素

   dingTouristPlace.add('東京')
   console.log(dingTouristPlace) //Set { '東京', '倫敦', '廣州', '首爾', '巴黎' }
   

5. 刪除其中一個值的方式

   dingTouristPlace.delete('東京')
   console.log(dingTouristPlace) //Set { '倫敦', '廣州', '首爾', '巴黎' }
   

6. 知道一個 set 中有幾個值

   console.log(dingTouristPlace.size) //4
   

7. 查詢 set 中有沒有特定值

   console.log(dingTouristPlace.has('首爾')) // true
   console.log(dingTouristPlace.has('紐約')) // false
   

8. 清除全部內容的方式

   dingTouristPlace.clear()
   

進階用法 :

1. 陣列 / 集合(set) 互換

    const numSet = new set([1, 2, 3, 4, 5])
   
    // Set 轉成 Array 的兩個方法
    const numArray = [...numset];  
    const numArray = Array.from(numSet);
   
    // Array 轉成 Set
    const numSetTwo = new Set(numArray);
   

2. 如果一個陣列中有重複的元素，透過 set 與 array 的轉換能取得所有單一的元素

    const numArray = [1, 1, 2, 3, 4, 5, 5]
    const numSet = new Set(numArray)
    const newNumArray = [...numSet]
    console.log(newNumArray) // [ 1, 2, 3, 4, 5 ]
   

3. 兩個 set 的聯集

   const dingTouristPlace = new Set(['東京', '首爾', '曼谷',])
   const VivianTouristPlace = new Set(['東京', '首爾', '紐約'])
   const TouristPlace = [...dingTouristPlace,...VivianTouristPlace]
   const TouristPlaceSet = new Set(TouristPlace)
   console.log([...TouristPlaceSet]) // ['東京', '首爾', '曼谷', '紐約']
   

4. 兩個陣列的交集
   在這裡我們會使用到 filter 的語法， filter 是陣列使用的語法。

   const dingTouristPlace = ['東京', '首爾', '曼谷',]
   const vivianTouristPlace = ['東京', '首爾', '紐約']
   const vivianSet = new Set(vivianTouristPlace)
   console.log(dingTouristPlace.filter(place => vivianSet.has(place))) // [ '東京', '首爾' ]
   

5. 兩個陣列的差集

    const dingTouristPlace = ['東京', '首爾', '曼谷',]
    const vivianTouristPlace = ['東京', '首爾', '紐約']
    const dingSet = new Set(dingTouristPlace)
    const vivianSet = new Set(vivianTouristPlace)
   
    const dingPlace = dingTouristPlace.filter( place => 
      !vivianSet.has(place)
    )
    console.log(dingPlace) // ['曼谷']
   

filter()

接下來也簡單介紹 filter，filter 能夠將陣列遍歷後，留下符合設定條件的元素，並返回一個新的陣列。
例如上述尋找差集的案例，設定的條件是 vivianSet 中不包含的元素，
因此只有 '曼谷' 會被返回，並回傳為一個新的陣列，用新的變數去接住。

const dingTouristPlace = ['東京', '首爾', '曼谷',]
const vivianTouristPlace = ['東京', '首爾', '紐約']
const dingSet = new Set(dingTouristPlace)
const vivianSet = new Set(vivianTouristPlace)

const dingPlace = dingTouristPlace.filter( place => 
  !vivianSet.has(place)
)
console.log(dingPlace) // ['曼谷']

Todolist 的刪除原理也是，將所有 Todoitem 都遍歷一次後，設定條件為不符合指定 id 的 Todoitem 可以留下，因此新的陣列中，指定 id 的 Todoitem 就會被刪去了。

const handleDeleteTodo = (id) => {
  const deleteTodos = todos.filter((todo) => todo.id !== id);
  setTodos(deleteTodos);
};

以上，就是對 Jacascript 中 set 和 filter 的簡單整理。