當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

一名运营，自学一年前端，成功入职杭州某独角兽企业，他的面试经验和学习方法等分享...

發(fā)布時間：2023/12/9 HTML 34 豆豆

生活随笔收集整理的這篇文章主要介紹了一名运营，自学一年前端，成功入职杭州某独角兽企业，他的面试经验和学习方法等分享... 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

大家好，我是若川。這是我的微信群里小伙伴@年年的投稿。他是19年畢業(yè)，之前做的是運營相關(guān)的工作，在我的交流群里非常活躍，自學(xué)一年前端，目前成功轉(zhuǎn)行入職杭州一家獨角獸企業(yè)。相信他的文章能帶給大家一些啟發(fā)和激勵。

0 寫在最前面

我是年年，于19年畢業(yè)的，之前兩份工作都不是開發(fā)相關(guān)，也就是0經(jīng)驗轉(zhuǎn)行。工作之余持續(xù)學(xué)習(xí)前端大概一年半，前后大概面了一個半月，最后上了岸，去了杭州一家還算不錯的獨角獸。

由于本身學(xué)歷（專科）和專業(yè)(農(nóng)業(yè))不符合，面的公司以中小廠為主。知識點可能在也是比較簡單的，所以本文不適用于很多大佬，見諒。但是希望能給一些正在學(xué)習(xí)中的未畢業(yè)的和轉(zhuǎn)行的一些建議或者激勵。

現(xiàn)梳理一下基于我個人面試過程中被問到的一些問題(包括但不限于)，更多的是個人經(jīng)驗的分享。

文章大綱如下

1 面試前的準備

1.1 寫簡歷

在開始面試之前，一份優(yōu)秀的簡歷也是十分重要，

關(guān)于簡歷怎么寫推薦兩篇文章，

前端 Offer 提速：如何寫出有亮點的簡歷
面試被問項目經(jīng)驗不用慌，按這個步驟回答絕對驚艷

關(guān)于寫簡歷的平臺也推薦兩個

超級簡歷^[1] --- 更簡約，黑底白字
木及簡歷^[2] --- 秋風(fēng)大佬的作品，樣式會豐富些，基于markdown

1.2 明確目標

做一件事情，要先明確目標，定下一個可觸及的清晰目標。

跟他人交流，了解自身能力的偏向 ?---- 和群友溝通過程中，較多群友對我的評價為基礎(chǔ)比較扎實

了解層級區(qū)別 --- 通過百度等渠道了解大廠的層級定位的主要特點(我是以阿里p級為標準)

結(jié)合上面兩點，定下目標 --- 我依據(jù)上面兩點，并對自己的學(xué)習(xí)能力進行評估，這邊對自己的級別定位于 p4/5的定義

這里截取p4要求中，我覺得面試官最看重的一點，這也是面試者著重要體現(xiàn)出來的東西

在專業(yè)領(lǐng)域，具有學(xué)習(xí)能力和潛能

最終上岸的這家主管也和我說是看中了我的學(xué)習(xí)和潛能。

1.3 爭取面試機會

基于自身的學(xué)歷和專業(yè)，又因為現(xiàn)在boss上大部分都是hr在看簡歷，所以我的簡歷很多情況下都會被忽略。

為了更多的面試機會，我完善了boss直聘的在線簡歷（很多hr都會看在線簡歷），然后又編寫了一些話術(shù)去爭取。

關(guān)于爭取話術(shù)中提及的東西

可以是你的項目展示地址（已上線）
可以是你的博客或github
可以是證明你學(xué)習(xí)能力的一些東西（我是番茄todo計時，幕布編輯文字統(tǒng)計）

舉個例子（我是這么爭取的）

1.4 梳理知識點

1.4.1 整體大綱

很多小伙伴也有想跳槽的想法，但是又不知道該如何梳理，這里的話我推薦雙越老師的兩門面試課（我是買了然后都看完了~放心食用）。

快速搞定前端技術(shù)一面匹配大廠面試要求^[3]
前端框架及項目面試^[4]

這兩門課更多是一個梳理的過程，知識點更多是點到為止，給到一個正確的大綱，跟隨過一遍，把自身不知道的深入一下。

ps:雙越老師其他的課也很不錯，我的node就是學(xué)習(xí)他慕課微博項目學(xué)習(xí)來的。

除了這兩門課，也推薦字節(jié)面試飛書文檔^[5]，這個文檔比較齊全，之前是看天天大佬發(fā)群里后收藏的，我的手寫題是跟著這里整理的。

1.4.2 梳理工具推薦

