寫給初級前端的面試經(jīng)驗(yàn)

最近到了金三銀四的跳槽季，很多人都會面臨跳槽找工作赡勘，并且再過幾個(gè)月又會到畢業(yè)季嫂便，越來越多的畢業(yè)生會面臨這個(gè)問題。

同樣闸与，我們組因?yàn)闃I(yè)務(wù)需要（我們今年倒是還沒有人員離職毙替，感動╭(╯^╰)╮）需要進(jìn)行社招，我最近看了不少簡歷践樱，并且對一些小伙伴進(jìn)行了電話溝通（電面）厂画，對面試找工作有一些自己淺薄的觀點(diǎn)

因?yàn)閭€(gè)人認(rèn)為本人的技術(shù)還是很菜的，并且工作經(jīng)驗(yàn)也沒有特別豐富拷邢，所以文章內(nèi)容都是自己一些淺薄的看法觀點(diǎn)袱院，若有不對之處，歡迎大家指出瞭稼，不喜勿噴啊~~~

本篇文章可能只是適用于初級前端忽洛，也就是剛畢業(yè)的大學(xué)生或者畢業(yè) 2 年之內(nèi)的小伙伴，大家酌情閱讀~~~

(更新：最后的面試題只是自己總結(jié)的一些偏基礎(chǔ)的知識~~~ 剛畢業(yè)的小伙伴看著也不要有什么壓力环肘，不是代表初級前端必須掌握的技能欲虚，只是總結(jié)出前端面試中比較常見的問題~~~作為面試者，多準(zhǔn)備一些有益無害嘛ヾ(=?ω?=)o)

如果大家喜歡廷臼，可以點(diǎn)贊或留言我再繼續(xù)更新面試題~~~_{苍在，謝謝大家}~~

簡歷的格式

簡歷最好在 1-2 頁绝页，最好不超過 2 頁。簡歷真的不是字寫的多就好寂恬，不管是技術(shù)還是 hr 都很難一個(gè)字一個(gè)字看你的簡歷续誉。所以簡歷上寫的一定是精華，需要寫你的優(yōu)勢初肉。

個(gè)人不太喜歡花里胡哨的簡歷酷鸦，排版整齊就好，但是也要注意不要有錯別字牙咏，雖然都知道是無心的臼隔，但是給人的印象確實(shí)不怎么好，最起碼可以說明你沒有仔細(xì)看過你自己的簡歷妄壶，同時(shí)最好區(qū)分大小寫摔握，數(shù)字/英文和漢字之前要有空格，這個(gè)真的是一個(gè)好習(xí)慣丁寄，之前在掘金翻譯的時(shí)候養(yǎng)成的習(xí)慣氨淌，現(xiàn)在就算是微信聊天基本上也都會遵循，極大的提高了閱讀效率伊磺。

最好不要使用在招聘網(wǎng)站上使用模板生成的簡歷盛正，同時(shí)要記得使用 PPT 模板的時(shí)候要把不必要的東西刪除啊= =，（收到過簡歷上第一行是 chapter屑埋，也沒有姓名豪筝，就問他為什么沒有名字，然后給我回答 chapter 是英文名= = ）

對于已經(jīng)畢業(yè) 2 年以上的摘能，學(xué)生時(shí)期的經(jīng)歷（學(xué)生會主席续崖、拿過什么什么獎學(xué)金）就可以不用寫了。

簡歷的內(nèi)容

前端這塊的簡歷基本上就基本介紹徊哑、技術(shù)棧袜刷、工作經(jīng)驗(yàn)聪富、項(xiàng)目經(jīng)驗(yàn)就可以莺丑。

基本介紹寫明 姓名、電話和郵箱墩蔓、畢業(yè)時(shí)間梢莽、學(xué)歷、出生年月就可以（照片有沒有都行奸披、政治面貌昏名、籍貫無所謂），電話一定要真實(shí)可以打通的電話（真的遇到過到的簡歷電話和郵箱中間四位是 **** (?_?)）阵面，也遇到過打電話打幾次打不通的（工作日和非工作日都聯(lián)系過）轻局，即使您再優(yōu)秀洪鸭，聯(lián)系不上也白搭啊(/□＼*)

項(xiàng)目經(jīng)驗(yàn)和投遞的 title 相匹配

個(gè)人覺得 9102 年了，會用 JQ 基本就可以不用寫在簡歷上了仑扑，如果你研究過（不等于看過）JQ 源碼可以酌情寫上览爵。

同時(shí)，你的簡歷要和你投遞的崗位相匹配镇饮，比如 title 是資深前端工程師蜓竹，那么你能夠使用 div + css 寫頁面就可以不用寫在簡歷上了，因?yàn)檫@應(yīng)該是最最基本的要求储藐。

簡歷上是要突出你的優(yōu)勢俱济，同時(shí)也是自我總結(jié)能力的一個(gè)體現(xiàn)

