每天10道題，100天后，搞定所有前端面試的高頻知識點，加油！?。?，在看文章的同時，希望不要直接看答案，先思考一下自己會不會，如果會，自己的答案是什么？想過之后再與答案比對，是不是會更好一點，當然如果你有比我更好的答案，歡迎評論區(qū)留言，一起探討技術(shù)之美。
(相關(guān)資料圖)
我：呃~，好的，三者的作用區(qū)別總結(jié)如下：
var：最常用的變量；允許重復(fù)聲明，但會導(dǎo)致數(shù)據(jù)被覆蓋；會產(chǎn)生變量提升；局部變量掛載到全局對象上，會造成全局對象的污染。
console.log(a) // 因變量提升, var a;提到前面但是沒有賦值，所以值為undefinedvar a = 1var a = "你好" // var聲明的變量會被重新賦值console.log(a) // a會打印被重新賦值的值console.log(window.a) // var聲明的局部變量會被掛載到全局變量上，造成全局變量的污染。
let：es6新增命令，用法類似var；不允許重復(fù)聲明；不存在變量提升；常作用于塊級作用域而避免局部變量造成全局變量的污染。
let a=10;console.log(a) // 不存在變量提升，所以值為：10console.log(window.a) // 不會造成全局污染，所以值為 undefinedfor(let i =0;i<3;i++){ // 會生成塊級作用域，i 的值只能在塊級作用域中使用 console.log(i)}console.log(i) // 因為拿不到塊級作用域中的值，所以報錯。const：es6新增命令，用于聲明常量且值無法被修改；聲明常量必須立刻初始化，否則后期賦值報錯；不能重復(fù)聲明；const指向變量的地址, 只要變量名所引用的地址不變就不會報錯
const arr = ["小張","小王","小李","小趙"]arr[0]="小明"console.log(arr) // ["小明", "小王", "小李", "小趙"]const arr = [] // 報錯
我：呃~，好的，對兩者的理解總結(jié)如下：
深拷貝：新數(shù)據(jù)與原數(shù)據(jù)互不打擾。
// 擴展運算符在一維數(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當然，深拷貝也有一種標準寫法，如下：
// 標準的深拷貝 => 引用數(shù)據(jù)類型(數(shù)組,對象)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:"睡覺" }}let newObj = deepClone(obj)newObj.name = "李四"console.log(obj.name,newObj.name)// 張三 李四淺拷貝：新數(shù)據(jù)會影響原數(shù)據(jù)。
let arr = [1,2,3]let newArr = arr// 對新數(shù)據(jù)做出改變，原數(shù)據(jù)也會發(fā)生改變，這種就叫做淺拷貝newArr.push(4) // [1, 2, 3, 4]console.log(arr,newArr) // [1, 2, 3, 4]
說白了，深拷貝是重新獲得一個新的數(shù)據(jù)，且和原來的數(shù)據(jù)沒有任何關(guān)系；淺拷貝雖然能得到一個新的數(shù)據(jù)，但是和原來的數(shù)據(jù)仍有一定的聯(lián)系。
我：呃~，URL是由以下幾部分組成：
https: 傳輸協(xié)議（http和tcp之間加了一層 TSL 或者 SSL 的安全層）
www：服務(wù)器
baidu.com：域名
DNS域名系統(tǒng)會匹配真實的IP，第一次訪問正常，第二次訪問會將域名解析的IP存在本地用來讀取瀏覽器緩存。
輸入URL的那一刻經(jīng)歷了：域名 -> DNS域名系統(tǒng) -> 拿到真實IP -> 建立連接(TCP的三次握手) -> 拿數(shù)據(jù)，渲染頁面 -> 四次揮手
具體實現(xiàn)過程：
1. url解析：判斷是搜索內(nèi)容還是請求URL
2. 查找本地緩存：如果有緩存直接返回給頁面，沒有緩存則進入網(wǎng)絡(luò)請求階段
3. DNS解析
4. 通過三次握手建立TCP連接
5. 合成請求頭信息，發(fā)送http請求
6. 處理響應(yīng)信息
7. 通過四次揮手斷開TCP連接
8. 如果響應(yīng)狀態(tài)碼301，則重定向
9. 瀏覽器進行頁面渲染：1）解析html，生成DOM樹；2）根據(jù)css計算節(jié)點樣式，生成stylesheet；3）生成布局樹；4）為特定的元素生成獨立圖層
我：呃~，好的，他們之間的關(guān)系如下：
相同點：
都是瀏覽器存儲，都存儲在瀏覽器本地。
區(qū)別：
1.cookie由服務(wù)器或前端寫入， sessionStorage以及l(fā)ocalStorage都是由前端寫入
2.cookie的生命周期由服務(wù)器端寫入時就設(shè)置好的，localStorage是寫入就一直存在，除非手動清除，sessionStorage是由頁面關(guān)閉時自動清除
3.cookie存儲空間大小約4kb， sessionStorage及l(fā)ocalStorage空間比較大，大約5M
4.3者的數(shù)據(jù)共享都遵循同源原則，sessionStorage還限制必須是同一個頁面
5.前端給后端發(fā)送請求時，自動攜帶cookie, session 及 local都不攜帶
6.cookie一般存儲登錄驗證信息或者token，localStorage常用于存儲不易變動的數(shù)據(jù)，減輕服務(wù)器壓力，sessionStorage可以用來監(jiān)測用戶是否是刷新進入頁面，如音樂播放器恢復(fù)進度條功能
我：呃~，JS數(shù)據(jù)類型分為兩類：一類是基本數(shù)據(jù)類型，另一類是引用數(shù)據(jù)類型，如下：
基本類型：string、number、boolean、null、undefined、symbol、bigInt
引用類型： object、array
基本類型存儲在棧中，空間小，操作頻繁
引用類型存儲在堆中，空間大，在棧中存儲了指針，指向在堆中的起始地址
注意：Symbol具有唯一性， 不可枚舉 使用getOwnPropertySymbols獲取
我：呃~，內(nèi)層函數(shù)引用外層函數(shù)中變量，這些變量的集合就是閉包。
形成的原理：作用域鏈，當前作用域可以訪問上級作用域中的變量。
解決的問題：能夠讓函數(shù)作用域中的變量在函數(shù)執(zhí)行結(jié)束之后不被銷毀，同時也能在函數(shù)外部可以訪問函數(shù)內(nèi)部的局部變量。
帶來的問題：由于垃圾回收器不會將閉包中變量銷毀，于是就造成了內(nèi)存泄露，內(nèi)存泄露積累多了就容易導(dǎo)致內(nèi)存溢出。
閉包的應(yīng)用，能夠模仿塊級作用域，能夠?qū)崿F(xiàn)柯里化，在構(gòu)造函數(shù)中定義特權(quán)方法、Vue中數(shù)據(jù)響應(yīng)式Observer中使用閉包等。
我：呃~，好的，總結(jié)如下：
1. typeof（根據(jù)二進制判斷），不能判斷數(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]"
我：呃~，null 是定義 并賦值null undefined是定義未賦值。
我：呃~，輪詢、長輪詢、 iframe流、WebSocket、SSE。
我：呃~，好的，總結(jié)如下：
偽數(shù)組的特點：類型是object、不能使用數(shù)組方法、可以獲取長度、可以使用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高級教程】
以上就是看看這些前端面試題，帶你搞定高頻知識點（六）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞： javascript
營業(yè)執(zhí)照公示信息