每天10道題，100天后，搞定所有前端面試的高頻知識(shí)點(diǎn)，加油?。?！，在看文章的同時(shí)，希望不要直接看答案，先思考一下自己會(huì)不會(huì)，如果會(huì)，自己的答案是什么？想過(guò)之后再與答案比對(duì)，是不是會(huì)更好一點(diǎn)，當(dāng)然如果你有比我更好的答案，歡迎評(píng)論區(qū)留言，一起探討技術(shù)之美。

面試官：請(qǐng)你簡(jiǎn)述 var、let、const 三者之間的區(qū)別？

我：呃~，好的，三者的作用區(qū)別總結(jié)如下：

var：最常用的變量；允許重復(fù)聲明，但會(huì)導(dǎo)致數(shù)據(jù)被覆蓋；會(huì)產(chǎn)生變量提升；局部變量掛載到全局對(duì)象上，會(huì)造成全局對(duì)象的污染。

console.log(a) // 因變量提升, var a;提到前面但是沒(méi)有賦值，所以值為undefined var a = 1 var a = '你好' // var聲明的變量會(huì)被重新賦值 console.log(a) // a會(huì)打印被重新賦值的值 console.log(window.a) // var聲明的局部變量會(huì)被掛載到全局變量上，造成全局變量的污染。

let：es6新增命令，用法類似var；不允許重復(fù)聲明；不存在變量提升；常作用于塊級(jí)作用域而避免局部變量造成全局變量的污染。

let a=10; console.log(a) // 不存在變量提升，所以值為：10 console.log(window.a) // 不會(huì)造成全局污染，所以值為 undefined for(let i =0;i<3;i++){ // 會(huì)生成塊級(jí)作用域，i 的值只能在塊級(jí)作用域中使用     console.log(i) } console.log(i) // 因?yàn)槟貌坏綁K級(jí)作用域中的值，所以報(bào)錯(cuò)。

const：es6新增命令，用于聲明常量且值無(wú)法被修改；聲明常量必須立刻初始化，否則后期賦值報(bào)錯(cuò)；不能重復(fù)聲明；const指向變量的地址, 只要變量名所引用的地址不變就不會(huì)報(bào)錯(cuò)

const arr = ['小張','小王','小李','小趙'] arr[0]='小明' console.log(arr) // ['小明', '小王', '小李', '小趙'] const arr = [] // 報(bào)錯(cuò)

面試官：請(qǐng)你談?wù)剬?duì)深拷貝與淺拷貝的理解

我：呃~，好的，對(duì)兩者的理解總結(jié)如下：

深拷貝：新數(shù)據(jù)與原數(shù)據(jù)互不打擾。

// 擴(kuò)展運(yùn)算符在一維數(shù)組中是屬于深拷貝，在多維數(shù)組中屬于淺拷貝 let arr = [1,2,3] let newArr = [...arr] newArr.push(4) console.log(arr,newArr) // [1, 2, 3],[1, 2, 3, 4]  // 深拷貝用法 let list = [     {id:1,name:'張三',age:18},     {id:2,name:'李四',age:28},     {id:3,name:'王五',age:38}, ] let newList = JSON.parse(JSON.stringify(list)) newList.pop() console.log(list.length,newList.length) // 3 2

當(dāng)然，深拷貝也有一種標(biāo)準(zhǔn)寫(xiě)法，如下：

// 標(biāo)準(zhǔn)的深拷貝 => 引用數(shù)據(jù)類型(數(shù)組,對(duì)象) function deepClone(source){     const targetObj = source.constructor === Array ? [] : {}     for(let keys in source){         if(source.hasOwnProperty(keys)){             // 引用數(shù)據(jù)類型             if(source[keys] && typeof source[keys] === 'object'){                 targetObj[keys] = source[keys].constructor === Array ? [] : {}                 // 遞歸                 targetObj[keys] = deepClone(source[keys])             }else{                 // 基本數(shù)據(jù)類型,直接賦值                 targetObj[keys] = source[keys]             }         }     }     return targetObj }  let obj = {     name:'張三',     age:18,     hobby:['抽煙','喝酒','燙頭'],     action:{         am:'敲代碼',         pm:'睡覺(jué)'     } } let newObj = deepClone(obj) newObj.name = '李四' console.log(obj.name,newObj.name)// 張三 李四