簡歷上寫的內(nèi)容要是你擅長的

面試的題目很大部分都是從你簡歷里面問的。所以钙勃，對于那種自己只是找了篇文章然后實(shí)現(xiàn)了下的項(xiàng)目或者只是寫過 demo 的蛛碌，就不要寫在簡歷里面了。

簡歷里面寫的一定是你全部了解的辖源，因?yàn)榍岸说募夹g(shù)椬笠剑或者各種各樣的框架層出不窮，面試者基本不會問一個(gè)你沒聽說過的框架同木，那怎么知道你會什么呢浮梢，就從你的簡歷里面看嘍～

我就遇到過很多簡歷寫的很好，但是一問就不知道了彤路。比如有個(gè)簡歷上寫的“對面向?qū)ο缶幊逃猩羁痰睦斫狻憋跸酰覇枺骸懊嫦驅(qū)ο蟮娜笠厥鞘裁础保卮穑骸斑@個(gè)概念性的記不清了洲尊≡恫颍”，好吧坞嘀，那我換一個(gè)：“你平時(shí)怎么實(shí)現(xiàn)封裝和繼承”回答：“平時(shí)項(xiàng)目中基本用不到” 躯护，“那面向?qū)ο蠛兔嫦蜻^程編程有什么區(qū)別呢？” 回答的思路不清晰丽涩，磕磕巴巴棺滞。對于這種情況，個(gè)人覺得你最好就不要把“對面向?qū)ο缶幊逃猩羁痰睦斫狻睂懺诤啔v上了矢渊，因?yàn)槿绻悴粚懠套迹铱赡苓€不會問，但是你掌握的水平和“有深刻理解”差距還是蠻大的矮男，這就是一個(gè)減分項(xiàng)了移必。

還有一個(gè)是簡歷中在個(gè)人技能和項(xiàng)目的第一個(gè)都寫的是“用 node 開發(fā)個(gè)人博客”，剛好我本人最近也在做這塊內(nèi)容毡鉴，想著問下崔泵。然后回答“其實(shí)我是在網(wǎng)上找了篇博客跟著實(shí)現(xiàn)了下秒赤，現(xiàn)在忘記了”

所以說簡歷上真的要寫你非常了解的領(lǐng)域啊憎瘸！只是聽過名次和寫寫 demo 的話寫在簡歷上反而是減分項(xiàng)倒脓。

注意用詞

簡歷中對某項(xiàng)技術(shù)的描述一般有以下幾個(gè)詞語：

了解：理解基本概念，有過簡單的使用經(jīng)驗(yàn) —— “用過” 熟悉：基本操作很熟練含思，有過密集的使用經(jīng)驗(yàn) ——“用得不少” 精通：深入理解其底層原理及各種實(shí)現(xiàn)方式崎弃，并有豐富的項(xiàng)目經(jīng)驗(yàn)——“有研究”

切記準(zhǔn)確用詞，慎用“精通”：恕饲做！

電面

收到簡歷之后我們一般都會先進(jìn)行一輪電話面試（每個(gè)公司的流程不一樣），因?yàn)槌杀颈容^低嘛遏弱，問一些基礎(chǔ)問題大概就可以知道面試者的水平在哪個(gè)范圍了盆均，和我們招聘的崗位的匹配程度如何。

同時(shí)漱逸，我建議面試者被邀現(xiàn)場面試之前最好也進(jìn)行下電話溝通泪姨，如果直接現(xiàn)場面的話最少你要請半天假吧，如果說雙方的匹配程度比較低就不用白跑一趟了饰抒。

我們這邊電面以基礎(chǔ)為主肮砾，如果基本能夠符合我們的招聘要求，再約現(xiàn)場面袋坑。

我個(gè)人認(rèn)為仗处，基礎(chǔ)比較好（不僅僅是 js 基礎(chǔ)，還有計(jì)算機(jī)體系基礎(chǔ)和編程基礎(chǔ)）枣宫，三大框架熟悉其一并略懂原理 這兩點(diǎn)是最起碼的婆誓，自己用 webpack 配置過項(xiàng)目懂得 webpack 打包原理、學(xué)習(xí)過框架源碼也颤、對性能優(yōu)化有過實(shí)踐洋幻、對新技術(shù)的了解程度 這些都是加分項(xiàng)（因?yàn)槲覀冺?xiàng)目中沒有用到 node，node 基本不會問翅娶，除非你在簡歷中寫有）文留。

并且也會考慮面試者的綜合素質(zhì)，主要是表達(dá)能力（溝通無礙就好）故觅、性格是否十分內(nèi)向厂庇、回答問題是否條理清晰。

我個(gè)人的話會有一個(gè)常問的面試題庫输吏，然后在電面前根據(jù)面試者的簡歷篩選要問的問題，比如前面說到的替蛉，你簡歷中寫有“對面向?qū)ο笥猩羁痰睦斫狻惫峤Γ敲次揖蜁?zhǔn)備幾個(gè)面向?qū)ο蟮膯栴}拄氯。

