年底面試之JavaScript總結(jié)（用心收集）

作者：NeverSettle |

來源：掘金? ?

https://juejin.im/post/5e464c4ef265da5756324a2b

1.如何理解 JS 中的this關(guān)鍵字？

this表示當(dāng)前對象，this的指向是根據(jù)調(diào)用的上下文來決定的，默認(rèn)指向window對象。

全局環(huán)境：全局環(huán)境就是在里面，這里的this始終指向的是window對象。

局部環(huán)境：

1.在全局作用域下直接調(diào)用函數(shù)，this指向window。

2.對象函數(shù)調(diào)用，哪個(gè)對象調(diào)用就指向哪個(gè)對象。

3.使用 new 實(shí)例化對象，在構(gòu)造函數(shù)中的this指向?qū)嵗瘜ο蟆?/p>

4.使用call或apply改變this的指向。

2. JavaScript 中的作用域（scope）是指什么？

在 JavaScript 中，每個(gè)函數(shù)都有自己的作用域。作用域基本上是變量以及如何通過名稱訪問這些變量的規(guī)則的集合。只有函數(shù)中的代碼才能訪問函數(shù)作用域內(nèi)的變量。

同一個(gè)作用域中的變量名必須是唯一的。一個(gè)作用域可以嵌套在另一個(gè)作用域內(nèi)。如果一個(gè)作用域嵌套在另一個(gè)作用域內(nèi)，最內(nèi)部作用域內(nèi)的代碼可以訪問另一個(gè)作用域的變量。

3.什么是閉包

我第一次解釋閉包時(shí)，我常說函數(shù)中的函數(shù);但是，它沒有正確地描述閉包的確切含義。

閉包是在另一個(gè)作用域內(nèi)創(chuàng)建一個(gè)封閉的詞法范圍。它通常會(huì)自動(dòng)返回來生成這個(gè)詞法環(huán)境。這個(gè)環(huán)境由創(chuàng)建閉包時(shí)在作用域內(nèi)的任何局部變量組成。它就像一個(gè)微型工廠，用這些原料生產(chǎn)出具有特定功能的產(chǎn)品。

4. 解釋 JavaScript 中的相等性。

JavaScript 中有嚴(yán)格比較和類型轉(zhuǎn)換比較：

嚴(yán)格比較（例如 ===）在不允許強(qiáng)制轉(zhuǎn)型的情況下檢查兩個(gè)值是否相等；

抽象比較（例如 ==）在允許強(qiáng)制轉(zhuǎn)型的情況下檢查兩個(gè)值是否相等。

var a = "42";
var b = 42;
a == b; // true
a === b; // false

復(fù)制代碼如果被比較的任何一個(gè)值可能是 true 或 false，要用 ===，而不是 ==；

如果被比較的任何一個(gè)值是這些特定值（0、“”或 []），要用 ===，而不是 ==；

在其他情況下，可以安全地使用 ==。它不僅安全，而且在很多情況下，它可以簡化代碼，并且提升代碼可讀性。

5. 解釋一下變量的提升

變量的提升是JavaScript的默認(rèn)行為，這意味著將所有變量聲明移動(dòng)到當(dāng)前作用域的頂部，并且可以在聲明之前使用變量。初始化不會(huì)被提升，提升僅作用于變量的聲明。

var x = 1
console.log(x + '——' + y) // 1——undefined
var y = 2

6.如何理解事件委托

在DOM樹上綁定事件監(jiān)聽器并使用JS事件處理程序是處理客戶端事件響應(yīng)的典型方法。從理論上講，我們可以將監(jiān)聽器附加到HTML中的任何DOM元素，但由于事件委派，這樣做是浪費(fèi)而且沒必要的。