我喜歡用 思維導(dǎo)圖 （xmind、幕布）去記錄，個人感覺樹形的結(jié)構(gòu)更容易去梳理和記憶，md更多是線性的瀏覽。

1.5 面試知識的記憶小技巧

1.5.1 背誦知識---反向提問加深記憶

這就是為什么我喜歡用思維導(dǎo)圖的原因

舉個例子

如上是常見的css的一些知識點，那么我們在復(fù)習(xí)的時候，打開了思維導(dǎo)圖，默認把節(jié)點關(guān)閉后。就可以給自己提問了，然后嘗試解答

margin上下左右設(shè)置負值分別是怎么樣
margin 垂直方向的重疊的現(xiàn)象有哪些，解決方案是有哪些？
BFC的創(chuàng)建方式有哪些

思維導(dǎo)圖的好處就出來了，如果你用的是markdown，你一眼就能看到答案，但是用思維導(dǎo)圖你就很方便的把答案隱藏了，不會背的展開，會被的默認關(guān)閉，那么后續(xù)的記憶就很方便了。

1.5.2 手寫知識點---寫注釋

很多小伙伴會苦惱手寫題，覺得手寫題麻煩，面試的時候很容易丟分。

個人看了比較多的手寫題后，認為好的手寫題就是三步走

對傳入?yún)?shù)的處理（類型判斷）

對功能的實現(xiàn)（優(yōu)化---性能等）

對返回結(jié)果的處理（類型判斷）

那么關(guān)于如何記憶手寫題，個人是寫注釋，然后背誦注釋，這樣就可以把記代碼改成記文字，容易許多。

舉個例子