淺拷貝：新數(shù)據(jù)會(huì)影響原數(shù)據(jù)。

let arr = [1,2,3] let newArr = arr // 對(duì)新數(shù)據(jù)做出改變，原數(shù)據(jù)也會(huì)發(fā)生改變，這種就叫做淺拷貝 newArr.push(4) // [1, 2, 3, 4] console.log(arr,newArr) // [1, 2, 3, 4]

說(shuō)白了，深拷貝是重新獲得一個(gè)新的數(shù)據(jù)，且和原來(lái)的數(shù)據(jù)沒(méi)有任何關(guān)系；淺拷貝雖然能得到一個(gè)新的數(shù)據(jù)，但是和原來(lái)的數(shù)據(jù)仍有一定的聯(lián)系。

面試官：輸入U(xiǎn)RL的那一瞬間瀏覽器做了什么？

我：呃~，URL是由以下幾部分組成：

https: 傳輸協(xié)議（http和tcp之間加了一層 TSL 或者 SSL 的安全層）

www：服務(wù)器

baidu.com：域名

DNS域名系統(tǒng)會(huì)匹配真實(shí)的IP，第一次訪問(wèn)正常，第二次訪問(wèn)會(huì)將域名解析的IP存在本地用來(lái)讀取瀏覽器緩存。

輸入U(xiǎn)RL的那一刻經(jīng)歷了：域名 -> DNS域名系統(tǒng) -> 拿到真實(shí)IP -> 建立連接(TCP的三次握手) -> 拿數(shù)據(jù)，渲染頁(yè)面 -> 四次揮手

具體實(shí)現(xiàn)過(guò)程：

• 1. url解析：判斷是搜索內(nèi)容還是請(qǐng)求URL

• 2. 查找本地緩存：如果有緩存直接返回給頁(yè)面，沒(méi)有緩存則進(jìn)入網(wǎng)絡(luò)請(qǐng)求階段

• 3. DNS解析

• 4. 通過(guò)三次握手建立TCP連接

• 5. 合成請(qǐng)求頭信息，發(fā)送http請(qǐng)求

• 6. 處理響應(yīng)信息

• 7. 通過(guò)四次揮手?jǐn)嚅_(kāi)TCP連接

• 8. 如果響應(yīng)狀態(tài)碼301，則重定向

• 9. 瀏覽器進(jìn)行頁(yè)面渲染：1）解析html，生成DOM樹(shù)；2）根據(jù)css計(jì)算節(jié)點(diǎn)樣式，生成stylesheet；3）生成布局樹(shù)；4）為特定的元素生成獨(dú)立圖層

面試官：說(shuō)一說(shuō)cookie sessionStorage localStorage 區(qū)別？

我：呃~，好的，他們之間的關(guān)系如下：

相同點(diǎn)：

都是瀏覽器存儲(chǔ)，都存儲(chǔ)在瀏覽器本地。

區(qū)別：

• 1.cookie由服務(wù)器或前端寫(xiě)入， sessionStorage以及l(fā)ocalStorage都是由前端寫(xiě)入

• 2.cookie的生命周期由服務(wù)器端寫(xiě)入時(shí)就設(shè)置好的，localStorage是寫(xiě)入就一直存在，除非手動(dòng)清除，sessionStorage是由頁(yè)面關(guān)閉時(shí)自動(dòng)清除

• 3.cookie存儲(chǔ)空間大小約4kb， sessionStorage及l(fā)ocalStorage空間比較大，大約5M

• 4.3者的數(shù)據(jù)共享都遵循同源原則，sessionStorage還限制必須是同一個(gè)頁(yè)面

• 5.前端給后端發(fā)送請(qǐng)求時(shí)，自動(dòng)攜帶cookie, session 及 local都不攜帶

