Javascript前端經典的面試題有哪些

這篇文章將為大家詳細講解有關Javascript前端經典的面試題有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、JavaScript 的 typeof 返回哪些數據類型？

分析：

這道題檢驗的是 JS 基本功，只要對 typeof 運算符是了解的，就沒有太大難度。具體在回答的時候，再結合理論知識和編碼過程中實際情況進行回答即可。另外，考慮到面試時的嚴謹性， ES2015 中新增的類型也并入回復中。

建議回復：

首先，JavaScript 中一共有兩大數據類型：

1. 基礎類型

2. 引用類型
   

    ·  基礎類型包括：Number、String、Boolean、Null、Undefined、Symbol（該類型位 ES2015 中新增類型）

    ·  引用類型包括：Object typeof 運算符把類型信息以字符串形式返回，需要注意的是 typeof 返回的類型和 JavaScript 定義的類型有細微的差異。 typeof 返回七種可能的值：“number”、“string”、“boolean”、“object”、"symbol"、“function”和“undefined”。

二、請寫出以下代碼運算結果：

alert(typeof null);
alert(typeof undefined);
alert(typeof NaN);
alert(NaN == undefined);
alert(NaN == NaN);
var str = "123abc";
alert(typeof str++);
alert(str);

分析：

這道題與“題目一”是連環扣，當“題目一”回答完后，通過此題再一次強化運算符和數據類型的基本功。

建議回復：

本題主要是考察 typeof 判斷值的類型，它們輸出的結果依次是：

alert(typeof null); // object
alert(typeof undefined); // undefined
alert(typeof NaN); // number
alert(NaN == undefined); // false
alert(NaN == NaN); // false
var str = "123abc";
alert(typeof str++); // number
alert(str); // NaN

三、例舉至少 3 種強制類型轉換和 2 種隱式類型轉換?

分析：

類型轉換聽起來可能有點寬泛，但這道題明確給出了回答的范圍。

建議回復：

1. 強制類型轉換： 明確調用內置函數，強制把一種類型的值轉換為另一種類型。強制類型轉換主要有：Boolean、Number、String、parseInt、parseFloat

2. 隱式類型轉換： 在使用算術運算符時，運算符兩邊的數據類型可以是任意的，比如，一個字符串可以和數字相加。之所以不同的數據類型之間可以做運算，是因為 JavaScript 引擎在運算之前會悄悄的把他們進行了隱式類型轉換。隱式類型轉換主要有：+、–、==、!

四、JavaScript 的事件流模型都有什么？

建議回復：

事件流描述的是從頁面中接收事件的順序。 DOM 結構是樹形結構，當頁面中的某一個元素觸發了某個一個事件，事件會從最頂層的 window 對象開始，向下傳播到目標元素，途徑的祖先節點都會觸發對應的事件，如果當前節點的該事件綁定了事件處理函數的話，則會執行該函數當事件達到目標元素并執行綁定函數（如果有綁定的話）后，事件又會向上傳播到 window 元素，途徑的祖先節點都會觸發對應的事件（如果綁定事件處理函數的話）

事件流包含三個階段：

• 事件捕捉階段

• 處于目標階段

• 事件冒泡階段

• 
  

      事件捕捉階段：事件開始由頂層對象觸發，然后逐級向下傳播，直到目標的元素；

      處于目標階段：處在綁定事件的元素上；

      事件冒泡階段：事件由具體的元素先接收，然后逐級向上傳播，直到不具體的元素；

五、BOM 對象有哪些，列舉 window 對象？

建議回復：

1. window 對象，是 JS 的最頂層對象，其他的 BOM 對象都是 window 對象的屬性；

2. document 對象，文檔對象；

3. location 對象，瀏覽器當前URL信息；

4. navigator 對象，瀏覽器本身信息；

5. screen 對象，客戶端屏幕信息；

6. history 對象，瀏覽器訪問歷史信息；

六、請簡述 AJAX 及基本步驟？

分析：

對于這種純概念題，建議面試前再寫一遍原生 AJAX 函數的封裝過程，一定要在理解的基礎上去背，才會在面試時有良好發揮。

建議回復：

簡述 AJAX：AJAX即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

AJAX 基本步驟：

1. 初始化ajax對象

2. 連接地址，準備數據

3. 發送請求

4. 接收數據（正在接收，尚未完成）

5. 接收數據完成
   

//初始化ajax對象
var xhr = xhr = new XMLHttpRequest();
//連接地址，準備數據
xhr.open(“方式”,”地址”,是否為異步);
//接收數據完成觸發的事件
xhr.onload =function(){}
//發送數據
xhr.send();

七、HTTP 狀態消息 200 302 304 403 404 500 分別表示什么？

分析：

“帶著理解去記憶” 是對付概念題最好的法寶，此外多看看延展的知識點，也是有益無害。

建議回復：

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

• 302：請求的資源臨時從不同的 URI 響應請求。由于這樣的重定向是臨時的，客戶端應當繼續向原有地址發送以后的請求。只有在 Cache-Control 或 Expires 中進行了指定的情況下，這個響應才是可緩存的。

• 304：如果客戶端發送了一個帶條件的 GET 請求且該請求已被允許，而文檔的內容（自上次訪問以來或者根據請求的條件）并沒有改變，則服務器應當返回這個狀態碼。304 響應禁止包含消息體，因此始終以消息頭后的第一個空行結尾。

• 403：服務器已經理解請求，但是拒絕執行它。

• 404：請求失敗，請求所希望得到的資源未被在服務器上發現。

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

八、同步和異步的區別?

分析：

又是概念題。

建議回復：

• 首先同步異步于阻塞非阻塞并沒有關系。同步異步主要是事情做完以后，如何進行處理、或者說關注的是一種消息通信機制。

