App下載

某公司的初級(jí)前端崗位面試小結(jié)，我差點(diǎn)懷疑自己是不是高級(jí)程序員了

猿友 2020-08-26 11:56:46 瀏覽數(shù) (3958)
反饋

本文給大家分享一份來自上海某互聯(lián)網(wǎng)公司的初級(jí)前端崗位面試小結(jié)，希望對(duì)你有所幫助。

面試過程

1.)自我介紹以及平時(shí)是怎么學(xué)習(xí)前端的？

答：正?；卮鸺纯?。

2.)問：請(qǐng)舉例說明一下Vue 和 React 二者的差異？

答：組件：React組件即函數(shù)，在函數(shù)內(nèi)部是JS部分，return 的是HTML部分；Vue我使用的是單文件組件，其由HTML模板、JS、CSS構(gòu)成。

Props：React子組件通過作為函數(shù)參數(shù)傳遞進(jìn)來的 props對(duì)象 拿到父組件傳遞的外部屬性 ，Vue 的子組件通過構(gòu)造選項(xiàng) prop 拿到父組件傳遞的外部屬性。

state：React 通過 useState 聲明和初始化數(shù)據(jù)并拿到 state 和 setState，通過setState更新狀態(tài)到視圖，Vue 通過 data選項(xiàng)聲明數(shù)據(jù)，修改數(shù)據(jù)直接更新到視圖上。

3.)問：講講為什么 Vue 修改數(shù)據(jù)可以直接更新到視圖上？

答：Vue 會(huì)對(duì)在data 選項(xiàng)里聲明的屬性通過 defineProperty 方法將屬性修改為 getter和setter類

Vue 通過 getter和setter 類型監(jiān)聽數(shù)據(jù)的讀取與寫入，每當(dāng)數(shù)據(jù)變動(dòng)時(shí)Vue就會(huì)重新渲染組件。

4.)問：現(xiàn)在如果有一個(gè)data數(shù)據(jù) { a:123 } ，現(xiàn)在這個(gè) a 被異步的更改為 456 ，現(xiàn)在要求當(dāng) a 變更為 456 執(zhí)行一段代碼請(qǐng)問怎么實(shí)現(xiàn)？

答：可以通過Watch 選項(xiàng)監(jiān)聽數(shù)據(jù) a 的變動(dòng)，然后執(zhí)行對(duì)應(yīng)的代碼。問：這確實(shí)可行，如果不用 Watch 呢？

答：。。。

5.)問：你想一想 Vue 的異步API

答：哦，可以用 nextTick() 方法去獲取數(shù)據(jù)，然后判斷 a 是否等于 456 再去執(zhí)行對(duì)應(yīng)代碼。

6.)問：Vuex用過嗎？聊一聊你的理解。

答：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.)問：你對(duì) ES6 有了解嗎？聊聊 let 和 var 的區(qū)別。

答：

  • let 聲明的變量在塊級(jí)作用域內(nèi)，而var聲明的變量在函數(shù)作用域內(nèi)。
  • let 不可以重復(fù)聲明，而var可以重復(fù)聲明。
  • let 不存在變量提升現(xiàn)象，而var存在變量提升。

8.)問：有如下代碼，請(qǐng)寫出控制臺(tái)結(jié)果。

{
   var a = 1;
   let b = 2;
}
console.log(a)
console.log(b)

答：分別輸出：1、報(bào)錯(cuò)

9.)問：那吧console提上去呢？

console.log(a)
console.log(b)
{
   var a = 1;
   let b = 2;
}

答：undefined、報(bào)錯(cuò)

10.)問：ES6 還有其他了解的嗎？Promise了解嗎？

答：了解的。

11.)問：闡述一下你對(duì)Promise的了解

答：這里本人將Promise是什么、三種狀態(tài)、回調(diào)函數(shù)里的resolve、reject的作用、以及三個(gè)實(shí)例方法.then .catch .finally 和兩個(gè)靜態(tài)方法.all .race進(jìn)行了闡述

12.)問：try catch 和 Promise 的 .catch 有什么區(qū)別？

