the first 論被離職的無奈

跟往常一樣樂樂呵呵的上班，突然間被通知辦公地點(diǎn)要搬到幾十公里外的新辦公區(qū)(僅僅是外包同學(xué))嫂冻，聽到這個不幸的消息心里哇涼哇涼的创倔。這可咋辦呢捉貌？前一個月閑的無聊投過一些簡歷传泊，結(jié)果面試反饋是基礎(chǔ)不行料仗。害

離搬地方還有半個月時(shí)間状婶，真的是時(shí)間緊任務(wù)重呀意敛。頓時(shí)覺得壓力山大，本身工作樂樂呵呵該上班上班該下班下班膛虫，leader都明確表示讓我再找工作機(jī)會了草姻，沒辦法上號吧！

上號（BOSS直聘）

對于沒有學(xué)歷的我,流下了沒學(xué)歷的淚水稍刀。對于投簡歷的策略我采取的是廣撒網(wǎng)政策哈哈哈撩独，無論是外包還是正式，大公司or小企業(yè)账月，約了面試就行

這個結(jié)果就是一天可能會排四五個面試综膀，對此，還在上班的我只能偷摸搬著電腦到樓下視頻面~~~

前期準(zhǔn)備

因?yàn)樯洗握夜ぷ鬟€是一年多之前局齿，所以前端面試題也都忘的差不多了剧劝。并且這次面試時(shí)間也比較緊張只能邊面試邊記錄面試題了，很倉促的感覺呀

面試ing

大大小小面了幾十個项炼，總結(jié)了一下的幾個面試題：

1.js數(shù)據(jù)類型

值類型（基本類型）：字符串（String）担平、數(shù)字（Number）、布爾（Boolean）锭部、對空（Null）暂论、未定義（Undefined）、Symboly

引用數(shù)據(jù)類型：對象（Object）拌禾、數(shù)組（Array）取胎、函數(shù)（Function）

2.宏任務(wù)和微任務(wù)

宏任務(wù)：(macro)task，可以理解是每次執(zhí)行棧執(zhí)行的代碼就是一個宏任務(wù)（包括每次從事件隊(duì)列中獲取一個事件回調(diào)并放到執(zhí)行棧中執(zhí)行）湃窍。

w微任務(wù)：microtask,可以理解是在當(dāng)前 task 執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)闻蛀。也就是說，在當(dāng)前task任務(wù)后您市，下一個task之前觉痛，在渲染之前。

具體見：https://zhuanlan.zhihu.com/p/78113300

3.繼承的幾種方式及優(yōu)缺點(diǎn)

1. 原型鏈繼承

實(shí)現(xiàn)方式：將子類的原型鏈指向父類的對象實(shí)例

優(yōu)點(diǎn):可繼承構(gòu)造函數(shù)的屬性茵休，父類構(gòu)造函數(shù)的屬性薪棒，父類原型的屬性

缺點(diǎn)：無法向父類構(gòu)造函數(shù)傳參手蝎；且所有實(shí)例共享父類實(shí)例的屬性，若父類共有屬性為引用類型俐芯，一個子類實(shí)例更改父類構(gòu)造函數(shù)共有屬性時(shí)會導(dǎo)致繼承的共有屬性發(fā)生變化

2. 構(gòu)造函數(shù)繼承

實(shí)現(xiàn)方式：使用call或者apply更改子類函數(shù)的作用域棵介，使this執(zhí)行父類構(gòu)造函數(shù)，子類因此可以繼承父類共有屬性

優(yōu)點(diǎn)：可解決原型鏈繼承的缺點(diǎn)

缺點(diǎn)：不可繼承父類的原型鏈方法吧史，構(gòu)造函數(shù)不可復(fù)用

3. 組合繼承

實(shí)現(xiàn)方式：綜合使用構(gòu)造函數(shù)繼承和原型鏈繼承

優(yōu)點(diǎn)：可繼承父類原型上的屬性邮辽，且可傳參；每個新實(shí)例引入的構(gòu)造函數(shù)是私有的

