JS 學習筆記 : Set & Filter


Posted by mumu892101 on 2021-09-01

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. 如果一個陣列中有重複的元素,透過 setarray 的轉換能取得所有單一的元素
     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()

接下來也簡單介紹 filterfilter 能夠將陣列遍歷後,留下符合設定條件的元素,並返回一個新的陣列。
例如上述尋找差集的案例,設定的條件是 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 中 setfilter 的簡單整理。


#js #React #set #filter







Related Posts

單元測試的藝術, 2/e (The Art of Unit Testing: with examples in C#,  2/e)

單元測試的藝術, 2/e (The Art of Unit Testing: with examples in C#, 2/e)

Geolocation based Speedometer and Compass

Geolocation based Speedometer and Compass

前言

前言


Comments