整體來說，電面之后就基本可以確定了面試者和我們招聘崗位的匹配程度它浅，在面試的過程中會記錄下面試者的回答情況译柏，對于有明確答案的問題看其是否回答正確，對于開放性問題姐霍，看其思路是否清晰鄙麦。

我個(gè)人的話問框架 api 都是一些比較常用基礎(chǔ)的 api，考察下你使用到什么程度镊折，比較會問一些原理胯府，比如 vue 的雙向綁定原理（vue 2.0 和 vue 3.0，兩種實(shí)現(xiàn)的優(yōu)缺點(diǎn)）恨胚、vue 的 nexttick 原理骂因、diff 算法等。

我們在電面完之后通常都會問面試者有什么問題想要問我們的赃泡，大部分面試者會問我們組所做的業(yè)務(wù)寒波，也會被問到技術(shù)方面的問題= =，一般這個(gè)環(huán)節(jié)都是看下面試者有什么訴求的升熊，就是你如果有什么強(qiáng)烈的訴求可以問下俄烁。

電面完之后一般不會直接說是否通過，都會說“后續(xù)可能還會有其他同事聯(lián)系您”级野，但是根據(jù)點(diǎn)面的過程猴娩，應(yīng)該自己心里都會有個(gè)大概吧= =

關(guān)于為什么不直接給答案，一方面是處于禮貌:)勺阐，一方面是可能當(dāng)時(shí)并不能及時(shí)給出結(jié)果卷中。

一個(gè)比較好的方法就是面試完需要考慮下才能給出答復(fù)，并且一般就算面試沒有過也不會再給你說沒有過渊抽。所以默認(rèn)一周之內(nèi)如果沒有 hr 再聯(lián)系你蟆豫，基本就可以認(rèn)為是面試沒有過了。

現(xiàn)場面

一般電面之后我們會找 hr 小姐姐約現(xiàn)場面試懒闷，對于現(xiàn)場面試我并沒有太多的經(jīng)驗(yàn)十减，這里只是給出參考意見。

現(xiàn)場面就看各個(gè)面試官的習(xí)慣了愤估，有的會繼續(xù)問一些技術(shù)帮辟，有的會重視項(xiàng)目經(jīng)驗(yàn)，我們這是現(xiàn)場技術(shù)面之后要給一個(gè)定級玩焰，看是否達(dá)到招聘要求由驹。

一般情況下是第一輪面試之后如果能給定級那么就找我們技術(shù) leader 來聊下，把把關(guān)昔园，沒啥問題再找 hr 小姐姐來聊下蔓榄。

給剛畢業(yè)大學(xué)生的一點(diǎn)建議

剛畢業(yè)找工作并不是全看技術(shù)

在剛畢業(yè)的時(shí)候我會認(rèn)為找工作是只看技術(shù)的并炮，畢竟我們是技術(shù)崗位。

但是現(xiàn)在自身的感覺包括也和其他小伙伴聊過之后發(fā)現(xiàn)技術(shù)有的時(shí)候占比也沒有想象那么高甥郑。

因?yàn)槠鋵?shí)我們畢業(yè)之后 1 -2 年內(nèi)并不是特別能拉開差距逃魄，大家的水平相差都不是特別大。

這個(gè)時(shí)候可能一些其他的品質(zhì)更重要澜搅，比如你的溝通能力伍俘、你的性格、是否踏實(shí)勉躺。

同時(shí)癌瘾，找工作這個(gè)事情，運(yùn)氣和緣分也是很重要的赂蕴，比如當(dāng)時(shí)的崗位是否是急缺崗位柳弄，如果是新增的部門或者剛好有人離職需要補(bǔ)位，這些特殊情況下概说，可能要求會稍微降低些（絕對不會降低太多）碧注。

所以最好是找團(tuán)隊(duì)人員內(nèi)推，這樣對團(tuán)隊(duì)的情況會更加了解糖赔。

但是個(gè)人覺得萍丐，3 年之后技術(shù)水平的差距就會越來越大了，并且想要縮短差距也會越來越難放典。

剛畢業(yè)盡量去大公司

其實(shí)就和你上大學(xué)選擇名校還是一般學(xué)校逝变，有些人說不想當(dāng)大公司的螺絲釘?shù)臅r(shí)候可以先問下自己能不能夠進(jìn)入大公司，不要還沒有進(jìn)入就開始酸奋构。

有能力去而選擇不去和去不了是兩個(gè)概念壳影。

從自身以及周圍人的經(jīng)驗(yàn)而談，大公司你能學(xué)到的東西從各方面都是比小公司強(qiáng)一點(diǎn)的（這里說的小公司不代表某些小而精的公司）弥臼。