• 6.cookie一般存儲(chǔ)登錄驗(yàn)證信息或者token，localStorage常用于存儲(chǔ)不易變動(dòng)的數(shù)據(jù)，減輕服務(wù)器壓力，sessionStorage可以用來(lái)監(jiān)測(cè)用戶是否是刷新進(jìn)入頁(yè)面，如音樂(lè)播放器恢復(fù)進(jìn)度條功能

面試官：說(shuō)一說(shuō)JS數(shù)據(jù)類型有哪些,區(qū)別是什么？

我：呃~，JS數(shù)據(jù)類型分為兩類：一類是基本數(shù)據(jù)類型，另一類是引用數(shù)據(jù)類型，如下：

• 基本類型：string、number、boolean、null、undefined、symbol、bigInt

• 引用類型： object、array

基本類型存儲(chǔ)在棧中，空間小，操作頻繁

引用類型存儲(chǔ)在堆中，空間大，在棧中存儲(chǔ)了指針，指向在堆中的起始地址

注意：Symbol具有唯一性， 不可枚舉 使用getOwnPropertySymbols獲取

面試官：說(shuō)一說(shuō)你對(duì)閉包的理解？

我：呃~，內(nèi)層函數(shù)引用外層函數(shù)中變量，這些變量的集合就是閉包。

• 形成的原理：作用域鏈，當(dāng)前作用域可以訪問(wèn)上級(jí)作用域中的變量。

• 解決的問(wèn)題：能夠讓函數(shù)作用域中的變量在函數(shù)執(zhí)行結(jié)束之后不被銷毀，同時(shí)也能在函數(shù)外部可以訪問(wèn)函數(shù)內(nèi)部的局部變量。

• 帶來(lái)的問(wèn)題：由于垃圾回收器不會(huì)將閉包中變量銷毀，于是就造成了內(nèi)存泄露，內(nèi)存泄露積累多了就容易導(dǎo)致內(nèi)存溢出。

• 閉包的應(yīng)用，能夠模仿塊級(jí)作用域，能夠?qū)崿F(xiàn)柯里化，在構(gòu)造函數(shù)中定義特權(quán)方法、Vue中數(shù)據(jù)響應(yīng)式Observer中使用閉包等。

面試官：說(shuō)一說(shuō)JavaScript有幾種方法判斷變量的類型？

我：呃~，好的，總結(jié)如下：

1. typeof（根據(jù)二進(jìn)制判斷），不能判斷數(shù)據(jù)類型：null和object

2. intanceof(根據(jù)原型鏈判斷)，原生數(shù)據(jù)類型不能判斷

3. constructor.name(根據(jù)構(gòu)造器判斷)，不能判斷null數(shù)據(jù)類型

4. Object.prototype.toString.call()（用Object的toString方法判斷）所有類型數(shù)據(jù)都能判斷,記住判斷結(jié)果打印為：'[object Xxx]'

面試官：說(shuō)一說(shuō)null 和 undefined 的區(qū)別，如何讓一個(gè)屬性變?yōu)閚ull

我：呃~，null 是定義 并賦值null undefined是定義未賦值。

面試官：說(shuō)一下有什么方法可以保持前后端實(shí)時(shí)通信？

我：呃~，輪詢、長(zhǎng)輪詢、 iframe流、WebSocket、SSE。

面試官：說(shuō)一說(shuō)偽數(shù)組和數(shù)組的區(qū)別？

我：呃~，好的，總結(jié)如下：

偽數(shù)組的特點(diǎn)：類型是object、不能使用數(shù)組方法、可以獲取長(zhǎng)度、可以使用for in遍歷

偽數(shù)組可以轉(zhuǎn)換為數(shù)組的方法：Array.prototype.slice.call()、Array.from()、[…偽數(shù)組]

有哪些是偽數(shù)組：函數(shù)的參數(shù)arguments，Map和Set的keys()、values()和entires()

【推薦學(xué)習(xí)：javascript高級(jí)教程】