• 同步的情況下，是由處理消息者自己去等待消息是否被觸發；

• 而異步的情況下是由觸發機制來通知處理消息者；
  

舉例： 比如在上課時，你問老師一個問題，這個問題可能需要花費一點時間去思考，這個時候老師可能：

• 思考，思考……，好了，有答案了；

• 這個問題需要一點時間，你先做點別的，等我想好了，去找你。
  

第一種就是同步，第二種就是異步。所以同步異步可以說是對被請求方來說的，被請求者使用什么方式來告知處理結果。

• 阻塞非阻塞，主要是對于請求者而言的。

• 阻塞：發出請求等待結果返回，然后再處理后續的事情；

• 非阻塞：發出請求不等待結果返回，可以接著做后續的事情；

• 
  

舉例，還是上一個例子：

• 老師在使用同步思考的時候，你可以靜靜的等待老師給出答案，也可以邊做自己的事情邊等待老師的回答，當然這時候你需要時刻去關注老師是否已經想好了，在程序中需要進行輪詢了。乀(ˉεˉ乀)

• 老師使用異步的方式，這個時候老師告訴你可以先去做別的，好了就通知你，那么你可以去做點別的，然后監聽事件就行，當然你也可以很軸，我就不做別的！我要一直等著老師“想好了”的事件發生。

• 所以同步可以是阻塞的也可以是非阻塞的，異步也是如此。
  

九、GET和POST的區別，何時使用POST？

分析：

像是數據交互類的概念題在面試時被問到的機率之多，也反應出它在工作中的實用價值。所以沒別的，好好學吧，好好背！

建議回復：

GET和POST的區別：

GET：一般用于查詢數據，使用URL傳遞參數，由于瀏覽器對地址欄長度有限制，所以對使用get方式所發送信息的數量有限制，同時瀏覽器會記錄（歷史記錄，緩存）中會保留請求地址的信息，包括地址后面的數據。get 只能發送普通格式（URL 編碼格式）的數據。

POST：一般用于向服務器發送數據，對所發送的數據的大小理論上是沒有限制，瀏覽器會緩存記錄地址，但是不會記錄 post 提交的數據。post 可以發送純文本、URL編碼格式、二進制格式的字符串，形式多樣。

在以下情況中，請使用 POST 請求：

1. 以提交為目的的請求（類似語義化，get 表示請求，post 表示提交）；

2. 發送私密類數據（用戶名、密碼）（因為瀏覽器緩存記錄特性）；

3. 向服務器發送大量數據（數據大小限制區別）；

4. 上傳文件圖片時（數據類型區別）；

十、 AJAX 的局限性?

建議回復：

1. AJAX 不支持瀏覽器 back 按鈕。

2. 安全問題 AJAX 暴露了與服務器交互的細節。

3. 對搜索引擎的支持比較弱。不會執行你的 JS 腳本，只會操作你的網頁源代碼；

4. 跨域請求有一定限制。解決方式：jsonp；
   

十一、new 操作符具體干了什么呢?

分析：

原理概念題。

建議回復：

當使用 new 操作符調用構造函數，函數實際會經歷如下步驟：

1. 創建一個新對象；

2. 把函數中上下文（作用域）對象this指向該對象；

3. 執行代碼，通過this給新對象添加屬性或方法；

4. 返回對象；
   

十二、null 和 undefined 的區別？

分析：

經典的概念題。

建議回復：

null： null表示空值，轉為數值時為0；

undefined：undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。

1. 變量被聲明了，但沒有賦值時，就等于undefined。

2. 對象沒有賦值的屬性，該屬性的值為undefined。

3. 函數沒有返回值時，默認返回undefined。
   

十三、JavaScript 原型，原型鏈 ? 有什么特點？

建議回復：

JavaScript 原型： 每創建一個函數，函數上都有一個屬性為 prototype，它的值是一個對象。 這個對象的作用在于當使用函數創建實例的時候，那么這些實例都會共享原型上的屬性和方法。

原型鏈： 在 JavaScript 中，每個對象都有一個指向它的原型（prototype）對象的內部鏈接（proto）。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向）。這種一級一級的鏈結構就稱為原型鏈（prototype chain）。 當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止;到查找到達原型鏈的頂部（Object.prototype），仍然沒有找到指定的屬性，就會返回 undefined。

十四、實現對數組進行亂序

分析：

這道題檢驗了數組的 sort() 方法，因為是亂序，所以還需要用到 Math.random() 產生隨機數，打亂排序規律。

建議回復：

在寫代碼前，先把實現原理介紹一下，然后再開始寫代碼：

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sign = 1; 
a.sort(function(a, b) {
 return Math.random() - 0.5
});

十五、實現一個函數 clone()，可以對 JavaScript 中的5種主要的數據類型（包括 Number、String、Object、Array、Boolean）進行值復制。

分析：

這道題考察了以下知識點：

1. 使用 typeof 判斷值得類型；

2. 使用 toString 區分數組和對象；

3. 遞歸函數的使用；

建議回復：

function clone(obj) {
 //判斷是對象，就進行循環復制
 if (typeof obj === 'object' && typeof obj !== 'null') {
  // 區分是數組還是對象，創建空的數組或對象
  var o = Object.prototype.toString.call(obj).slice(8, -1) === "Array" ? [] : {};
  for (var k in obj) {
   // 如果屬性對應的值為對象，則遞歸復制
   if(typeof obj === 'object' && typeof obj !== 'null'){
    o[k] = clone(obj[k])
   }else{
    o[k] = obj[k];
   }
  }
 }else{ //不為對象，直接把值返回
  return obj;
 }
 return o;
}

關于“Javascript前端經典的面試題有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。