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