常見的JavaScript面試問題都有哪些呢

常見的JavaScript面試問題都有哪些呢，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

　　1.如何理解 JS 中的this關鍵字?

　　this表示當前對象，this的指向是根據調用的上下文來決定的，默認指向window對象。

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

　　局部環境：

　　1.在全局作用域下直接調用函數，this指向window。

　　2.對象函數調用，哪個對象調用就指向哪個對象。

　　3.使用 new 實例化對象，在構造函數中的this指向實例化對象。

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

　　2. JavaScript 中的作用域(scope)是指什么?

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

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

　　3.什么是閉包

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

　　閉包是在另一個作用域內創建一個封閉的詞法范圍。它通常會自動返回來生成這個詞法環境。這個環境由創建閉包時在作用域內的任何局部變量組成。它就像一個微型工廠，用這些原料生產出具有特定功能的產品。

　　4. 解釋 JavaScript 中的相等性。

　　JavaScript 中有嚴格比較和類型轉換比較：

　　嚴格比較(例如 ===)在不允許強制轉型的情況下檢查兩個值是否相等;

　　抽象比較(例如 ==)在允許強制轉型的情況下檢查兩個值是否相等。

　　var a = "42";

　　var b = 42;

　　a == b; // true

　　a === b; // false

　　復制代碼如果被比較的任何一個值可能是 true 或 false，要用 ===，而不是 ==;

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

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

　　5. 解釋一下變量的提升

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

　　var x = 1

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

　　var y = 2

　　6.如何理解事件委托

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

　　什么是事件委托?

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

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

　　嚴格模式用于標準化正常的JavaScript語義。嚴格模式可以嵌入到非嚴格模式中，關鍵字 ‘use strict’。使用嚴格模式后的代碼應遵循JS嚴格的語法規則。例如，分號在每個語句聲明之后使用。

　　8.解釋 JavaScript 中的 null 和 undefined。

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

　　//null和undefined是兩個不同的對象

　　null == null //true

　　null === null //true

　　null == undefined //true

　　null === undefined //flase

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

　　JavaScript提供兩種數據類型: 基本數據類型和引用數據類型 基本數據類型有:

　　String

　　Number

　　Boolean

　　Null

　　Undefined

　　Symbol

　　引用數據類型有:

　　Object

　　Array

　　Function

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

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

　　11.window.onload的作用?

　　window.onload是等文檔和資源都加載完成后調用的事件，保證js獲取元素 的時候，已經加載。

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

　　作用域鏈是js中的一種查找機制，從當前作用域查找，當前作用域沒有往上一級作用域查找，一直到最外層，如果都找不到則是is not define。

　　13.定時器的分類?他們的區別及用法是什么?

　　Js中有兩種定時器：setInterval：間歇執行，setTimeout：延遲執行

　　setInterval(函數，時間) 時間單位ms，

　　語法：setInterval(function(){},1000); 隔一秒執行函數一次

　　一般用于倒計時，輪播圖

　　setTimeout(函數，時間) 時間單位ms，

　　語法：setTimeout(function(){},1000); 延遲一秒執行函數一次，只會執行一次

　　一般用于廣告，廣告彈出層

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

　　如下：“1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”

　　var str = “1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”;

　　var n = “”;

　　var s="";

