# QUIZ [TOC] --- ## Q1 :::success 【不熟的地方】 - `Array.find()` 可以用來回傳找到的項目 - 後面接的是 `callBack function` ::: ```javascript! const DATA1 = [4, 2, 5, 3, 4, 1, 1, 6, 5, 2, 1]; const DATA2 = [...DATA1]; const RESULT2 = [[1, 1, 1], [2, 2], [3], [4], [5, 5], [6]]; // 由於結果有按照順序，所以先將陣列進行排序 DATA2.sort((a, b) => a - b); // 建立用來存放解答的空陣列 const ans = []; DATA2.forEach((item) => { // 利用 Array.find() 取出符合的陣列，沒有則是 undefined const found = ans.find((arr) => arr[0] === item); if (!found) { // 如果找不到，就推新的陣列進去 ans.push([item]); } else { // 否則就只推數字到符合的陣列裡面 found.push(item); } }); console.log("ans:", ans); console.log("DATA1:", DATA1); console.log("DATA2:", DATA2); console.log("RESULT2:", RESULT2); ``` <iframe height="300" style="width: 100%;" scrolling="no" title="js-group" src="https://codepen.io/NoNameNote/embed/JjxRBNg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/NoNameNote/pen/JjxRBNg"> js-group</a> by AYA (<a href="https://codepen.io/NoNameNote">@NoNameNote</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- ## Q4 :::info - 正常點選白色區塊會伸縮寬度 - 修正點選藍色按鈕也會觸發事件的問題 ::: :::success 【不熟的地方】 - 阻止事件冒泡的語法 ```javascript! event.stopPropagation(); ``` ::: <iframe src="https://codesandbox.io/p/github/Aya-X/try-bubble/main?import=true&embed=1&file=%2Fsrc%2FApp.jsx" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="Aya-X/try-bubble/main" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe> - REPO > <https://github.com/Aya-X/try-bubble> --- ## Q7 :::success 【不熟的地方】 - `fetch` - 回傳 JSON - 也可以接錯誤 ```jsx! fetch(URL) .then(function (response) { return response.json(); }) .then(function (myJson) { console.log(myJson); }); ``` ```jsx! fetch(URL) .then(function (response) { return response.json(); }) .catch((error) => console.error("Error:", error)) .then(function (myJson) { console.log(myJson); }); ``` ::: --- ### Q7-1 :::info - 點擊按鈕後，按鈕會呈現不同的樣式（顯示目前所處在的 tab） ::: - `styled-components` 可以傳遞 `props` ```jsx! ${({ isBorder }) => isBorder && css` border-bottom: 2px solid #52b5d1; `} ``` - 元件部分可以用類別來判斷是否點到按鈕 ```jsx! isBorder={genre === 'top'} ``` - 全部程式碼 ```jsx! import styled, { css } from 'styled-components'; ... <TabButton type='button' isBorder={genre === 'drama'} onClick={() => setGenre('drama')} > drama </TabButton> ... const TabButton = styled.button` padding: 12px 16px; border: none; border-bottom: 2px solid #ffffff; color: #52b5d1; cursor: pointer; transition: border-bottom 0.3s; &:hover { border-bottom: 2px solid #52b5d1; } ${({ isBorder }) => isBorder && css` border-bottom: 2px solid #52b5d1; `} `; ``` --- ### Q7-2-1 :::info - 如何解決畫面延遲問題？ ::: - 加入 `isLoading` 的判斷 ```jsx! const [isLoading, setIsLoading] = useState(true); ``` - 在取得資料前打開，之後關閉 ```jsx! const getData = () => { setIsLoading(true); fetch(`${baseURL}/${genre}`) .then((res) => res.json()) .catch((error) => console.error('Error:', error)) .then((result) => { console.log(result); setData(result); setIsLoading(false); }); }; ``` --- ### Q7-2-2 :::info - 錯誤處理 (genre: drama) ::: - 加入字串判斷 ```jsx! const genreList = ['top', 'fantasy', 'horror']; ``` - 如果不符合，先跳出提示 ```jsx! if (!genreList.includes(genre)) { alert('請選擇正確按鈕'); setIsLoading(true); } ``` - 再補上判斷，只有符合條件才會發送請求 ```jsx! if (genreList.includes(genre)) { getData(); } ``` - 顯示資料時，若是正在讀取中，則改為顯示 LOADING 的文字 - 並只有讀取完，且取得資料後才會顯示列表 ```jsx! return ( <ul> {isLoading && <li>LOADING...</li>} {!isLoading && data && data.map((item, index) => { return <li key={index}>{item}</li>; })} </ul> ); ``` --- ### Q7-3 :::info - 實作類別瀏覽次數功能，每當使用者瀏覽某一類別時，該類別的次數會加一（in memory，不需使用任何 storage / db / api） - 將上述功能獨立製作一個 function (Custom Hook) ::: - function (Custom Hook) - 接收初始值 - 回傳 count, handleClick 出去 ```jsx! function useCount(initCount) { const [count, setCount] = useState(initCount); const handleClick = () => { setCount(count + 1); }; return { count, handleClick }; } ``` - 使用 Hook ```jsx! const topCount = useCount(0); const fantasyCount = useCount(0); const horrorCount = useCount(0); ``` - 綁到按鈕上面，並顯示對應數字 ```jsx! <TabButton type='button' onClick={() => { setGenre('top'); topCount.handleClick(); }} > top ({topCount.count}) </TabButton> ``` <iframe src="https://codesandbox.io/p/github/Aya-X/try-tab-list/main?import=true&embed=1&file=%2Fsrc%2FApp.jsx" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="Aya-X/try-tab-list/main" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe> - REPO > <https://github.com/Aya-X/try-tab-list> --- <!-- --- --> {%hackmd UYCim7nMT--Eci-1SL9eYg %} <!-- --- -->