function?myNew(constructFn)?{//?1.進行類型判斷if?(typeof?constructFn?!==?'function')throw?new?Error('傳入的參數(shù)必須是一個函數(shù)');//?1.2?模仿ES6?new方法的target屬性指向構(gòu)造函數(shù)myNew.target?=?constructFn;//?2.創(chuàng)建對象?并進行?原型鏈連接const?newObj?=?Object.create(constructFn.prototype);//?3.?更改this綁定計算函數(shù)返回結(jié)果//?3.1?獲取剩余參數(shù)const?argsArr?=?[].slice.call(arguments,?1);//?3.2?計算結(jié)果const?fnReturnResult?=?constructFn.apply(newObj,?argsArr);//?4.返回//?4.1?對類型進行判斷//?是對象?但是不能是nullvar?isObject?=?typeof?fnReturnResult?===?'object'?&&?fnReturnResult?!==?null;//?是函數(shù)類型var?isFunction?=?typeof?fnReturnResult?===?'function';//?4.2如果是對象類型?返回結(jié)果?不是則返回新創(chuàng)建的對象if?(isObject?||?isFunction)?{return?fnReturnResult;}return?newObj; }

1.6 刷題平臺推薦

為了防止面試官出一些奇奇怪怪，或者說一些涉及知識點比較細（不常用的）的題目，我在很多平臺刷過很多題（以js相關(guān)的選擇題為主）。

牛客網(wǎng)---感覺題型偏老，不推薦
- 我刷完了專項訓(xùn)練里面的所有選擇題（500多道題也靠著刷題到了lv5）
高級前端面試小程序 ?--- 特別推薦 ?題型比較新穎，題庫里的題也適合面試梳理，選擇題不算特別多
- 這個我不知道刷了幾道，只是到后面做的基本是重復(fù)的題了
前端面試星球 ?小程序 --- 推薦
- 這個我刷的沒有前兩個多，因為有些題型有點多，涉及的面挺廣的，后面會慢慢刷的。

1.7 準備項目

之前有小伙伴問過我，0經(jīng)驗或轉(zhuǎn)行的項目怎么辦。這里的話我是這么做的:

基于工作，發(fā)掘需求--- 熟悉自身工作后，基于整條業(yè)務(wù)線，去發(fā)掘是否有可以用編程加快或者完善的地方

基于需求，定下目標--- 基于該需求，和平時業(yè)務(wù)的積累，思考如何實現(xiàn)（我是做了一個全棧的回收后臺）

學(xué)習(xí)相關(guān)技術(shù)--- 由于是全棧，我先后學(xué)習(xí)了react和node相關(guān)知識，并構(gòu)建出了第一個版本的后臺

投入使用后，繼續(xù)學(xué)習(xí)從而迭代--- 我第一版的后臺是umi+ant pro 構(gòu)建的，后續(xù)學(xué)習(xí)了慕課的jira（主講hooks+ts的），基于hooks+ts 對項目進行了重構(gòu)。

這樣的項目可能會比直接從慕課等網(wǎng)站上學(xué)習(xí)來的寫在簡歷上的要好看或者實用許多。

2 面試中碰到的知識點

這里的知識點只會說相關(guān)總知識點，然后給上相關(guān)知識點的文章推薦

2.1 ? JS相關(guān)

2.1.1 執(zhí)行機制相關(guān)

概念性 ---這一次，徹底弄懂 JavaScript 執(zhí)行機制^[6]
筆試題型 --- 呆呆大佬的promise題^[7] 刷完之后可以和上學(xué)一樣整理相關(guān)的題型模板

我刷完后總結(jié)出的解題模板（解題思路太多了就截圖了）

整理的題型分類

面試碰到的問題

說說什么是微任務(wù)，宏任務(wù)，常用那些微/宏任務(wù)
說說js的執(zhí)行機制
setTimeout的第二個參數(shù)是按照怎么樣的方式入隊的
一些筆試題

2-this

概念性 --- 川神的面試官問系列^[8]
筆試題型---還是推薦呆呆大佬的this題^[9]

我刷完后總結(jié)出的解題模板和思路

面試碰到的問題

一些筆試題

3-原型和原型鏈

這個我反而覺得沒啥難的，只要記住

實例.proto =實例的構(gòu)造函數(shù)的.prototype 這個很多就不難了

冴羽大佬的原型相關(guān)文章^[10]

4-繼承

冴羽大佬的多種繼承的實現(xiàn)及優(yōu)缺點^[11]

面試碰到的問題

了解繼承嗎，說說幾個你常用的繼承，追問優(yōu)缺點
class的extend做了什么（和組合寄生式繼承一樣）

5-閉包

我從來不理解JavaScript閉包直到有人這樣向我解釋它^[12]

面試碰到的問題

一些筆試題

6-垃圾回收

基本原理及了解(個人覺得夠用了) --- 從 4 個面試題了解「瀏覽器的垃圾回收」^[13]
深入了解(更深層次的細節(jié)及原理)---你真的了解垃圾回收機制嗎^[14]

面試碰到的問題

說說v8的垃圾回收
標記清除法的缺點

7-數(shù)據(jù)類型

面試碰到的問題

列舉js中的數(shù)據(jù)類型
數(shù)組中那些方法是會改變原數(shù)組的
symbol 可以用new調(diào)用嗎
symbol 的使用場景

2.2 Css相關(guān)

css一般會問一些常見布局的實現(xiàn)，以及一些屬性的區(qū)別，這個有很多，只舉我碰到的

2.2.1-布局相關(guān)

布局大全推薦文章^[15]

一列定寬，一列自適應(yīng)的實現(xiàn)方式（盡可能多）
多列布局的實現(xiàn)方式
行內(nèi)元素和塊元素的垂直居中

2.2.2 屬性相關(guān)

說說場景的定位及該定位參考原點
visibility:none 和 display:none 以及 opacity:0 的區(qū)別
flex這個復(fù)合屬性的含義是

2.3 http

這個面下來問的不是很多，沒有問特別難的題

狀態(tài)碼相關(guān)

301 302 304的區(qū)別
200 狀態(tài)碼一定是服務(wù)器返回的嗎

get和post的區(qū)別

http1.1和2.0的區(qū)別

說說http緩存

2.4 React相關(guān)

我只準備了react，且看了一些源碼。

這個建議大家平時學(xué)習(xí)工作過程中去明確自己沒有特別明白的地方，然后再去看相關(guān)的文章或者源碼，全部看的話比較容易放棄。

整體推薦資料

拉勾 ?修言大佬的 react深入淺出專欄^[16]
掘金 ?我不是外星人的react小冊^[17]
魔術(shù)師卡頌的公眾號和b站
- 可以先選擇性的看，了解自身不太知道或不太明確的知識點，卡頌老師都講的淺顯易懂，每次看完都是覺得醍醐灌頂。

2.4.1 虛擬dom相關(guān)問題

概念

虛擬DOM 本質(zhì)是 JS和DOM之間的一個映射緩存，是對真實DOM的描述（重點）

處理流程

數(shù)據(jù)+“模板”（不一定是模板如JSX）---> 虛擬DOM--->真實DOM--->掛載到界面里

缺點

更大的JS計算（它不可避免地涉及遞歸、遍歷等耗時操作） 當dom更新量不大的時候，性能反而不如其他方案(一般面試官更想聽缺點)

內(nèi)存占用較高

react選擇虛擬dom 的原因

提供更爽、更高效的研發(fā)模式（函數(shù)式編程的UI編程方式），還有一個不錯的性能

容易實現(xiàn)跨平臺成本更低

降低了代碼抽象能力，避免人為操作DOM，降低代碼風(fēng)險

2.4.2 diff算法

推薦---15張圖，20分鐘吃透Diff算法核心原理^[18]

我之前是自己整理的，前段時間在掘金看了該文章覺得很不錯。

2.4.3 生命周期

這個一般只會讓你去寫各個期間的生命周期。

但是這里還是推薦大家去看一下卡頌老師對生命周期的講解視頻^[19]，對生命周期有更深層次的了解

2.4.4 事件機制相關(guān)問題

合成事件處理流程

原生DOM層

1.元素觸發(fā)事件 2.事件冒泡到 document（react 17后掛載到app根節(jié)點）

合成事件層

3.Syntheic Event 實例化成統(tǒng)一的react event

事件處理函數(shù)

4.dispatchEvent 處理將event事件給到對應(yīng)的處理器

這樣設(shè)計的好處

更好的兼容和跨平臺（脫離原生自己實現(xiàn)一套邏輯）

全部掛在到document上減少內(nèi)存消耗避免頻繁解綁（事件指派原理）

方便事件的統(tǒng)一管理（如事件機制）

2.4.5 hook相關(guān)

設(shè)計hook的原因

組件之間難以復(fù)用狀態(tài)邏輯

復(fù)雜的組件變得難以理解

this指向問題

類難以做編譯優(yōu)化

hook為什么不能在條件語句中使用

只要 Hook 的調(diào)用順序在多次渲染之間保持一致，React 就能正確地將內(nèi)部 state 和對應(yīng)的 Hook 進行關(guān)聯(lián)
hook是基于鏈表實現(xiàn)的要確保 Hooks 在每次渲染時都保持同樣的執(zhí)行順序如果在循環(huán)、條件或者嵌套中調(diào)用hook會導(dǎo)致取值錯位執(zhí)行錯誤的hook

useCallback 和 useMemo的區(qū)別

這個直接看官網(wǎng)

useEffect相關(guān)

推薦卡頌老師的關(guān)于useEffect的一切

useState相關(guān)

推薦卡頌老師的關(guān)于useState的一切

關(guān)于hook 搞懂useState和useEffect 其余的就不難了

2.4.6 源碼相關(guān)

源碼相關(guān)的答案可能比較長，這里就只列舉被問到的

說說setState

redux的dispatch做了什么

redux的中間件是怎么掛載的，執(zhí)行順序（compose函數(shù)）

說說useEffect的處理流程

react-router兩種路由的原理

2.5 手寫題

2.5.1 this指向相關(guān)

手寫new

手寫apply和call

手寫bind

以上這三個，只推薦川神寫的文章 ?對應(yīng)合集，讓你學(xué)會從60分到100分的去書寫這4個筆試題，并帶有完整的剖析，方便自己整理寫注釋。

2.5.2 正則相關(guān)

千分位分割
下劃線和駝峰命名互轉(zhuǎn)
電話的驗證

2.5.3 其余碰到的題

deepclone --- 如何寫出一個驚艷面試官的深拷貝^[20] 個人一般只會加上map解決循環(huán)引用的問題
柯里化 ?--- 通用柯里化函數(shù)^[21]
防抖 --- 冴羽大佬的博客^[22]
節(jié)流 --- 冴羽大佬博客^[23]

3 面試后的總結(jié)

3.1 找個平臺輸出或者記錄

這次能上岸我覺得自己的爭取很重要，那么為了爭取自己之前鋪墊的整理和記錄也很重要。

所以我覺得如果你也有跳槽的想法，可以嘗試的去掘金或者自己建立一個博客去輸出自己的文章。

個人幕布整理了14w字的筆記，番茄todo計時800個小時左右，然后又把筆記上傳到了博客，這些比較好看的數(shù)據(jù)最終讓我獲得了面試機會，并成功找到自己覺得不錯的工作。

3.2 語氣方面

語氣的話盡可能保持溫柔一些，不要過于強勢，面試官對你的第一印象及交流的感覺很重要，盡可能保證舒服。(個人會在面試之后詢問面試官對我的看法，基本都有提到這一點)

3.3 如果遇到不會的問題

面試中碰到不會的問題，可以先進行思考和再次詢問梳理，如果真的不會也沒有關(guān)系，先道個歉然后讓面試官給到一些引導(dǎo)或者提示，如果最終還是沒有想出來，在面試結(jié)束后會再次詢問。展現(xiàn)出個人對技術(shù)的熱情。

比如我碰到?jīng)]有準備的算法題會直接道歉說沒有做相關(guān)準備，碰到業(yè)務(wù)題不會了，會尋求引導(dǎo)，最后再問面試官他們公司的實際做法。