　　for(var i=0;i

　　if((str[i]>=0&&str[i]<=9)&&n.indexof(str[i])==-1){ else="">=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.數組方法pop() push() unshift() shift()?

　　push:在數組末尾添加一個或多個元素，返回當前數組下標。

　　Pop:在數組末尾刪除一個元素，返回被刪除的元素。

　　unshift：在數組的頭部添加或刪除元素，返回當前數組下標。

　　shift：在數組頭部刪除一個元素，返回被刪除的元素。

　　17.split() join() 的區別?

　　split是字符串的方法，將字符串按照特定標志分割成數組。

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

　　18.編寫一個數組去重的方法。

　　function sort(arr) {

　　for(var i = 0;i

　　for(var j = i+1;j

　　if(arr[i] == arr[j]){

　　arr.splice(j,1);

　　j–; //刪除一個元素后，后面的元素會依次往前，下標也需要依次往前

　　}

　　}

　　}

　　return arr

　　}

　　19.冒泡算法排序?

　　for(var i = 0;i

　　for(var j = 0;j

　　if(arr[j] > arr[j+1]){ //

　　var temp = arr[j];

　　arr[j] = arr[j+1];

　　arr[j+1] = temp;

　　}

　　}

　　}

　　20.DOM怎樣添加、移除、移動、復制、創建和查找節點

　　獲取子節點

　　父節點.children

　　父節點.childNodes

　　獲取父節點

　　子節點.parentNode

　　子節點.offsetParent

　　創建

　　document.createElement(‘標簽名’)

　　document.createTextNode(‘文本內容’)

　　添加

　　父節點.appendChild(子節點)

　　父節點.insertBefore(newChild，refChild)

　　復制

　　被復制的節點.cloneNode(true)

　　刪除：

　　節點.remove()

　　父節點.removeChild(子節點)

　　替換

　　父節點.replaceChild(newChild，refChild)

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

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

　　document文檔對象，表示HTML。

　　22.offsetWidth、clientWidth、scrollTop的區別?

　　offsetWidth：占位寬，包含 內容寬+左右padding+左右border。

　　clientWidth：可視寬，包含 內容寬+左右padding。

　　scrollTop：頁面被卷去的高。

　　23.如何獲取url地址中搜索內容?

　　window.location.search

　　24.事件、IE與火狐的事件機制有什么區別?

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

　　25.事件綁定和普通事件有什么區別。

　　標簽.事件：如果給同一個元素添加同一個事件，后面的會覆蓋前面 事件綁定：可以給同一個元素添加同一個事件，不會被覆蓋。

　　26.解釋一下事件流?

　　事件捕獲階段：當事件發生的時候，將事件從window依次往子元素傳遞 確定目標階段：確定事件目標 事件冒泡階段：事件目標開始處理事件，處理完以后會將事件依次傳遞給父元素，一直到window 事件都是在事件冒泡處理,ie只有冒泡。

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

　　按下onmousedown，拖拽onmousemove，彈起onmouseup。

　　28.cookie的利弊?

　　優點：極高的擴展性和可用性

　　1.通過良好的編程，控制保存在cookie中的session對象的大小。

　　2.通過加密和安全傳輸技術(SSL)，減少cookie被破解的可能性。

　　3.只在cookie中存放不敏感數據，即使被盜也不會有重大損失。

　　4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

　　缺點：

　　1.Cookie數量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。

　　2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。

　　3.有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。

　　因為這些弊端(主要是cookie的大小和多少都受限制，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用)，IE8以后，就出現一個web storage;它僅僅是為了本地緩存數據而存在;但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在。

　　29.call()和apply()的區別和作用?

　　都是用來改變this的指向，在傳值的過程中會有些區別：

　　call(this的指向，參數1，參數2…)

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

　　30.創建ajax的過程。

　　function ajax(json) {

　　json.data = json.data||""; //如果沒有請求參數，為空

　　json.contentType = json.contentType || “application/x-www-form-urlencoded”; //如果沒有字符編碼，用默認的

　　//1.創建對象

　　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.發送請求

　　ajax.send();

　　}else {

　　ajax.open(“POST”,json.url,true);

　　//3.設置請求頭 ajax.setRequestHeader(“Content-type”,json.contentType+";charset=utf-8");

　　//4.發送請求

　　ajax.send(json.data);

　　}

　　//4.監聽結果

　　ajax.onreadystatechange = function () {

　　if(ajax.readyState == 4){

　　if(ajax.status == 200){

　　json.success(ajax.response);

　　}

　　}

　　}

　　}

　　31.ajax請求的時候get 和post方式的區別，什么時候用post。

　　GET請求會將參數跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給WEB服務器。當然在Ajax請求中，這種區別對用戶是不可見的。

　　GEt傳輸數據容量小，不安全，post傳輸數據內容大，更加安全;當向服務器發送一些數據的時候選擇post比較安全。

　　32.ajax請求時，如何解釋json數據。

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

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

　　33.同步和異步的區別?

　　異步：客戶端與服務器請求數據的過程中，可以做其他的事情。

　　同步：客戶端與服務器請求數據的過程中，不能做其他的事情。

　　34.常見的http狀態碼?

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

　　200狀態碼：表示請求已成功，請求所希望的響應頭或數據體將隨此響應返回。

　　201狀態碼：表示請求成功并且服務器創建了新的資源，且其 URI 已經隨Location 頭信息返回。假如需要的資源無法及時建立的話，應當返回 ‘202 Accepted’。

　　202狀態碼：服務器已接受請求，但尚未處理。

　　301狀態碼：被請求的資源已永久移動到新位置。服務器返回此響應(對 GET 或 HEAD 請求的響應)時，會自動將請求者轉到新位置。

　　302狀態碼：請求的資源臨時從不同的URI響應請求，但請求者應繼續使用原有位置來進行以后的請求。

　　304自從上次請求后，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。如果網頁自請求者上次請求后再也沒有更改過，您應將服務器配置為返回此響應(稱為 If-Modified-Since HTTP 標頭)。

　　301狀態碼：被請求的資源已永久移動到新位置。服務器返回此響應(對 GET 或 HEAD 請求的響應)時，會自動將請求者轉到新位置。

　　302狀態碼：請求的資源臨時從不同的URI響應請求，但請求者應繼續使用原有位置來進行以后的請求 304自從上次請求后，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。如果網頁自請求者上次請求后再也沒有更改過，您應將服務器配置為返回此響應(稱為 If-Modified-Since HTTP 標頭)。

　　401狀態碼：請求要求身份驗證。對于需要登錄的網頁，服務器可能返回此響應。

　　403狀態碼：服務器已經理解請求，但是拒絕執行它。與401響應不同的是，身份驗證并不能提供任何幫助，而且這個請求也不應該被重復提交。

　　404狀態碼：請求失敗，請求所希望得到的資源未被在服務器上發現。沒有信息能夠告訴用戶這個狀況到底是暫時的還是永久的。假如服務器知道情況的話，應當使用410狀態碼來告知舊資源因為某些內部的配置機制問題，已經永久的不可用，而且沒有任何可以跳轉的地址。404這個狀態碼被廣泛應用于當服務器不想揭示到底為何請求被拒絕或者沒有其他適合的響應可用的情況下。

　　500狀態碼：服務器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。一般來說，這個問題都會在服務器的程序碼出錯時出現。

　　503狀態碼：由于臨時的服務器維護或者過載，服務器當前無法處理請求。通常，這個是暫時狀態，一段時間會恢復。

　　35.js哪些操作會造成內存泄露?

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

　　2)被遺忘的定時器或者回調。

　　3)閉包引起的內存泄漏。

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

　　window.onload與ready的區別

　　1.window.onload會覆蓋之前的ready的區別，不會覆蓋，會疊加。

　　2.window.onload等文檔和資源都加載完成以后調用ready只要文檔加載完成以后就會調用。

　　37.怎么解決跨域問題?

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

關于常見的JavaScript面試問題都有哪些呢問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。