缺點(diǎn)：會執(zhí)行兩次父類的構(gòu)造函數(shù)贸营，消耗較大內(nèi)存吨述，子類的構(gòu)造函數(shù)會代替原型上的那個父類構(gòu)造函數(shù)

4.什么是閉包

“閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

例如在javascript中莽使，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量锐极，所以閉包可以理解成“定義在一個函數(shù)內(nèi)部的函數(shù)“。

在本質(zhì)上芳肌，閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來的橋梁±卟悖”

5.數(shù)組去重

1. 利用ES6 Set去重

2. 利用for嵌套for然后splice去重

3. 新建一個空數(shù)組亿笤，循環(huán)遍歷舊數(shù)組判斷如果新數(shù)組中沒有就放進(jìn)去

4. 利用sort排序，然后在對比相鄰的兩個數(shù)

5. hasOwnProperty判斷是否存在

6. 使用遞歸去重

...

6.get和post的區(qū)別

1. 傳送方式：get通過地址欄傳輸栋猖，post通過報(bào)文傳輸

2. 傳輸長度：get有長度限制净薛，post無限制

3. 緩存：get請求可以被緩存，post不可以被緩存

4. 編碼：get請求只URL編碼蒲拉，post支持多種編碼方式

5. 歷史記錄：get請求的記錄會留在歷史記錄中肃拜，post請求不會留在歷史記錄

6. 字符限制：get只支持ASCII字符，post沒有字符類型限制

7.vue生命周期

beforeCreate:在實(shí)例初始化之后雌团、進(jìn)行數(shù)據(jù)偵聽和事件/偵聽器的配置之前同步調(diào)用燃领。

created:在實(shí)例創(chuàng)建完成后被立即同步調(diào)用。

beforeMount->onBeforeMount:在掛載開始之前被調(diào)用锦援。

mounted->onMounted:在實(shí)例掛載完成后被調(diào)用猛蔽。

beforeUpdate->onBeforeUpdate:在數(shù)據(jù)發(fā)生改變后。

updated->onUpdated:在數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和更新完畢之后被調(diào)用灵寺。

beforeDestroy->onBeforeUnmount:在卸載組件實(shí)例之前調(diào)用曼库。在這個階段，實(shí)例仍然是完全正常的略板。

destroyed->onUnmounted:卸載組件實(shí)例后調(diào)用毁枯。調(diào)用此鉤子時(shí)，組件實(shí)例的所有指令都被解除綁定叮称，所有事件偵聽器都被移除种玛，所有子組件實(shí)例被卸載藐鹤。

8.localStorage和sessionStorage和cookie

共同點(diǎn):

都是保存在瀏覽器端、且同源的

不同點(diǎn)：

cookie 數(shù)據(jù)始終在同源的 http 請求中攜帶（即使不需要）sessionStorage 和 localStorage 不會自動把數(shù)據(jù)發(fā)送給服務(wù)器蒂誉，僅在本地保存

存儲大小限制也不同教藻，cookie 數(shù)據(jù)不能超過 4K，同時(shí)因?yàn)槊看?http 請求都會攜帶 cookie右锨、所以 cookie 只適合保存很小的數(shù)據(jù)括堤，如會話標(biāo)識。sessionStorage 和 localStorage雖然也有存儲大小的限制绍移，但比 cookie 大得多悄窃，可以達(dá)到 5M 或更大

數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效蹂窖；localStorage： 始終有效轧抗，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)瞬测；cookie：只在設(shè)置的 cookie 過期時(shí)間之前有效横媚，即使窗口關(guān)閉或?yàn)g覽器關(guān)閉

作用域不同，sessionStorage 不在不同的瀏覽器窗口中共享月趟，即使是同一個頁面灯蝴； localstorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的

9.vue2和vue3區(qū)別

1. vue2和vue3雙向數(shù)據(jù)綁定原理發(fā)生了改變孝宗。vue2 的雙向數(shù)據(jù)綁定是利用ES5 的一個 API Object.definePropert()對數(shù)據(jù)進(jìn)行劫持 結(jié)合 發(fā)布訂閱模式的方式來實(shí)現(xiàn)的穷躁。

