---
# System prepended metadata

title: Untitled

---



1. 請將陣列裡大於等於5的數字替換成6，並將所以數字進行加總。（請使用Javascript ES6 將步驟和console.log 結果寫出）
let numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 

    **ANS**: ![](https://i.imgur.com/kXDnAHN.png)




2. 請去除以下陣列中重複的值：（請使用Javascript ES6 將步驟和console.log 結果寫出）
let arr =  [1,"a",2,"b","b","2","c", 3,3]

    **ANS**: ![](https://i.imgur.com/sGtP4Rk.png)



3. 在什麼情況會執行非同步Javascript？非同步Javascript的缺點是什麼？該如何克服它的缺點呢？
4. 
    **ANS**: 
    Ajax 操作
    回撥函式是非同步操作最基本的方法。假設需提出多個請求，就容易寫出回撥地獄（Callback hell), 不利於程式碼的閱讀和維護。
    ![](https://i.imgur.com/mf5cXoF.png)

    **Aysnc / Await** （讓非同步的程式碼讀起來更像在寫「同步程式碼」）
    透過 Promise 包裝和使用，的確避免了回撥地獄（Callback hell)
    
    ![](https://i.imgur.com/9PIrZaQ.png)


4. localStorage、sessionStorage 和 cookie的差異和使用情境

    **ANS：**  [參考資料](https://bebeboboha.github.io/2019/06/18/cookie-localstorage-sessionstorage/)
    [](https://)
    <table>
    <tr>
        <th></th>
        <th> localStorage</th>
        <th>sessionStorage</th>
        <th>cookie</th>
    </tr>
    <tr>
        <td>差異</td>
        <td>
            <ul>
                <li>可設定失效時間</li>
                <li>儲存空間小 （約 4kb）</li>
                <li>每次都會攜帶在HTTP中， 保存過多數據會帶來效能問題</li>
            </ul>
        </td>
        <td>
             <ul>
                <li>除非被清除，否則永久保存</li>
                <li>儲存空間較大 約 5mb</li>
                <li>僅在瀏覽器保存， 不參與Server的溝通</li>
            </ul>
        </td>
         <td>
             <ul>
                <li>關閉頁面或瀏覽器後被清除</li>
                <li>儲存空間較大 約 5mb</li>
                <li>僅在瀏覽器保存， 不參與Server的溝通</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>使用情境</td>
        <td>
            <p>
                針對登錄過的用戶，服務器端會在他登錄時往Cookie 插入一段加密過的辨識碼，下次只要讀取這個值就可以判斷用戶是否登錄 
            </p>
        </td>
        <td>通常被用來保持使用者購物車清單</td>
        <td>如果遇到一些內容特別多的表單，為了提升用戶體驗，可能要把表單頁面拆分成多個子頁面，然後按照步驟引導用戶</td>
    </tr>
</table>



5. CSS樣式
![](https://i.imgur.com/05ZjQB2.png)
 **ANS：** 
 ![](https://i.imgur.com/PmTWXo7.png)


6. 請列出字體大小pt、px、rem 、百分比(%)和vw的差異
* **px**
    是一個絕對的值，輸入16px，它就會是這個顯示器的16px寬度，不會因為瀏覽器視窗長寬改變
    
* **em**
    em單位是相對單位，通常瀏覽器的預設字體為16px，對應到<html>根元素的預設寬度，所以1em ＝16px ，而它的 *子元素相對值* 就依這個值繼承下去 
![](https://i.imgur.com/sRskwwf.png)
![](https://i.imgur.com/fnqDRGz.png)

* **rem**
    rem也是相對單位，其繼承的基準是<html>根元素。rem的基準一直都是跟著 *根元素* ，相對單純很多。
    
* **百分比**
    ％值是相對於某個數值的百分比，％的基準值為何，要看屬性的特性決定（比方width跟height的%基準是父層的width跟height ; 而例如line-height則是以元素本身的文字行高為基準）
* **vw** (viewport width)
    根據視窗的寬度的百分比。
---



Vue：生命週期(加分題)
1. 敘述 computed 跟watch 的使用場景
    computed ：計算屬性，無法傳入參數、必須要回傳一個值； 無法理非同步工作。
    watch ： 監聽值的變化，可傳入參數、可處理非同步工作。
2. 如需對HTML DOM進行操作，應於哪個生命週期後中進行？