• 什么是事件委托？

  這是一種讓父元素上的事件監(jiān)聽器也影響子元素的技巧。通常，事件傳播（捕獲和冒泡）允許我們實(shí)現(xiàn)事件委托。冒泡意味著當(dāng)觸發(fā)子元素（目標(biāo)）時(shí)，也可以逐層觸發(fā)該子元素的父元素，直到它碰到DOM綁定的原始監(jiān)聽器（當(dāng)前目標(biāo)）。捕獲屬性將事件階段轉(zhuǎn)換為捕獲階段，讓事件下移到元素; 因此，觸發(fā)方向與冒泡階段相反。捕獲的默認(rèn)值為false。

7.解釋一下嚴(yán)格模式(strict mode)

嚴(yán)格模式用于標(biāo)準(zhǔn)化正常的JavaScript語義。嚴(yán)格模式可以嵌入到非嚴(yán)格模式中，關(guān)鍵字 ‘use strict’。使用嚴(yán)格模式后的代碼應(yīng)遵循JS嚴(yán)格的語法規(guī)則。例如，分號在每個(gè)語句聲明之后使用。

8.解釋 JavaScript 中的 null 和 undefined。

JavaScript 中有兩種底層類型：null 和 undefined。它們代表了不同的含義：尚未初始化：undefined；空值：null。

//null和undefined是兩個(gè)不同的對象
null == null  //true
null === null  //true
null == undefined //true
null === undefined //flase

9.解釋 JavaScript 中的值和類型。

JavaScript提供兩種數(shù)據(jù)類型: 基本數(shù)據(jù)類型和引用數(shù)據(jù)類型 基本數(shù)據(jù)類型有:

• String

• Number

• Boolean

• Null

• Undefined

• Symbol

引用數(shù)據(jù)類型有:

• Object

• Array

• Function

10.解釋事件冒泡以及如何阻止它？

事件冒泡是指嵌套最深的元素觸發(fā)一個(gè)事件，然后這個(gè)事件順著嵌套順序在父元素上觸發(fā)。防止事件冒泡的一種方法是使用 event.cancelBubble 或 event.stopPropagation()（低于 IE 9）。

11.window.onload的作用？

window.onload是等文檔和資源都加載完成后調(diào)用的事件，保證js獲取元素 的時(shí)候，已經(jīng)加載。

12.說說你對作用域鏈的理解？

作用域鏈?zhǔn)莏s中的一種查找機(jī)制，從當(dāng)前作用域查找，當(dāng)前作用域沒有往上一級作用域查找，一直到最外層，如果都找不到則是is not define

13.定時(shí)器的分類？他們的區(qū)別及用法是什么？

Js中有兩種定時(shí)器：setInterval：間歇執(zhí)行，setTimeout：延遲執(zhí)行
setInterval(函數(shù)，時(shí)間) 時(shí)間單位ms，
語法：setInterval(function(){},1000); 隔一秒執(zhí)行函數(shù)一次
一般用于倒計(jì)時(shí)，輪播圖
setTimeout(函數(shù)，時(shí)間) 時(shí)間單位ms，
語法：setTimeout(function(){},1000); 延遲一秒執(zhí)行函數(shù)一次，只會(huì)執(zhí)行一次
一般用于廣告，廣告彈出層

14.把下面的字符串去重，并去除掉特殊字符按照數(shù)字在前字母在后的順序排序字符串

如下：“1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”
var str = “1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”;
var n = “”;
var s="";
for(var i=0;iif((str[i]>=0&&str[i]<=9)&&n.indexOf(str[i])==-1){
n+=str[i];
}else if((str.charCodeAt(i)>=97&&str.charCodeAt(i)<=122)&&s.indexOf(str[i]) == -1){
s+=str[i];
}
}
console.log(n+s); //12345fdsarg

15.截取字符串“abcdefg”中的def。

var str = “abcdefg”;
if(str.indexOf(“def”)!=-1){
console.log(str.substr(str.indexOf(“def”),3));
}

16.數(shù)組方法pop() push() unshift() shift()？

push:在數(shù)組末尾添加一個(gè)或多個(gè)元素，返回當(dāng)前數(shù)組下標(biāo)