2. 生命周期鉤子使用不同。具體見第七條

3. vue3的template支持多個根標(biāo)簽因妇，vue2不支持

4. vue3引入了tree-shaking功能问潭，按需打包體積更小

10.call apply bind的區(qū)別

相同點(diǎn):

    三個函數(shù)都會改變this的指向（調(diào)用這三個函數(shù)的函數(shù)內(nèi)部的this）

不同點(diǎn)：

    bind會產(chǎn)生新的函數(shù)，（把對象和函數(shù)綁定死后婚被，產(chǎn)生新的函數(shù)）

    call和apply不會產(chǎn)生新的函數(shù)狡忙，只是在調(diào)用時(shí)，綁定一下而已摔寨。

    call和apply的區(qū)別去枷，第一個參數(shù)都是要綁定的this，apply第二個參數(shù)是數(shù)組（是函數(shù)的所有參數(shù)）是复，call把a(bǔ)pply的第二個參數(shù)單列出來删顶。

11.單頁面性能優(yōu)化

1. 減少http請求

2. 非核心代碼異步請求

3. 優(yōu)化圖片，壓縮圖片

4. 將腳本置底

12. vue2中data為什么不是個函數(shù)淑廊？

重點(diǎn)解釋：各個組件中的數(shù)據(jù)不受影響

vue組件是可復(fù)用的vue實(shí)例逗余，一個組件被創(chuàng)建好之后，就可能被用在各個地方季惩，而組件不管被復(fù)用了多少次录粱，組件中的data數(shù)據(jù)都應(yīng)該是相互隔離腻格，互不影響的.基于這一理念，組件每復(fù)用一次啥繁，data數(shù)據(jù)就會被復(fù)制一次菜职，之后，當(dāng)某一處復(fù)用的地方組件內(nèi)data數(shù)據(jù)被改變時(shí)旗闽，其他復(fù)用地方組件的data數(shù)據(jù)不受影響酬核。

13. 解釋promise原理

為了解決回調(diào)地域的問題，說到底适室，Promise 也還是使用回調(diào)函數(shù)嫡意，只不過是把回調(diào)封裝在了內(nèi)部，使用上一直通過 then 方法的鏈?zhǔn)秸{(diào)用捣辆，使得多層的回調(diào)嵌套看起來變成了同一層的蔬螟，書寫上以及理解上會更直觀和簡潔一些。Promse.all在處理多個異步處理時(shí),只有全部返回才執(zhí)行thenPromse.race就是賽跑的意思汽畴，意思就是說旧巾，Promise.race([p1, p2, p3])里面哪個結(jié)果獲得的快，就返回那個結(jié)果忍些，不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)Promise.any() 接收一個Promise可迭代對象菠齿，只要其中的一個 promise 成功，就返回那個已經(jīng)成功的 promise 如果可迭代對象中沒有一個 promise 成功（即所有的 promises 都失敗/拒絕）坐昙，就返回一個失敗的 promise

14. webpack打包

用的不太多，暫時(shí)沒有總結(jié)汗

15.防抖和節(jié)流

函數(shù)防抖（debounce）：當(dāng)持續(xù)觸發(fā)事件時(shí)芋忿，一定時(shí)間段內(nèi)沒有再觸發(fā)事件炸客，事件處理函數(shù)    才會執(zhí)行一次，如果設(shè)定的時(shí)間到來之前戈钢，又一次觸發(fā)了事件痹仙，就重新開始延時(shí)節(jié)流：

函數(shù)節(jié)流（throttle）：當(dāng)持續(xù)觸發(fā)事件時(shí)，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)  節(jié)流通俗解釋就比如我們水龍頭放水

16.eval作用

把字符串參數(shù)解析成 JS 代碼并運(yùn)行殉了，并返回執(zhí)行的結(jié)果

17.判斷是否是數(shù)組

1.Array.isArray(arr)

2.arr instnceof Array

3.arr.constructor === Array

4.Object.prototype.toString.call(arr) === ‘[object Array]’

