--- tags: JS 直播班 - 2022 秋季班 --- # 🏅 Day 42 - 商品篩選功能 - 進階 延續 [Day 41 的每日任務](https://hackmd.io/DnpW7lGISUahPWW6ypT8NA)，使用 [這個 CodePen](https://codepen.io/hexschool/pen/zYaZOQB?editors=1010) 練習。請嘗試不要將 select 欄位寫死，而是使用 axios 取回的 products 資料，篩選出產品的 category 後再渲染至網頁上。 ![](https://i.imgur.com/HRDjaot.png) 教學 --- 今天的每日任務有稍微超出課程錄影的範圍，因此提供小教學讓大家做額外練習。 這個任務會用到 [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。 ```javascript= 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 行） ```javascript= let unSort = productData.map(function(item) { return item.category; }); console.log(unSort); // 結果為 ["床架","床架","窗簾","床架","收納","床架","收納","床架"] ``` ### 步驟三：移除重複的 category 名稱 > 透過 filter() 針對 unSort 做篩選，並指派給 sorted 這個變數（JS 第 69 - 72 行） ```javascript= let sorted = unSort.filter(function(item, i){ // 因為 indexOf() 只會回傳第一個找到的匹配元素之索引，搭配 filter() 做判斷就可以只保留不重複的元素 return unSort.indexOf(item) === i; }) console.log(sorted); // 結果為 ["床架","窗簾","收納"] ``` ![](https://i.imgur.com/9HhIjvx.png) ### 步驟四：進行畫面渲染 > 參考 JS 第 76 - 82 行的函式 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： 請記得填入自己的 API 名稱 https://codepen.io/hexschool/pen/wvXJwLR?editors=1011 --> 回報區 --- | Discord | CodePen / 答案 | |:----------:|:-------------------------------------------------------:| | 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/dyKjZrJ?editors=0011) | | YC#2522 | [CodePen](https://codepen.io/YCLu/pen/qBKxRqM) | |AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/mdKjpra)| |jimmyFang#9575|[CodePen](https://codepen.io/pohxiqqo/pen/bGKjprr?editors=1011)| | LHchien33#6232 |[CodePen](https://codepen.io/lin_chien/pen/qBKypRo)| | 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/NWzBXvq) | |威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/XWYBVZe)| |Kimi #9564|[CodePen](https://codepen.io/kimihu91/pen/ZERRPRQ)| |mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/PoaBEQM)| |無名#6427|[CodePen](https://codepen.io/Nomoney/pen/LYrBeJg)| |圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/BaVPJbo)| |kenki100#0068|[Codepen](https://codepen.io/ken100/pen/qBKyoGX)| |RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/PoaBeqV)| |我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/oNyMqMw)| |Ruby Chen#7452|[CodePen](https://codepen.io/ruby92429/pen/yLEqEVv?editors=1010)| |Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/zYaLJwd?editors=0011)| |Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/gOKjzMq) | |Hironaka#7367|[codepen](https://codepen.io/Hironaka0815/pen/gOKjqgP) | |PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/MWXBLdz)| |hannahTW#2224|[CodePen](https://codepen.io/hangineer/pen/WNyKBvR?editors=0011)| |yawun#0042|[CodePen](https://codepen.io/monicalin/pen/mdKjQzx)| | azami#5986 |[CodePen](https://codepen.io/azami/pen/PoaBqbb)| | yen#5757 |[CodePen](https://codepen.io/TZU-HUANG-YEN/pen/GRGBOvQ?editors=0010)| | shinyhung#3825 |[CodePen](https://codepen.io/sean_1215/pen/ZERjaVb)| |軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/oNyPxbV?editors=0010)| |m_m#5493|[CodePen](https://codepen.io/minnn7716/pen/JjZaKmb)| |masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/abKKxZE?editors=1010)| |SASIMI#5099|[CodePen](https://codepen.io/sashimi1327/pen/mdKGWqa)| |WEI_RIO#9342|[CodePen](https://codepen.io/wei_wu/pen/PoaBOMX?editors=1011)| |beta lin#1445|[CodePen](https://codepen.io/linbeta/pen/ExRevRw)| |Barret#1119|[codepen](https://codepen.io/barret0720/pen/xxzywpb?editors=1111)| |出示了阿伯#9923|[codepen](https://codepen.io/BradpittLai/pen/MWXPVQZ?editors=1011)| | 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/OJEopNr) |Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/poKQeLM)| |sophiee7015|[codepen](https://codepen.io/sophiee2727/pen/qBKLBMe?editors=1011)| |黑白兔#0684|[codepen](https://codepen.io/johnny329/pen/wvXRdrL)| |Hilda#7085|[codepen](https://codepen.io/vwquikad-the-vuer/pen/xxzmyGg)| |Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/QWxYVgm?editors=1011)| |Shuo#1596|[CodePen](https://codepen.io/chiangchungshuo/pen/GRGbeQQ)| |蓁心#6229|[CodePen](https://codepen.io/tlorfrnl-the-typescripter/pen/LYBPqxJ?editors=0011)|