Pop:在數(shù)組末尾刪除一個(gè)元素，返回被刪除的元素

unshift：在數(shù)組的頭部添加或刪除元素，返回當(dāng)前數(shù)組下標(biāo)

shift：在數(shù)組頭部刪除一個(gè)元素，返回被刪除的元素

17.split() join() 的區(qū)別？

split是字符串的方法，將字符串按照特定標(biāo)志分割成數(shù)組

例：“u&s”.split(“&”) ------ [“u”,”s”] Join:是數(shù)組方法，將數(shù)組按標(biāo)志組合成字符串 [“u”,”s”].join（“-”）–‘u-s’

18.編寫一個(gè)數(shù)組去重的方法。

function sort(arr) {
for(var i = 0;ifor(var j = i+1;jif(arr[i] == arr[j]){
arr.splice(j,1);
j–; //刪除一個(gè)元素后，后面的元素會(huì)依次往前，下標(biāo)也需要依次往前
}
}
}
return arr
}

19.冒泡算法排序？

for(var i = 0;ifor(var j = 0;jif(arr[j] > arr[j+1]){ //
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}

20.DOM怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)

獲取子節(jié)點(diǎn)
父節(jié)點(diǎn).children
父節(jié)點(diǎn).childNodes
獲取父節(jié)點(diǎn)
子節(jié)點(diǎn).parentNode
子節(jié)點(diǎn).offsetParent
創(chuàng)建
document.createElement(‘標(biāo)簽名’)
document.createTextNode(‘文本內(nèi)容’)
添加
父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn))
父節(jié)點(diǎn).insertBefore(newChild，refChild)
復(fù)制
被復(fù)制的節(jié)點(diǎn).cloneNode(true)
刪除：
節(jié)點(diǎn).remove()
父節(jié)點(diǎn).removeChild（子節(jié)點(diǎn)）
替換
父節(jié)點(diǎn).replaceChild（newChild，refChild）

21.什么是window對象? 什么是document對象?

window是js中最大的對象，表示窗口，包含document

document文檔對象，表示HTML

22.offsetWidth、clientWidth、scrollTop的區(qū)別？

offsetWidth：占位寬，包含 內(nèi)容寬+左右padding+左右border

clientWidth：可視寬，包含 內(nèi)容寬+左右padding

scrollTop：頁面被卷去的高

23.如何獲取url地址中搜索內(nèi)容？

window.location.search

24.事件、IE與火狐的事件機(jī)制有什么區(qū)別？

IE的事件流是冒泡流，而火狐同時(shí)支持冒泡流和捕獲流。

25.事件綁定和普通事件有什么區(qū)別。

標(biāo)簽.事件：如果給同一個(gè)元素添加同一個(gè)事件，后面的會(huì)覆蓋前面 事件綁定：可以給同一個(gè)元素添加同一個(gè)事件，不會(huì)被覆蓋

26.解釋一下事件流？

事件捕獲階段：當(dāng)事件發(fā)生的時(shí)候，將事件從window依次往子元素傳遞 確定目標(biāo)階段：確定事件目標(biāo) 事件冒泡階段：事件目標(biāo)開始處理事件，處理完以后會(huì)將事件依次傳遞給父元素，一直到window 事件都是在事件冒泡處理,ie只有冒泡

27.拖拽效果中有幾種事件？

按下onmousedown，拖拽onmousemove，彈起onmouseup

28.cookie的利弊？

優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性
1.通過良好的編程，控制保存在cookie中的session對象的大小。
2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會(huì)有重大損失。
4.控制cookie的生命期，使之不會(huì)永遠(yuǎn)有效。偷盜者很可能拿到一個(gè)過期的cookie。
缺點(diǎn)：
1.Cookie數(shù)量和長度的限制。每個(gè)domain最多只能有20條cookie，每個(gè)cookie長度不能超過4KB，否則會(huì)被截掉。
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果我們把這個(gè)計(jì)數(shù)器保存在客戶端，那么它起不到任何作用。
因?yàn)檫@些弊端（主要是cookie的大小和多少都受限制，并且每次你請求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用），IE8以后，就出現(xiàn)一個(gè)web storage；它僅僅是為了本地緩存數(shù)據(jù)而存在；但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在。

