# 🏅 DAY42 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

問題
---
延續 [DAY41 的每日任務](https://hackmd.io/yv2P4bjkR7yyNYxGM6yZaA)，使用 [這個 CodePen](https://codepen.io/znlcgmgk/pen/yLgpqNV) 練習。請嘗試不要將 select 欄位寫死，而是使用 axios 取回的 products 資料，篩選出產品的 category 後再渲染至網頁上。


教學
---
今天的每日任務有稍微超出課程錄影的範圍，因此提供小教學讓大家做額外練習。
這個任務會用到 [filter() 函式](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 與 [map() 函式](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map)，再加上 [indexOf() ](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) 的觀念，同學可以直接觀看解答再自己練習看看。

#### indexOf() 介紹:
> 可以用 indexOf() 去尋找某個元素是否存在於陣列之中，會回傳陣列中第一個被找到的指定元素索引，若不存在於陣列中則回傳 -1。

const fruits = ['apple', 'banana', 'banana', 'orange'];
console.log(fruits.indexOf('banana')); // 結果為 1，會回傳第一個找到的 banana 元素之索引
console.log(fruits.indexOf('lemon')); // 結果為 -1，因為 lemon 不存在於陣列中

### 教學開始 (請搭配 [解答](https://codepen.io/znlcgmgk/pen/JjEOxby?editors=1011) 觀看)
#### 步驟一: 透過 axios 取得 product 資料
> 範例是將 product 資料存放於 productData 變數 (JS 第 12 行)

#### 步驟二: 取得所有產品的 category 名稱
> 透過 map() 針對 productData 做處理，它可以只取出所有產品的 category 名稱，並指派給 unSort 這個變數 (JS 第 64 - 66 行)

let unSort = productData.map(function(item) {
    return item.category;
});
console.log(unSort); // 結果為 ["床架","床架","窗簾","床架","收納","床架","收納","床架"]

#### 步驟三: 移除重複的 category 名稱
> 透過 filter() 針對 unSort 做處理，並指派給 sorted 這個變數 (JS 第 69 - 72 行)

let sorted = unSort.filter(function(item, i){
    // 因為 indexOf() 只會回傳第一個找到的匹配元素之索引，搭配 filter() 做判斷就可以只保留不重複的元素
    return unSort.indexOf(item) === i;
})
console.log(sorted); // 結果為 ["床架","窗簾","收納"]


#### 步驟四: 進行畫面渲染
> 參考 JS 第 76 - 82 行的函式

回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）


<!-- 解答
https://codepen.io/znlcgmgk/pen/JjEOxby?editors=1011
-->

| Slack | CodePen |
|:----------------:|:-------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/full/RwLNJvG |
|CloThEs |https://codepen.io/bogwdnxx-the-sans/pen/wvrMOLP|
|lumei|https://codepen.io/l_umei/pen/rNGxbNb|
| Iris Huang| https://codepen.io/ythuang/pen/qBPbvzE |
|Cheng Pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
| YC | https://codepen.io/YCLu/pen/WNZrWWW |
| 米米 | https://codepen.io/Jameshsu0407/pen/LYzGKWv |
| Yunei | https://codepen.io/Yunei/pen/XWeXQEb |
| POPEYE | https://codepen.io/popeye_ux/pen/OJxMGjv |
|Calon|https://codepen.io/Calon0118/pen/YzrwmaQ|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/NWaNRxY?editors=1010 |
|Aaron Tu|https://github.com/ken888686/Hexschool-Final|
| Kelvin Hsu | https://codepen.io/kelvin001/pen/RwLaYdj?editors=1011 |
|Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/rNGxWaW |
| 小K | https://codepen.io/kelen1995/pen/LYzNMox |
| Steven Chan |https://codepen.io/Steven1220/pen/XWeKrQg |
| 劉維倫 | https://codepen.io/lun0223/pen/yLzJXeV?editors=1010 |
|鄭安志|https://codepen.io/lwmtsgek/pen/YzrqgbX?editors=1010|
|Louis|https://codepen.io/Louis164156/pen/zYErXRG?editors=1111|
|張喆|https://codepen.io/wow767t/pen/wvrzarY|
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/GRMjprL?editors=0010|
|tingyu|https://codepen.io/dgltu/pen/vYeXxeN?editors=1011|
|LTL|https://codepen.io/ltlin93/pen/GRMNpYa|
| 傅劍軒 | https://codepen.io/seonkuraito/pen/vYeLPMK |
|Genos|https://codepen.io/pb220416/pen/WNZoyGz|
|Trista|https://codepen.io/trista6140/pen/xxXgXrv|
paul|https://codepen.io/printfootya/pen/oNGBwYw?editors=1111|
|YuriT|https://codepen.io/wenfisht/pen/qBPrEqY|
|AKI|https://codepen.io/akichen27/pen/NWaNqQN|
|Jasper|https://codepen.io/li-jasper/pen/oNGZVxL|
|Hamaji|https://codepen.io/hamajibashi/pen/gOGWVjq |
|ZY Hsu|https://codepen.io/zihyin/pen/ExwXJGW?editors=0011 |