答：try catch 也是用來捕獲錯(cuò)誤的，Promise擁有錯(cuò)誤冒泡功能，雖然.then返回的是一個(gè)新的對(duì)象，但是在.then后面.catch仍然可以捕獲到最開始的那個(gè)Promise對(duì)象的錯(cuò)誤。（我不確定這樣回答是否正確，面試官也沒說什么）

13.)問：宏任務(wù)，微任務(wù)了解嗎？

答：了解的（然后我畫了張圖，藍(lán)色塊表示宏任務(wù)隊(duì)列，橙色表示微任務(wù)隊(duì)列，執(zhí)行順序是先執(zhí)行當(dāng)前所在橫行的同步任務(wù)，再執(zhí)行所在橫行的微任務(wù)，再執(zhí)行下一橫行的宏任務(wù)）

宏任務(wù)與微任務(wù)

宏任務(wù)與微任務(wù)

14.)問：Promise 返回的是宏任務(wù)還是微任務(wù)呢？

答：Promise 返回的是微任務(wù)

1.)問：Promise 為什么返回微任務(wù)。

答：Promise 表示異步操作的返回結(jié)果 -> 當(dāng)瀏覽器拿到結(jié)果肯定想第一時(shí)間處理 -> 加入微任務(wù)隊(duì)列比宏任務(wù)處理速度快 -> 所以加入微任務(wù)隊(duì)列。

15.)問：當(dāng)前有一個(gè) 父div 和 子div，在 子div 上有一個(gè) button 綁定一個(gè)點(diǎn)擊事件，當(dāng)button 被點(diǎn)擊請(qǐng)問發(fā)生了什么？

答：button被點(diǎn)擊 -> 子組件事件觸發(fā) -> 父組件事件觸發(fā) 這是事件的冒泡機(jī)制

16.)問：事件除了冒泡還有其他機(jī)制嗎？

答：還有捕獲機(jī)制，addEventListener默認(rèn)是冒泡機(jī)制，可以通過將第三個(gè)參數(shù)改為true 更改為捕獲。

17.)問：你在Vue 項(xiàng)目和 React項(xiàng)目分別踩過的坑有哪些？（這個(gè)問題最好提前準(zhǔn)備，我是現(xiàn)場(chǎng)想了一會(huì)再說的）

  • Vue 項(xiàng)目在 TS 開發(fā)中由于Vue2.0的模板內(nèi)JS代碼沒有類型聲明 -> 導(dǎo)致拿到的數(shù)據(jù)是 any 類型 -> 結(jié)論：Vue2.0目前對(duì)TS支持不好。
  • React 是函數(shù)式編程，當(dāng)你的state是某個(gè)對(duì)象并且要更改其某個(gè)屬性時(shí)，setState需要將就對(duì)象先用...展開，在更改對(duì)應(yīng)屬性值。

18.)問：接著開始問項(xiàng)目相關(guān)的問題，你的UI組件項(xiàng)目popover組件的具體怎么實(shí)現(xiàn)的？簡(jiǎn)單的講一下。

答：（這個(gè)回答根據(jù)具體項(xiàng)目而異，具體回答內(nèi)容這里就不贅述了）

19.)問：你項(xiàng)目中遇到的最棘手的問題是什么？

答：（這個(gè)問題最好提前準(zhǔn)備，答案根據(jù)具體項(xiàng)目而異，也不贅述）

經(jīng)驗(yàn)總結(jié)：

1.如果面試問題比較復(fù)雜，你可以先說：讓我稍微想一想，不用急著回答。

2.有些問題最后提前準(zhǔn)備一下，比如說：項(xiàng)目中最難的問題以及解決方案，遇到哪些坑等等。

3.基礎(chǔ)知識(shí)還是十分重要的，面試官很多問題會(huì)基于你提到的概念再進(jìn)行拓展，你最好對(duì)你說的每一個(gè)技術(shù)名詞都有一定了解。

文章來源：公眾號(hào)--前端人 作者：鬼哥

以上就是W3Cschool編程獅關(guān)于初級(jí)前端崗位面試小結(jié)的相關(guān)介紹了，希望對(duì)大家有所幫助。

前端 編程基礎(chǔ)

0 人點(diǎn)贊