個(gè)人經(jīng)驗(yàn)而言宴咧，大公司并不是每個(gè)人都是螺絲釘，做重復(fù)的勞動径缅，因?yàn)槟闼鶎拥牟块T有很多掺栅，你需要和各種各樣的前端、后端纳猪、產(chǎn)品氧卧、設(shè)計(jì)、QA 接觸氏堤，每個(gè)人的習(xí)慣都不盡相同沙绝，也會遇到跨部門合作，不同部門的技術(shù)棧可能會不一樣宿饱，所以熏瞄，你所接觸的東西是多元化的脚祟；

相反谬以，小公司所接觸的前端、后端由桌、設(shè)計(jì)和 QA 基本都比較固定为黎，基本上也不會有跨部門合作的需求，并且技術(shù)棧相對而言比較固定行您，使用了一套技術(shù)椕基本也不會換，所以你的技術(shù)提升視野可能會稍微窄一點(diǎn)娃循。

并且大公司的業(yè)務(wù)復(fù)雜程度和用戶數(shù)量也是小公司所不能提供的炕檩。

說句實(shí)在話，簡歷中有知名互聯(lián)網(wǎng)公司的工作經(jīng)驗(yàn)是很加分的捌斧，基本都能有個(gè)面試資格笛质，因?yàn)閺哪撤N程度降低了成本，因?yàn)榧热荒軌蛉ブヂ?lián)網(wǎng)公司捞蚂，說明肯定是有優(yōu)勢的妇押。

不要只會 API，要了解其原理

我們老大經(jīng)常給我們說過的一句話是：“不要只會一些 API 的東西”姓迅，現(xiàn)在前端的一個(gè)現(xiàn)象是敲霍，很多人使用了一些 API，就覺得掌握了某些知識丁存。

要注重一些底層知識肩杈，一些原理，這才是長遠(yuǎn)發(fā)展的必備技能解寝。

比如在電面的時(shí)候問：“一句話概述下什么是 promise”扩然，很多人都回答 promise 的使用方法。

找工作是雙向選擇的過程编丘，一個(gè)好的團(tuán)隊(duì)很重要

找工作真的是雙向選擇的過程与学，不僅僅是公司選擇你，也是你選擇公司的過程嘉抓，有能力的話最好找一個(gè)好的團(tuán)隊(duì)索守，做的業(yè)務(wù)是自己喜歡的，最起碼不能太反感不是抑片。

其實(shí)從面試官你基本也可以判斷出該團(tuán)隊(duì)的水平卵佛，個(gè)人的一點(diǎn)看法是，如果你本身還處于成長階段，如果面試時(shí)候問的問題你都可以順利的回答出截汪，那么該工作你就要慎重考慮下疾牲，可能成長空間會小一點(diǎn)。

減少跳槽的頻率

關(guān)于跳槽頻率衙解，這個(gè)不管是技術(shù) leader 和 hr 都是考慮的一個(gè)問題阳柔。

因?yàn)榍皫啄辏瑐€(gè)人感覺漲薪的最便捷途徑就是跳槽蚓峦，漲薪幅度會比較高舌剂，在一家公司等加薪比較慢。

但是如果你跳槽過于頻繁其實(shí)是不利的暑椰，個(gè)人認(rèn)為霍转，一年跳槽一次這個(gè)頻率就有些高了。

京東也是將這點(diǎn)明確有要求的一汽，一票否決制度避消，五二原則（五年內(nèi)之內(nèi)最多在兩家公司）

關(guān)于學(xué)歷

現(xiàn)在很多公司的門檻都是本科相關(guān)專業(yè)畢業(yè)，并且以后的要求肯定會越來越高召夹。

每個(gè)公司要求不一樣岩喷。

覺得面試中有些問題工作中用不到

很多人都會有這樣的一個(gè)問題：覺得面試中問的很多問題在實(shí)際工作中根本用不到。

我覺得你會有這樣的問題可能是你和這個(gè)公司的崗位并不相匹配戳鹅。

因?yàn)楫?dāng)時(shí)我面試餓了么的時(shí)候均驶，問我了一些簡單的算法的問題和一些底層原理，但是面試的時(shí)候還有些吐槽枫虏。

入職之后妇穴，發(fā)現(xiàn)面試問的問題在工作中確實(shí)用到了，并且在自己準(zhǔn)備面試題的過程中隶债，也是根據(jù)平時(shí)的工作經(jīng)驗(yàn)總結(jié)的腾它。

自己當(dāng)時(shí)覺得用不到是因?yàn)橹暗臉I(yè)務(wù)場景不夠復(fù)雜，用戶量不夠大死讹，所以有些知識點(diǎn)用不到瞒滴，很多產(chǎn)品需求都是需要自己實(shí)現(xiàn)的，現(xiàn)有的組件不能滿足有些問題赞警。

比如自己需要實(shí)現(xiàn)一個(gè)組織架構(gòu)樹妓忍，對每一個(gè)節(jié)點(diǎn)進(jìn)行不同的操作，有的時(shí)候還需要 table 和 tree 相結(jié)合愧旦，一些比較復(fù)雜的節(jié)點(diǎn)數(shù)據(jù)可能比較多世剖，所以還需要考慮性能優(yōu)化的問題。