3.4 問到你的優(yōu)點和缺點

知乎高贊文章^[24]

3.5 最重要的保持耐心

最好先騎驢找馬，一邊工作一邊整理和面試。我是整理的差不多了也面了幾家后才辭職的。
對于像我這種轉(zhuǎn)行或者0經(jīng)驗的，很難遇到一個合適的面試官，他看重你身上的潛力。所以說要保持耐心，多面面，和我一樣你也會碰到那個看重你的面試官的。

4 感謝

在這里感謝一些人，因為沒有這些人，我可能現(xiàn)在還在掙扎。

先感謝我的女朋友還有我家的貓貓，在很多焦慮的時候，是她們給予慰藉。

然后感謝川神（若川），一個平易近人的大佬，基本有問必答，在他的交流群中學(xué)到了很多也交到了很多好朋友。（這里推薦一下川神最近組織的源碼共讀活動1個月，200+人，一起讀了4周源碼）

再然后就是感謝各個川神群里的好朋友啦，謝謝文淵、sodala、AaronKwong、冷月心、夜、zhouying、月樺、東東、窗外放晴等人對我的肯定，幫助及建議，讓我對自己有個相對明確的認知和目標定位，也避免了找工作的一些坑。

參考資料

[1]

超級簡歷: https://www.wondercv.com/