18.左側(cè)固定右邊自適應(yīng)

1.css實(shí)現(xiàn)左側(cè)固定开仰，右側(cè)自適應(yīng)布局

2.左側(cè)float定位，右側(cè)margin-left:左側(cè)的寬度

3.左側(cè)absolute,右側(cè)margin-left：左側(cè)寬度

4.flex布局

5.table-cell表格布局

19.Json.stringfy缺點(diǎn)（問了好幾遍）

1.如果包含function,undefined,Symbol這幾種類型薪铜，不可枚舉屬性众弓，鍵值會消失隔箍。

2.轉(zhuǎn)換的數(shù)據(jù)中包含Date對象，JSON.Stringify序列化之后蜒滩，會變成字符串奶稠。

20.js中l(wèi)et和var的區(qū)別

1.作用域不同：var是函數(shù)作用域，let是塊作用域捡遍。在函數(shù)中聲明了var锌订，整個函數(shù)內(nèi)都是有效的,而let由于是塊作用域画株，所以如果在塊作用域內(nèi)定義的變量，在其外面是不可被訪問的

2.let不能在定義之前訪問該變量污秆，但是var可以

3.let不能被重新定義劈猪，但是var是可以的

4.let是ES6新增的命令，之前是沒有的

21.什么是跨域以及產(chǎn)生原因

跨域是指a頁面想獲取b頁面資源良拼，如果a、b頁面的協(xié)議庸推、域名、端口聋亡、子域名不同际乘，或是a頁面為ip地址，b頁面為域名地址

所進(jìn)行的訪問行動都是跨域的脖含，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源

22.回流跟重繪

回流：當(dāng) render tree 的一部分或全部的元素因改變了自身的寬高征堪，布局关拒，顯示或隱藏，或者元素內(nèi)部的文字結(jié)構(gòu)發(fā)生變化 導(dǎo)致需要重新構(gòu)建頁面的時(shí)候谐算，回流就產(chǎn)生了重繪：當(dāng)一個元素自身的寬高畔柔，布局，及顯示或隱藏沒有改變腮考，而只是改變了元素的外觀風(fēng)格的時(shí)候，就會產(chǎn)生重繪踩蔚。例如你改變了元素的

background-color....因此得出了一個結(jié)論：回流必定觸發(fā)重繪，而重繪不一定觸發(fā)回流

23.解釋下http和https

https協(xié)議需要到CA申請證書馅闽，一般免費(fèi)證書較少福也，因而需要一定費(fèi)用。

http是超文本傳輸協(xié)議暴凑，信息是明文傳輸，https則是具有安全性的ssl/tls加密傳輸協(xié)議凯傲。

http和https使用的是完全不同的連接方式嗦篱，用的端口也不一樣，前者是80诫欠，后者是443浴栽。http的連接很簡單，是無狀態(tài)的吃度；

HTTPS協(xié)議是由SSL/TLS+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸椿每、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議英遭，比http協(xié)議安全。

24.keep-alive

keep-alive是什么挖诸？keep-alive是一個抽象組件：它自身不會渲染一個DOM元素多律，也不會出現(xiàn)在父組件鏈中搂蜓；使用keep-alive包裹動態(tài)組件時(shí)辽装，會緩存不活動的組件實(shí)例，而不是銷毀它們殉挽。什么地方用拓巧？有時(shí)候我們不希望組件被重新渲染影響使用體驗(yàn)；或者處于性能考慮肛度，避免多次重復(fù)渲染降低性能。而是希望組件可以緩存下來,維持當(dāng)前的狀態(tài)策吠。這時(shí)候就可以用到keep-alive組件瘩绒。keep-alive的生命周期初次進(jìn)入時(shí)：created > mounted > activated；退出后觸發(fā) deactivated再次進(jìn)入：會觸發(fā) activated蟀给；事件掛載的方法等阳堕，只執(zhí)行一次的放在 mounted 中；組件每次進(jìn)去執(zhí)行的方法放在 activated 中

25.異步和同步