29.call()和apply()的區(qū)別和作用？

都是用來改變this的指向，在傳值的過程中會(huì)有些區(qū)別

call（this的指向，參數(shù)1，參數(shù)2…）

apply（this的指向,[參數(shù)1，參數(shù)2…]）

30.創(chuàng)建ajax的過程。

function ajax(json) {
json.data = json.data||""; //如果沒有請求參數(shù)，為空
json.contentType = json.contentType || “application/x-www-form-urlencoded”; //如果沒有字符編碼，用默認(rèn)的
//1.創(chuàng)建對象
if(window.XMLHttpRequest){ //正常
var ajax = new XMLHttpRequest();
}else { //兼容ie6
var ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
}

 //2.建立連接
 if(json.type.toUpperCase() ==“get”.toUpperCase()){
 ajax.open(“GET”,json.url+"?"+json.data,true);
 //3.發(fā)送請求
 ajax.send();
 }else {
 ajax.open(“POST”,json.url,true);
 //3.設(shè)置請求頭 ajax.setRequestHeader(“Content-type”,json.contentType+";charset=utf-8");
 //4.發(fā)送請求
 ajax.send(json.data);
 }
 //4.監(jiān)聽結(jié)果
 ajax.onreadystatechange = function () {
 if(ajax.readyState == 4){
 if(ajax.status == 200){
 json.success(ajax.response);
 }
 }
 }
}

31.ajax請求的時(shí)候get 和post方式的區(qū)別，什么時(shí)候用post。

GET請求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給WEB服務(wù)器。當(dāng)然在Ajax請求中，這種區(qū)別對用戶是不可見的

GEt傳輸數(shù)據(jù)容量小，不安全，post傳輸數(shù)據(jù)內(nèi)容大，更加安全；當(dāng)向服務(wù)器發(fā)送一些數(shù)據(jù)的時(shí)候選擇post比較安全

32.ajax請求時(shí)，如何解釋json數(shù)據(jù)。

如果是字符串形式的json：eval("("+ajax.response+")")

如果是本地的json文件：JSON.parse(data)

33.同步和異步的區(qū)別?

異步：客戶端與服務(wù)器請求數(shù)據(jù)的過程中，可以做其他的事情

同步：客戶端與服務(wù)器請求數(shù)據(jù)的過程中，不能做其他的事情

34.常見的http狀態(tài)碼？

不需要知道全部，常見的就可以，比如200 404 503

• 200狀態(tài)碼：表示請求已成功，請求所希望的響應(yīng)頭或數(shù)據(jù)體將隨此響應(yīng)返回

• 201狀態(tài)碼：表示請求成功并且服務(wù)器創(chuàng)建了新的資源，且其 URI 已經(jīng)隨Location 頭信息返回。假如需要的資源無法及時(shí)建立的話，應(yīng)當(dāng)返回 ‘202 Accepted’

• 202狀態(tài)碼：服務(wù)器已接受請求，但尚未處理

• 301狀態(tài)碼：被請求的資源已永久移動(dòng)到新位置。服務(wù)器返回此響應(yīng)（對 GET 或 HEAD 請求的響應(yīng)）時(shí)，會(huì)自動(dòng)將請求者轉(zhuǎn)到新位置。

• 302狀態(tài)碼：請求的資源臨時(shí)從不同的URI響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求

• 304自從上次請求后，請求的網(wǎng)頁未修改過。服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁內(nèi)容。如果網(wǎng)頁自請求者上次請求后再也沒有更改過，您應(yīng)將服務(wù)器配置為返回此響應(yīng)(稱為 If-Modified-Since HTTP 標(biāo)頭)。