[2]

木及簡歷: https://resume.mdedit.online/editor/#

[3]

快速搞定前端技術(shù)一面匹配大廠面試要求: https://coding.imooc.com/class/400.html

[4]

前端框架及項目面試: https://coding.imooc.com/class/419.html

[5]

字節(jié)面試飛書文檔: https://bytedance.feishu.cn/base/app8Ok6k9qafpMkgyRbfgxeEnet?table=tblEnSV2PNAajtWE&view=vewJHSwJVd

[6]

這一次，徹底弄懂 JavaScript 執(zhí)行機制: https://juejin.cn/post/6844903512845860872

[7]

呆呆大佬的promise題: https://juejin.cn/post/6844904077537574919

[8]

川神的面試官問系列: https://juejin.cn/post/6844903746984476686

[9]

還是推薦呆呆大佬的this題: https://juejin.cn/post/6844904083707396109

[10]

冴羽大佬的原型相關(guān)文章: https://github.com/mqyqingfeng/Blog/issues/2

[11]

冴羽大佬的多種繼承的實現(xiàn)及優(yōu)缺點: https://github.com/mqyqingfeng/Blog/issues/16

[12]

我從來不理解JavaScript閉包直到有人這樣向我解釋它: https://juejin.cn/post/6844903858636849159

[13]

從 4 個面試題了解「瀏覽器的垃圾回收」: https://juejin.cn/post/6861967094318284814

[14]

你真的了解垃圾回收機制嗎: https://juejin.cn/post/6981588276356317214

[15]

布局大全推薦文章: https://juejin.cn/post/6844903574929932301

[16]

react深入淺出專欄: https://kaiwu.lagou.com/course/courseInfo.htm?courseId=510#/sale

[17]

react小冊: https://juejin.cn/book/6945998773818490884

[18]

15張圖，20分鐘吃透Diff算法核心原理: https://juejin.cn/post/6994959998283907102

[19]

卡頌老師對生命周期的講解視頻: https://www.bilibili.com/video/BV16t4y1r7oJ?p=1

[20]

如何寫出一個驚艷面試官的深拷貝: https://cloud.tencent.com/developer/article/1497418

[21]

通用柯里化函數(shù): https://juejin.cn/post/6844904093467541517

[22]

冴羽大佬的博客: https://github.com/mqyqingfeng/Blog/issues/22

[23]

冴羽大佬博客: https://github.com/mqyqingfeng/Blog/issues/26

[24]

知乎高贊文章: https://zhuanlan.zhihu.com/p/139952856

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信江西?拉你進群。

總結(jié)

以上是生活随笔為你收集整理的一名运营，自学一年前端，成功入职杭州某独角兽企业，他的面试经验和学习方法等分享...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Taro+react开发（26）taro
下一篇：前端学习（3196）：虚拟dom和真实d