同步異步 前普， 舉個例子來說壹堰，一家餐廳吧來了5個客人，同步的意思就是說峻厚，來第一個點(diǎn)菜谆焊，點(diǎn)了個魚，好辜王， 廚師去捉魚殺魚，過了半小時(shí)魚好了給第一位客人誓禁，開始下位一位客人，就這樣一個一個來辫继，按順序來相同俗慈，

異步呢，異步的意思就是來第一位客人炮车，點(diǎn)什么酣溃，點(diǎn)魚，給它一個牌子扛或，讓他去一邊等吧碘饼，下一位客人接著點(diǎn)菜，點(diǎn)完接著點(diǎn)讓廚師做去吧住涉，哪個的菜先好就先端出來

同步的優(yōu)點(diǎn)是：同步是按照順序一個一個來钠绍，不會亂掉，更不會出現(xiàn)上面代碼沒有執(zhí)行完就執(zhí)行下面的代碼纳寂，缺點(diǎn)：是解析的速度沒有異步的快泻拦；

異步的優(yōu)點(diǎn)是：異步是接取一個任務(wù)忽媒，直接給后臺，在接下一個任務(wù)架曹，一直一直這樣，誰的先讀取完先執(zhí)行誰的展辞， 缺點(diǎn)：沒有順序 万牺，誰先讀取完先執(zhí)行誰的 ，會出現(xiàn)上面的代碼還沒出來下面的就已經(jīng)出來了脚粟，會報(bào)錯核无；

26.css權(quán)重

第一優(yōu)先級：無條件有限的屬性只需要在屬性后面使用！ important团南。它會覆蓋頁面內(nèi)任何位置定義的元素樣式吐根。IE6不支持該屬性。

第二優(yōu)先級：在HTML中給元素標(biāo)簽加style佑惠，即內(nèi)聯(lián)樣式。該方法會造成CSS難以管理旭咽，所以不推薦使用赌厅。

第三優(yōu)先級：有一個或多個id選擇器來定義。例如仲墨，#id{margin： 0}會覆蓋.classname{margin: 3px}

第四優(yōu)先級：有一個或多個類選擇器揍障、屬性選擇器毒嫡、偽類選擇器定義。如.classname{margin:

3px}會覆蓋div{margin: 6px}

第五優(yōu)先級：有一個或多個類型選擇器定義。如div{margin: 6px}覆蓋*{margin: 10px;}

第六優(yōu)先級：通配選擇器碘梢，如*{margin: 6px;}

27.this指向

1.普通函數(shù)->window

2.對象函數(shù)調(diào)用->調(diào)用的這個對象

3.構(gòu)造函數(shù)->新創(chuàng)建的這個對象

4.箭頭函數(shù)->函數(shù)外面的環(huán)境

28.route router區(qū)別

route對象表示當(dāng)前的路由信息伐蒂，包含了當(dāng)前 URL 解析得到的信息。包含當(dāng)前的路徑恩沛，參數(shù)昭雌，query對象等

router對象是全局路由的實(shí)例，用來更改路由

29.New操作符具體干了什么佛纫？

1.創(chuàng)建了一個空對象：并且this變量引入該對象总放，同時(shí)還繼承了函數(shù)的原型

2.設(shè)置原型鏈：空對象指向構(gòu)造函數(shù)的原型對象

3.執(zhí)行函數(shù)體：修改構(gòu)造函數(shù)this指針指向空對象局雄，并執(zhí)行函數(shù)體

4.判斷返回值：返回對象就用該對象，沒有的話就創(chuàng)建一個對象

復(fù)制代碼

總結(jié)

這次倉促的找工作歷時(shí)兩周炬搭，最終兜兜轉(zhuǎn)轉(zhuǎn)也拿到的了滿意的薪資宫盔。不過如果條件允許的話，還是應(yīng)該多面幾家并且做好充足的準(zhǔn)備灼芭，我這次就沒背面試題啥的彼绷，全靠臨場發(fā)揮，在面試中積累經(jīng)驗(yàn)寄悯。

記錄這次面試猜旬，我們明年再戰(zhàn)哈哈