所以面試的時(shí)候就會問: 如何遍歷一個(gè)樹笤虫，并對其進(jìn)行優(yōu)化旁瘫。

注重底層原理和概念的學(xué)習(xí)

有的人會問 底層知識祖凫，原理有沒有用？酬凳？ 答案肯定是有用的；菘觥！

對于一個(gè)人的技能宁仔，我覺得最重要的是解決問題的能力稠屠，因?yàn)槲覀兊墓ぷ髌鋵?shí)就是解決一個(gè)又一個(gè)的問題，不管是從產(chǎn)品層面還是從技術(shù)層面台诗，都是將這個(gè)問題解決完箩。

而你了解更多的底層知識赐俗，更多的原理知識拉队，都是提高你解決問題的能力，如果你知道 api 背后的原理就能更好的選擇使用哪個(gè) api阻逮。

并且了解底層知識和原理也會提高你排查問題的能力粱快，因?yàn)槟愎ぷ髦锌倳龅剑骸懊髅骶褪沁@樣的啊，為什么報(bào)錯啊叔扼，為什么不能用啊事哭，為什么和預(yù)期不對啊”，你如果只是知道 api 是怎么使用的瓜富，有的時(shí)候是沒辦法很好的排查問題的鳍咱。

最好從官方文檔學(xué)習(xí)

不知道大家學(xué)習(xí)知識的時(shí)候都是從何種渠道學(xué)習(xí)的呢？

個(gè)人的建議是最好從官方文檔學(xué)習(xí)与柑，遇到問題最好去看下源碼谤辜。

學(xué)習(xí)知識最好從一手的內(nèi)容學(xué)習(xí)逢勾，只看別人的寫的博客之類的是不行的漩氨，就像吃別人嚼過的饃一樣，包括我這篇文章浪规，我都不能保證所有的觀點(diǎn)和知識點(diǎn)的正確性结蟋，當(dāng)然了脯倚，當(dāng)你對某個(gè)知識點(diǎn)理解不清楚的去看下其他人的觀點(diǎn)也是對你有幫助的。

下面是我個(gè)人的面試題

部分面試題（答案僅供參考嵌屎，不保證其正確性）

CSS

Q1：怎么實(shí)現(xiàn)三列布局（左側(cè)和右側(cè)寬度固定推正，中間自適應(yīng)）

常見 CSS 布局

該問題主要想了解面試者的思維是否有局限性，實(shí)現(xiàn)該布局是一個(gè)比較常見并且方法很多的一種布局方式宝惰，并且可以引導(dǎo)面試者一步一步回答 CSS 相關(guān)的基礎(chǔ)問題植榕。

• 絕對定位 + 中間版塊不給寬度
• 兩側(cè)浮動 + 中間自動撐開（使用 calc 動態(tài)計(jì)算寬度，設(shè)置對應(yīng)寬度的 margin）
• flex掌测，左右設(shè)置 flex-basis内贮，中間設(shè)置 flex-grow

