# 面試test
1. 請說明 sessionStorage 、localStorage、 cookie、indexedDB 之間區別
- sessionStorage：key:value pair, 瀏覽器關閉資料消失。localStorage：key:value pair,保存資料的時間較長。cookie：大小限制在4KB，有有效時間限制。indexedDB：可以儲存較多的資料，類似資料庫，有交易的特性。
3. 請說明 Javascript "函數防抖" 與 "函數節流" 之間的區別 ？
- 函數防抖：觸發事件後，n 秒內只會執行一次。函數節流：n 秒內只會執行一次事件。
5. 請說明 VUE Lifecycle ？
- Vue 的實體物件從建立、掛載、更新，到銷毀移除，這一連串的過程，稱為生命週期。Vue 在這些週期階段提供了對應處理的 callback function，這些 callback function 稱為生命週期的 hooks function。
7. 請說明 Vue中 v-show 和 v-if 指令的共通點和不通點？
- 共通點：對畫面的元素進行條件和流程的控制，用 truthy value、falsy value 控制。
- 不同點：v-show, 顯示或隱藏(display:none)。v-if：falsy 時元素直接被移除。可以和 v-if-else、v-else 搭配。
9. 請說明 Vuex 是什么？怎麼使用？哪種功能場景使用它？

- 在 vue 管理狀態的工具，不同 component 需要共享狀態時可以做用 vuex
- state：用來讀取的狀態放在 state，這裡的資料改變，component 也會更新
- getter：類似 component 裡的 computed
- mutation：改變 state 方法
- action：透過提交 mutation 改變 state，異步的方法，例入存取 api 會放在 action
- module：每個 module 有自已的 state、mutation、action、getter，方便管理
- 場景：父子組件、不同組件之間共享相同的 store，例如購物車商品數量、新增文章數量
11. 請說明 同步 和 異步 的區别？
- 同步：程式碼開始執行，一直等到回傳後，才會繼續執行下一段程式碼。
- 異步：程式碼不用等到有回傳結果，繼續執行下一段程式碼。
12. 請說明 Vue-router 如何處理 路由參數 的變化？
- 使用 watch 監聽 路由參數
- 使用 beforeRouteUpdate，在當路由被改變，但是元件本身仍是同一個的時候被調用
14. 請說明 Axios是什麼？如何使用？
- Axios 是一個基於 Promise 的 JavaScript HTTP Client。它能夠從瀏覽器發出 HTTP 請求並處理請求和響應之間資料的轉換。
- 很常在前端框架中使用，存取 api 資料
- 大部分的使用方我會參考 github 上的 reademe，https://github.com/axios/axios
- 使用 token、JWT 時會使用到攔截器，在 header 中加入 token
16. 請說明 Vue中，父子組件如何相互調用方法？
- 子組件調用父組件的方法：子組件裡 this.$emit('parent')，父組件裡定義 parentMethod 方法，在子組件標籤加上 @parent='parentMethod'
- 父組件調用子組元的方法：子組件標籤加上 ref='child'，子組件裡定義 childMethod，父組件用 this.$refs.child.childMethod() 調用子組件的方法
- 上述2個方法很常出現在 google 搜尋結果中，如果邏輯允許，我會盡量把方法放在父組件，透過 props 傳給子組件呼叫
- 如果開發 vite 專案，使用 setup 語法糖，可以使用 defineExpose()
17. 能敘述 `.forEach()` 和 `.map()` 之間的區別嗎? 可以簡單的寫出調用兩種函式的情境嗎?
- .forEach()不會回傳執行的結果、同時改變原陣列的元素。.map()會將執行結果存成新陣列，同時保留原陣列元素。.forEach() 簡化 for 迴圈的寫法，不必再關注索引值、邊界條件。使用迴圈常預期把計算後的資料存成新陣列，這時候可以直接使用 .map()

19. 如何實現以下reveseBySeparator()的功能？
可使用以下網址( https://codepen.io/wsx90315-lida/pen/JjWRPEe )，完成後回傳您的答案網址。
- https://codepen.io/ycsteve/pen/wvmqZpM?editors=1112
12. 如何實現 theArray.multiply() 的功能？
可使用以下網址( https://codepen.io/wsx90315-lida/pen/QWpKLMv )，完成後回傳您的答案網址。
- https://codepen.io/ycsteve/pen/PoRKMyP?editors=0012
13. 以下 nick.log 跟 peter.log 這兩個 function 是在做同一件事，如何調整 Person 才能使底下的console.log 等於 true ？
可使用以下網址( https://codepen.io/wsx90315-lida/pen/vYxXBWY )，完成後回傳您的答案網址。
- https://codepen.io/ycsteve/pen/MWVvRbm?editors=1112
14. 有一個 getData()函數，在3秒後返回'data'字串的一個Promise並且console.log 返回的結果，請問該功能如何實現？
- https://codepen.io/ycsteve/pen/mdxMMZV?editors=1011
16. 承上題，如何使用 Async跟 Await 調用 getData()函式
- https://codepen.io/ycsteve/pen/rNdzpdd?editors=1111