• 301狀態(tài)碼：被請求的資源已永久移動(dòng)到新位置。服務(wù)器返回此響應(yīng)（對 GET 或 HEAD 請求的響應(yīng)）時(shí)，會(huì)自動(dòng)將請求者轉(zhuǎn)到新位置。

• 302狀態(tài)碼：請求的資源臨時(shí)從不同的URI響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求 304自從上次請求后，請求的網(wǎng)頁未修改過。服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁內(nèi)容。如果網(wǎng)頁自請求者上次請求后再也沒有更改過，您應(yīng)將服務(wù)器配置為返回此響應(yīng)(稱為 If-Modified-Since HTTP 標(biāo)頭)。

• 401狀態(tài)碼：請求要求身份驗(yàn)證。對于需要登錄的網(wǎng)頁，服務(wù)器可能返回此響應(yīng)。

• 403狀態(tài)碼：服務(wù)器已經(jīng)理解請求，但是拒絕執(zhí)行它。與401響應(yīng)不同的是，身份驗(yàn)證并不能提供任何幫助，而且這個(gè)請求也不應(yīng)該被重復(fù)提交。

• 404狀態(tài)碼：請求失敗，請求所希望得到的資源未被在服務(wù)器上發(fā)現(xiàn)。沒有信息能夠告訴用戶這個(gè)狀況到底是暫時(shí)的還是永久的。假如服務(wù)器知道情況的話，應(yīng)當(dāng)使用410狀態(tài)碼來告知舊資源因?yàn)槟承﹥?nèi)部的配置機(jī)制問題，已經(jīng)永久的不可用，而且沒有任何可以跳轉(zhuǎn)的地址。404這個(gè)狀態(tài)碼被廣泛應(yīng)用于當(dāng)服務(wù)器不想揭示到底為何請求被拒絕或者沒有其他適合的響應(yīng)可用的情況下。

• 500狀態(tài)碼：服務(wù)器遇到了一個(gè)未曾預(yù)料的狀況，導(dǎo)致了它無法完成對請求的處理。一般來說，這個(gè)問題都會(huì)在服務(wù)器的程序碼出錯(cuò)時(shí)出現(xiàn)。

• 503狀態(tài)碼：由于臨時(shí)的服務(wù)器維護(hù)或者過載，服務(wù)器當(dāng)前無法處理請求。通常，這個(gè)是暫時(shí)狀態(tài)，一段時(shí)間會(huì)恢復(fù)

35.js哪些操作會(huì)造成內(nèi)存泄露？

1）意外的全局變量引起的內(nèi)存泄露 function leak(){ leak=“xxx”;//leak成為一個(gè)全局變量，不會(huì)被回收 }

2）被遺忘的定時(shí)器或者回調(diào)

3）閉包引起的內(nèi)存泄漏

36.$(document).ready() 方法和window.onload 有什么區(qū)別？

window.onload與ready的區(qū)別

1.window.onload會(huì)覆蓋之前的ready的區(qū)別，不會(huì)覆蓋，會(huì)疊加

2.window.onload等文檔和資源都加載完成以后調(diào)用ready只要文檔加載完成以后就會(huì)調(diào)用

37.怎么解決跨域問題？

通過jsonp解決跨域，即通過script標(biāo)簽的src屬性引入一個(gè)js文件，通過回調(diào)函數(shù)將數(shù)據(jù)返回 KaTeX parse error: Expected 'EOF', got '&' at position 34: …script src=’url&?callback=showDa….ajax()方法中，只需配置一個(gè)dataType:‘jsonp’，就可以發(fā)起一個(gè)跨域請求

寫在最后

收集不易如果覺得對您有用就動(dòng)動(dòng)手點(diǎn)個(gè)再看和關(guān)注支持一下吧
面試題持續(xù)更新
收藏總有用武之地,謝謝~