基本上最常見的答案是這三種布局方式产园，但是很多人都只說一個(gè) flex，其他兩種布局方式稍微考慮下就可以想到（o′?□?`o）夜郁，該問題不是想讓面試者回答出什么奇淫技巧什燕，只是對 CSS 基礎(chǔ)知識的一個(gè)考察。

Q 1-1: flex 具體是怎么實(shí)現(xiàn)三列布局的（左側(cè)和右側(cè)的寬度是怎么設(shè)置的竞端，中間自適應(yīng)使用的是哪個(gè)屬性）

flex 設(shè)置寬度和寬度自適應(yīng)應(yīng)該算是 flex 的最基本用法屎即，在面試中，問到 flex 的設(shè)置寬度和中間自適應(yīng)具體是哪個(gè)屬性事富，很多面試者都回答“不記得了技俐，平時(shí)都是自動填充的”

Q 1-2: 設(shè)為 flex 屬性之后，子元素的哪些屬性會失效

float统台、clear 和 vertical-align

Q 1-3 float/絕對定位 怎么實(shí)現(xiàn)中間寬度自適應(yīng)

Q2: 移動端開發(fā) rem 布局的原理（rem 單位換算）

Q3: 有沒有自己寫過組件

Q 3-1: 怎么實(shí)現(xiàn)樣式的繼承和復(fù)用

Q 3-2: 你平時(shí)都是怎么管理自己的 CSS

• base.css雕擂、common.css、page.css（對應(yīng)都存放哪些內(nèi)容）

Q 3-3: 你平時(shí)都是使用 sass/lass/styles 的哪些功能贱勃，sass 的計(jì)算屬性對頁面性能有影響嗎井赌？

Q4: 如何在頁面上畫一個(gè)圓

• SVG
• CANVAS
• css border-radius
• background
• map + area
• 直接放一張圓形圖片

Q 4-1: 如何在頁面上畫一個(gè)橢圓

<style>
  .sector {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: #f00 transparent transparent;
    border-radius: 50px;
  }
</style>
復(fù)制代碼

Q 4-2: 如果圓邊界模糊，有什么辦法去鋸齒

這幾個(gè)問題基本上可以了解到面試者平時(shí)都是怎么使用 CSS 的了贵扰，對于 CSS仇穗，我覺得夠用就好，因?yàn)槲覀儸F(xiàn)在基本急太處理兼容性問題（有 babel 并且我們的項(xiàng)目不要求兼容 ie6 等古老的瀏覽器）

JS

Q1: JS 基本數(shù)據(jù)類型

cherryblog.site/deepcopy.ht…

Q 1-1 JS 數(shù)據(jù)類型有哪些戚绕，其中基本數(shù)據(jù)類型有哪些

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (ECMAScript 6 新定義)
• Object

(ES6之前)其中5種為基本類型:string,number,boolean,null,undefined,ES6出來的Symbol也是原始數(shù)據(jù)類型 纹坐，表示獨(dú)一無二的值。Object 為引用類型(范圍挺大),也包括數(shù)組舞丛、函數(shù)

Q: 1-2 原始數(shù)據(jù)類型和引用類型的區(qū)別

在內(nèi)存中的存儲方式不同耘子，原始數(shù)據(jù)類型在內(nèi)存中是棧存儲，引用類型是堆存儲 棧（stack）為自動分配的內(nèi)存空間瓷马，它由系統(tǒng)自動釋放拴还；而堆（heap）則是動態(tài)分配的內(nèi)存，大小不定也不會自動釋放欧聘。

在內(nèi)存中存儲方式的不同導(dǎo)致了原始數(shù)據(jù)類型不可變 原始數(shù)據(jù)類型和引用數(shù)據(jù)類型做賦值操作一個(gè)是傳值一個(gè)是傳址

Q: 1-3 深拷貝 和 淺拷貝 的區(qū)別

cherryblog.site/deepcopy.ht…

Q: 1-4 怎么實(shí)現(xiàn)淺拷貝

• ES6：object.assign()
• 展開運(yùn)算符…
• 自己封裝函數(shù)實(shí)現(xiàn)

Q: 1-5 怎么實(shí)現(xiàn)一個(gè)深拷貝

• JSON.parse() (但是如果里面有 function 和 undefined 不可用)
• lodash
• 自己封裝

Q: 1-6 null和undefined的差異

相同點(diǎn):

• 在 if判斷語句中,值都默認(rèn)為 false
• 大體上兩者都是代表無,具體看差異 差異:
• null轉(zhuǎn)為數(shù)字類型值為0,而undefined轉(zhuǎn)為數(shù)字類型為 NaN(Not a Number)
• undefined是代表調(diào)用一個(gè)值而該值卻沒有賦值,這時(shí)候默認(rèn)則為undefined
• null是一個(gè)很特殊的對象,最為常見的一個(gè)用法就是作為參數(shù)傳入(說明該參數(shù)不是對象)
• 設(shè)置為null的變量或者對象會被內(nèi)存收集器回收

這個(gè)問題是一個(gè) JS 基礎(chǔ)相關(guān)的問題片林，可以考察面試者 JS 基本功

Q2: 實(shí)現(xiàn)給數(shù)字添加千分位符的方法

• 正則表達(dá)式："12345678".replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')
• 字符串分析， 循環(huán)怀骤，然后3位加','
• 數(shù)字分析费封， 取到整數(shù)部分， %1000 操作蒋伦， 然后加逗號 拼接字符串 (12345678).toLocaleString("en-US") => "12,345,678"

Q3: 面向?qū)ο笕笠?/h3>

cherryblog.site/javascript-…

• 封裝弓摘、繼承、多態(tài)

Q3-1: 能夠簡單的說明面向?qū)ο蠛兔嫦蜻^程的區(qū)別嗎

• 面向過程就是分析出解決問題所需要的步驟痕届，然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn)韧献，使用的時(shí)候一個(gè)一個(gè)依次調(diào)用就可以了末患。
• 面向?qū)ο笫前褬?gòu)成問題事務(wù)分解成各個(gè)對象，建立對象的目的不是為了完成一個(gè)步驟锤窑，而是為了描敘某個(gè)事物在整個(gè)解決問題的步驟中的行為璧针。
• 面向?qū)ο螅?狗.吃(屎)
• 面向過程： 吃.(狗,屎)

Q3-4: 怎么實(shí)現(xiàn)封裝和繼承

Q3-5: 一句話概述什么是閉包

Q4: 一句話概述什么是 promise

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.

譯文：Promise對象用于異步操作，它表示一個(gè)尚未完成且預(yù)計(jì)在未來完成的異步操作渊啰。

Q 4-1: promise 解決了哪些問題

Q 4-2: 在沒有 promise 之前探橱，怎么解決異步回調(diào)

JS 異步回調(diào)的 4 種解決方案

Q 4-3: 自己如何實(shí)現(xiàn)一個(gè) promise

• new Promise(fn) 返回一個(gè)promise對象
• 在fn 中指定異步等處理
  • 處理結(jié)果正常的話，調(diào)用resolve(處理結(jié)果值)
  • 處理結(jié)果錯誤的話绘证，調(diào)用reject(Error對象)

promise 也是一道常見的面試題隧膏，在開始問什么是 promise 的時(shí)候，很少有人能夠用一個(gè)話說出什么是 promise嚷那，都只是說 promise 的 api 怎么使用胞枕，包括閉包，也很少有人能夠用一句話概括什么是閉包车酣。個(gè)人感覺不能用一句話概括都是理解的不夠深入或者沒有從更高的層面理解

Q5: eventloop

在一個(gè)事件循環(huán)中曲稼，異步事件返回結(jié)果后會被放到一個(gè)任務(wù)隊(duì)列中。然而湖员，根據(jù)這個(gè)異步事件的類型，這個(gè)事件實(shí)際上會被對應(yīng)的宏任務(wù)隊(duì)列或者微任務(wù)隊(duì)列中去瑞驱，當(dāng)執(zhí)行棧為空的時(shí)候娘摔，主線程會首先查看微任務(wù)中的事件，如果微任務(wù)不是空的那么執(zhí)行微任務(wù)中的事件唤反，如果沒有在宏任務(wù)中取出最前面的一個(gè)事件凳寺。把對應(yīng)的回調(diào)加入當(dāng)前執(zhí)行棧...如此反復(fù)，進(jìn)入循環(huán)彤侍。

• macro-task(宏任務(wù))
  • setTimeout
  • setInterval
  • setImmediate
• micro-task(微任務(wù))
  • Promise
  • process.nextTick

eventloop 也是一個(gè)很常見的面試題肠缨，也是回答出來比較高的一個(gè)問題，可以寫一個(gè)函數(shù)盏阶，讓面試者回答輸出

計(jì)算機(jī)相關(guān)

Q1 :比較 HTML XML XHTML 和 JSON

• 我們最熟悉的就是 HTML（HyperText Markup Language / 超文本標(biāo)記語言）晒奕，用來描述和定義 網(wǎng)絡(luò)內(nèi)容的標(biāo)記語言，超文本的意思是說名斟，除了能標(biāo)記本文脑慧，還能標(biāo)記 圖片，視頻砰盐，鏈接 等其他內(nèi)容

• XML（Extensible Markup Language / 可擴(kuò)展標(biāo)記語言）闷袒，表現(xiàn)就是給一堆文檔加上標(biāo)簽，說明里面的數(shù)據(jù)是什么意思岩梳，方便存儲囊骤、傳輸晃择、分享數(shù)據(jù)。和 HTML 的區(qū)別是 HTML 的標(biāo)簽就預(yù)定義的也物，XML 是可擴(kuò)展的 XHTML: Extensible Hypertext Markup Language / 可擴(kuò)展超文本標(biāo)記語藕各，其實(shí)就是 HTML 的嚴(yán)格語法形式，約定了 屬性名必需小寫焦除，空元素必需關(guān)閉激况，元素名小寫，屬性名必需加引號膘魄，布爾類型必需加屬性值

• JSON（Javascript Object Notation）比較輕量級的數(shù)據(jù)交換格式乌逐，由鍵值對組成，數(shù)據(jù)格式比較簡單, 易于讀寫, 格式都是壓縮的, 占用帶寬小

這個(gè)問題確實(shí)是一個(gè)很基礎(chǔ)的計(jì)算機(jī)先關(guān)的問題创葡，但是很多的面試者仍然不能準(zhǔn)確的說出 HTML 的含義（超文本標(biāo)記語言）浙踢，在說 XML 和 JSON 的區(qū)別的時(shí)候只能回答出 XML 常用作配置文件，JSON 用于 AJAX 傳輸數(shù)據(jù)

Q2: 概述輸入一個(gè)url到網(wǎng)頁呈現(xiàn)的過程

Q 2-1: DNS 解析的詳細(xì)過程

Q 2-2: 概述 http 的緩存控制（http2 與相關(guān)緩存控制）

Q 2-3: 簡述三次握手

Q 2-4: 頁面加載白屏的原因有哪些灿渴，以及如何監(jiān)控白屏?xí)r間洛波，如何優(yōu)化

Q 2-5：script 標(biāo)簽的屬性有哪些

Q 2-6: script 標(biāo)簽的 defer 和 async 標(biāo)簽的作用與區(qū)別

Q 2-7: script intergrity的作用

這個(gè)問題真的是前端面試必問問題，因?yàn)槟苋矫婵疾烀嬖囌叩哪芰ι叮芨鶕?jù)面試者的回答層層層深入蹬挤，引申出好多問題

Q3: 你所接觸的前端領(lǐng)域的通訊有哪些

• 前端和后端
• 前端和移動端
• 前端 父頁面 和 iframe 之間
• 瀏覽器各個(gè) tab 之間
• web workers 線程通信
• 路由間的通信
• vue 父子組件

Q 3-1: 通信的要點(diǎn)和目的

要點(diǎn)：1. 發(fā)送者和接收者 2. 傳輸媒介 3. 傳輸?shù)臄?shù)據(jù) 4. 傳輸格式（協(xié)議）

目的：1. 同步數(shù)據(jù) 2. 傳遞指令(執(zhí)行的方法)

框架

Q1: 三大框架解決了傳統(tǒng) JQ 開發(fā)的哪些問題

使前端不用再操縱 DOM,數(shù)據(jù)驅(qū)動，通過數(shù)據(jù)的改變直接改變 DOM

Q 1-1: Vue2.0 怎么實(shí)現(xiàn)雙向綁定的

Q 1-2: Vue3.0 怎么實(shí)現(xiàn)雙向綁定的

Q 1-3: Object.defineProperty() 和 proxy 的區(qū)別

Q2: 你使用過哪些 Vue/React 全家桶棘幸，分別解決了什么問題

Q3: Vue/React 的 diff 算法

Q4: Vue hash 路由和 history 路由的區(qū)別

Q5: Vue 計(jì)算屬性和 watch 在什么場景下使用

Q6: Vue 的 nexttick 實(shí)現(xiàn)的原理

對于 Vue/React/Angular 三大框架會使用哪些 api 是次要的焰扳，主要是要了解框架解決的問題和實(shí)現(xiàn)原理。

打包工具

Q1: webpack 相關(guān)误续，是否自己配置過

Q1-1: webpack 和其他自動化構(gòu)建工具（gulp吨悍、grunt、rollup）有哪些區(qū)別

• webpack 是 module bundle
• gulp 是 tast runner
• Rollup 是在 Webpack 流行后出現(xiàn)的替代品蹋嵌。Rollup 在用于打包 JavaScript 庫時(shí)比 Webpack 更加有優(yōu)勢育瓜，因?yàn)槠浯虬鰜淼拇a更小更快。 但功能不夠完善栽烂，很多場景都找不到現(xiàn)成的解決方案躏仇。

Q1-2: 模塊化解決了前端的哪些痛點(diǎn)

• 命名沖突
• 文件依賴
• 代碼復(fù)用

Q1-3: webpack 的 loader 和 plugin 區(qū)別，舉幾個(gè)常用的 loader 和 plugin 并說出作用

• loader 用于對模塊的源代碼進(jìn)行轉(zhuǎn)換愕鼓。loader 可以使你在 import 或"加載"模塊時(shí)預(yù)處理文件钙态。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”菇晃，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法册倒。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL磺送。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件驻子！ 因?yàn)?webpack 本身只能處理 JavaScript灿意，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換崇呵，loader 本身就是一個(gè)函數(shù)缤剧，接受源文件為參數(shù)，返回轉(zhuǎn)換的結(jié)果域慷。
• Plugin 是用來擴(kuò)展 Webpack 功能的荒辕，通過在構(gòu)建流程里注入鉤子實(shí)現(xiàn)，它給 Webpack 帶來了很大的靈活性犹褒。 通過plugin（插件）webpack可以實(shí) loader 所不能完成的復(fù)雜功能抵窒，使用 plugin 豐富的自定義 API 以及生命周期事件，可以控制 webpack 打包流程的每個(gè)環(huán)節(jié)叠骑，實(shí)現(xiàn)對 webpack 的自定義功能擴(kuò)展李皇。

Q1-4: webpack 打包的過程

• 讀取文件，分析模塊依賴
• 對模塊進(jìn)行解析執(zhí)行（深度遍歷）
• 針對不同的模塊使用不同的 loader
• 編譯模塊宙枷，生成抽象語法樹（AST）
• 遍歷 AST掉房，輸出 JS

Q1-5: webpack 打包之后生成哪些文件

Q2: webpack 打包出來的文件體積過大怎么辦

Q3: webpack 熱部署的原理

Q4: webpack 打包速度過慢怎么辦？

關(guān)于 webpack 慰丛，對于初級前端卓囚，基本上只需要可以 cli 將項(xiàng)目起來，知道 loader 和 plugin 的區(qū)別以及常用的 loader璧帝、plugin 個(gè)人覺得就差不多了捍岳，但是對于 高級前端及以上，最好還是了解下 webpack 相關(guān)的原理

GIT 相關(guān)

Q1: git rebase

Q2: git cherrypick

作者：sunshine小小倩
鏈接：https://juejin.im/post/5c8bb79e6fb9a04a006fe79a
主頁：https://juejin.im/user/584d7a3e2f301e00572fb7fc
來源：掘金