---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 42 - 商品篩選功能 - 進階

延續 [Day 41 的每日任務](https://hackmd.io/mpk1C_vKRnCre4FjU6x-BA)，使用 [這個 CodePen](https://codepen.io/hexschool/pen/zYaZOQB?editors=1010) 練習。請嘗試不要將 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/hexschool/pen/wvXJwLR?editors=1011) 觀看）
### 步驟一：透過 axios 取得 product 資料
> 範例是將 product 資料存放於 productData 變數（JS 第 12 行）

### 步驟二：取得所有產品的 category 名稱
> 透過 map() 針對 productData 做處理，return 取出所有產品的 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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

請記得填入自己的 API 名稱
https://codepen.io/hexschool/pen/wvXJwLR?editors=1011
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/VwgqaKg?editors=1010)|
|Celine 510|[CodePen](https://codepen.io/Celine-510/pen/MWLZyzV)|
|lychee_kk|[CodePen](https://codepen.io/kakakala/pen/gOqZrmO?editors=1010)|
|楓仔|[CodePen](https://codepen.io/maplestartend/pen/qBgLZJv?editors=1010)|
| Uli | [CodePen](https://codepen.io/uli1313/pen/YzBdqJK?editors=1011) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/NWoyBVy) |
| Eden |[Codepen](https://codepen.io/iseden/pen/abXPZyo)|
| ⭐️小正 |[Codepen](https://codepen.io/colorgolden/pen/abXPZpe?editors=1111)|
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/ZEwVpQY) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/xxMmEbE) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/rNPojYb)|
| kawa | [CodePen](https://codepen.io/z83xji6/pen/jOdXyXQ?editors=1011) |
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/qBgLrRm) |
| dora | [CodePen](https://codepen.io/dorayu/pen/bGzOeKM?editors=1011) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/abXPLjR?editors=1011) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/ZEwVazR)|
|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/dyawZgp)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/QWYzZRg?editors=1011)|
|Alyce|[CodePen](https://codepen.io/alycehwy/pen/JjxwLgX)|
|ann6212|[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/eYxbyMZ)|
|奔跑吧(GTR150)|[CodePen](https://codepen.io/Wer-Qwe/pen/jOddZxM?editors=1011)|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/VwggXVe) |
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/xxMJyRx) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/ZEwPqyW) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/mdvgJMj) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/mdvNvqO?editors=1010) |

<!--快速複製
| Discord | [CodePen]() |
-->