本文給大家分享一份來自上海某互聯(lián)網(wǎng)公司的初級前端崗位面試小結(jié)，希望對你有所幫助。
面試過程
1.)自我介紹以及平時是怎么學(xué)習(xí)前端的？
答：正?；卮鸺纯?。
2.)問：請舉例說明一下Vue 和 React 二者的差異？
答：組件：React組件即函數(shù)，在函數(shù)內(nèi)部是JS部分，return 的是HTML部分；Vue我使用的是單文件組件，其由HTML模板、JS、CSS構(gòu)成。
Props：React子組件通過作為函數(shù)參數(shù)傳遞進(jìn)來的 props對象 拿到父組件傳遞的外部屬性 ，Vue 的子組件通過構(gòu)造選項 prop 拿到父組件傳遞的外部屬性。
state：React 通過 useState 聲明和初始化數(shù)據(jù)并拿到 state 和 setState，通過setState更新狀態(tài)到視圖，Vue 通過 data選項聲明數(shù)據(jù)，修改數(shù)據(jù)直接更新到視圖上。
3.)問：講講為什么 Vue 修改數(shù)據(jù)可以直接更新到視圖上？
答：Vue 會對在data 選項里聲明的屬性通過 defineProperty 方法將屬性修改為 getter和setter類
Vue 通過 getter和setter 類型監(jiān)聽數(shù)據(jù)的讀取與寫入，每當(dāng)數(shù)據(jù)變動時Vue就會重新渲染組件。
4.)問：現(xiàn)在如果有一個data數(shù)據(jù) { a:123 } ，現(xiàn)在這個 a 被異步的更改為 456 ，現(xiàn)在要求當(dāng) a 變更為 456 執(zhí)行一段代碼請問怎么實現(xiàn)？
答：可以通過Watch 選項監(jiān)聽數(shù)據(jù) a 的變動，然后執(zhí)行對應(yīng)的代碼。問：這確實可行，如果不用 Watch 呢？
答：。。。
5.)問：你想一想 Vue 的異步API
答：哦，可以用 nextTick() 方法去獲取數(shù)據(jù)，然后判斷 a 是否等于 456 再去執(zhí)行對應(yīng)代碼。
6.)問：Vuex用過嗎？聊一聊你的理解。
答：Vuex是Vue項目的全局狀態(tài)管理工具,它有幾個核心概念分別是：
- store：存儲狀態(tài)的容器；
- state：狀態(tài)；
- mutation：同步改變狀態(tài)的方法；
- getter：store的計算屬性；
- action：異步改變狀態(tài)的方法；
- 模塊：將 store 進(jìn)行模塊化管理。
7.)問：你對 ES6 有了解嗎？聊聊 let 和 var 的區(qū)別。
答：
- let 聲明的變量在塊級作用域內(nèi)，而var聲明的變量在函數(shù)作用域內(nèi)。
- let 不可以重復(fù)聲明，而var可以重復(fù)聲明。
- let 不存在變量提升現(xiàn)象，而var存在變量提升。
8.)問：有如下代碼，請寫出控制臺結(jié)果。
{
var a = 1;
let b = 2;
}
console.log(a)
console.log(b)答：分別輸出：1、報錯
9.)問：那吧console提上去呢？
console.log(a)
console.log(b)
{
var a = 1;
let b = 2;
}答：undefined、報錯
10.)問：ES6 還有其他了解的嗎？Promise了解嗎？
答：了解的。
11.)問：闡述一下你對Promise的了解
答：這里本人將Promise是什么、三種狀態(tài)、回調(diào)函數(shù)里的resolve、reject的作用、以及三個實例方法.then .catch .finally 和兩個靜態(tài)方法.all .race進(jìn)行了闡述
12.)問：try catch 和 Promise 的 .catch 有什么區(qū)別？
答：try catch 也是用來捕獲錯誤的，Promise擁有錯誤冒泡功能，雖然.then返回的是一個新的對象，但是在.then后面.catch仍然可以捕獲到最開始的那個Promise對象的錯誤。（我不確定這樣回答是否正確，面試官也沒說什么）
13.)問：宏任務(wù)，微任務(wù)了解嗎？
答：了解的（然后我畫了張圖，藍(lán)色塊表示宏任務(wù)隊列，橙色表示微任務(wù)隊列，執(zhí)行順序是先執(zhí)行當(dāng)前所在橫行的同步任務(wù)，再執(zhí)行所在橫行的微任務(wù)，再執(zhí)行下一橫行的宏任務(wù)）
宏任務(wù)與微任務(wù)
14.)問：Promise 返回的是宏任務(wù)還是微任務(wù)呢？
答：Promise 返回的是微任務(wù)
1.)問：Promise 為什么返回微任務(wù)。
答：Promise 表示異步操作的返回結(jié)果 -> 當(dāng)瀏覽器拿到結(jié)果肯定想第一時間處理 -> 加入微任務(wù)隊列比宏任務(wù)處理速度快 -> 所以加入微任務(wù)隊列。
15.)問：當(dāng)前有一個 父div 和 子div，在 子div 上有一個 button 綁定一個點擊事件，當(dāng)button 被點擊請問發(fā)生了什么？
答：button被點擊 -> 子組件事件觸發(fā) -> 父組件事件觸發(fā) 這是事件的冒泡機(jī)制
16.)問：事件除了冒泡還有其他機(jī)制嗎？
答：還有捕獲機(jī)制，addEventListener默認(rèn)是冒泡機(jī)制，可以通過將第三個參數(shù)改為true 更改為捕獲。
17.)問：你在Vue 項目和 React項目分別踩過的坑有哪些？（這個問題最好提前準(zhǔn)備，我是現(xiàn)場想了一會再說的）
- Vue 項目在 TS 開發(fā)中由于Vue2.0的模板內(nèi)JS代碼沒有類型聲明 -> 導(dǎo)致拿到的數(shù)據(jù)是 any 類型 -> 結(jié)論：Vue2.0目前對TS支持不好。
- React 是函數(shù)式編程，當(dāng)你的state是某個對象并且要更改其某個屬性時，setState需要將就對象先用...展開，在更改對應(yīng)屬性值。
18.)問：接著開始問項目相關(guān)的問題，你的UI組件項目popover組件的具體怎么實現(xiàn)的？簡單的講一下。
答：（這個回答根據(jù)具體項目而異，具體回答內(nèi)容這里就不贅述了）
19.)問：你項目中遇到的最棘手的問題是什么？
答：（這個問題最好提前準(zhǔn)備，答案根據(jù)具體項目而異，也不贅述）
經(jīng)驗總結(jié)：
1.如果面試問題比較復(fù)雜，你可以先說：讓我稍微想一想，不用急著回答。
2.有些問題最后提前準(zhǔn)備一下，比如說：項目中最難的問題以及解決方案，遇到哪些坑等等。
3.基礎(chǔ)知識還是十分重要的，面試官很多問題會基于你提到的概念再進(jìn)行拓展，你最好對你說的每一個技術(shù)名詞都有一定了解。
文章來源：公眾號--前端人 作者：鬼哥
以上就是W3Cschool編程獅關(guān)于初級前端崗位面試小結(jié)的相關(guān)介紹了，希望對大家有所幫助。
