前言

如果面試題按類型來分，主要涉及到“技術(shù)”與“非技術(shù)”兩大類，技術(shù)類別下涉及到的子類別有：

1. 移動(dòng) & PC端布局類
2. JavaScript 核心基礎(chǔ)類
3. 衍生框架類
4. 項(xiàng)目應(yīng)用類

這四大類別的面試題若按出現(xiàn)頻率來劃分，則面試時(shí) 100% 會(huì)問到的題型有：“移動(dòng)端&PC端布局類、JavaScript 核心基礎(chǔ)類”。本次選擇這兩類中難度更高一些的 “JavaScript 核心基礎(chǔ)類” 面試題，進(jìn)行了分析和解答，供面試前準(zhǔn)備。

特別說明：

假如你在面試時(shí)被這些題型卡住了，就必須正視自己的知識短板，并且要心悅城服的刻苦鉆研、直至學(xué)會(huì)為止！畢竟想要成為一個(gè)合格的 “WEB前端工程師”，掌握以下這些 JavaScript 核心的基礎(chǔ)知識，才擔(dān)得上“合格”這兩個(gè)字，否則就是“冒牌”的哦~

一、JavaScript 的 typeof 返回哪些數(shù)據(jù)類型？

分析：

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

建議回復(fù)：

首先，JavaScript 中一共有兩大數(shù)據(jù)類型：

1. 基礎(chǔ)類型
2. 引用類型
   

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

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

二、請寫出以下代碼運(yùn)算結(jié)果：

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

分析：

這道題與“題目一”是連環(huán)扣，當(dāng)“題目一”回答完后，通過此題再一次強(qiáng)化運(yùn)算符和數(shù)據(jù)類型的基本功。

建議回復(fù)：

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

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 種強(qiáng)制類型轉(zhuǎn)換和 2 種隱式類型轉(zhuǎn)換?

分析：

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

建議回復(fù)：

1. 強(qiáng)制類型轉(zhuǎn)換： 明確調(diào)用內(nèi)置函數(shù)，強(qiáng)制把一種類型的值轉(zhuǎn)換為另一種類型。強(qiáng)制類型轉(zhuǎn)換主要有：Boolean、Number、String、parseInt、parseFloat

2. 隱式類型轉(zhuǎn)換： 在使用算術(shù)運(yùn)算符時(shí)，運(yùn)算符兩邊的數(shù)據(jù)類型可以是任意的，比如，一個(gè)字符串可以和數(shù)字相加。之所以不同的數(shù)據(jù)類型之間可以做運(yùn)算，是因?yàn)?JavaScript 引擎在運(yùn)算之前會(huì)悄悄的把他們進(jìn)行了隱式類型轉(zhuǎn)換。隱式類型轉(zhuǎn)換主要有：+、–、==、!

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

建議回復(fù)：

事件流描述的是從頁面中接收事件的順序。 DOM 結(jié)構(gòu)是樹形結(jié)構(gòu)，當(dāng)頁面中的某一個(gè)元素觸發(fā)了某個(gè)一個(gè)事件，事件會(huì)從最頂層的 window 對象開始，向下傳播到目標(biāo)元素，途徑的祖先節(jié)點(diǎn)都會(huì)觸發(fā)對應(yīng)的事件，如果當(dāng)前節(jié)點(diǎn)的該事件綁定了事件處理函數(shù)的話，則會(huì)執(zhí)行該函數(shù)當(dāng)事件達(dá)到目標(biāo)元素并執(zhí)行綁定函數(shù)（如果有綁定的話）后，事件又會(huì)向上傳播到 window 元素，途徑的祖先節(jié)點(diǎn)都會(huì)觸發(fā)對應(yīng)的事件（如果綁定事件處理函數(shù)的話）

事件流包含三個(gè)階段：

• 事件捕捉階段
• 處于目標(biāo)階段
• 事件冒泡階段

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

      處于目標(biāo)階段：處在綁定事件的元素上；

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

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

建議回復(fù)：

1. window 對象，是 JS 的最頂層對象，其他的 BOM 對象都是 window 對象的屬性；
2. document 對象，文檔對象；
3. location 對象，瀏覽器當(dāng)前URL信息；
4. navigator 對象，瀏覽器本身信息；
5. screen 對象，客戶端屏幕信息；
6. history 對象，瀏覽器訪問歷史信息；

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

分析：

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

建議回復(fù)：

簡述 AJAX：AJAX即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。

AJAX 基本步驟：

1. 初始化ajax對象
2. 連接地址，準(zhǔn)備數(shù)據(jù)
3. 發(fā)送請求
4. 接收數(shù)據(jù)（正在接收，尚未完成）
5. 接收數(shù)據(jù)完成
   

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

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

分析：

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

建議回復(fù)：

• 200：請求已成功，請求所希望的響應(yīng)頭或數(shù)據(jù)體將隨此響應(yīng)返回。
• 302：請求的資源臨時(shí)從不同的 URI 響應(yīng)請求。由于這樣的重定向是臨時(shí)的，客戶端應(yīng)當(dāng)繼續(xù)向原有地址發(fā)送以后的請求。只有在 Cache-Control 或 Expires 中進(jìn)行了指定的情況下，這個(gè)響應(yīng)才是可緩存的。
• 304：如果客戶端發(fā)送了一個(gè)帶條件的 GET 請求且該請求已被允許，而文檔的內(nèi)容（自上次訪問以來或者根據(jù)請求的條件）并沒有改變，則服務(wù)器應(yīng)當(dāng)返回這個(gè)狀態(tài)碼。304 響應(yīng)禁止包含消息體，因此始終以消息頭后的第一個(gè)空行結(jié)尾。
• 403：服務(wù)器已經(jīng)理解請求，但是拒絕執(zhí)行它。
• 404：請求失敗，請求所希望得到的資源未被在服務(wù)器上發(fā)現(xiàn)。
• 500：服務(wù)器遇到了一個(gè)未曾預(yù)料的狀況，導(dǎo)致了它無法完成對請求的處理。一般來說，這個(gè)問題都會(huì)在服務(wù)器端的源代碼出現(xiàn)錯(cuò)誤時(shí)出現(xiàn)。
  

八、同步和異步的區(qū)別?

分析：

又是概念題。

建議回復(fù)：

• 首先同步異步于阻塞非阻塞并沒有關(guān)系。同步異步主要是事情做完以后，如何進(jìn)行處理、或者說關(guān)注的是一種消息通信機(jī)制。
• 同步的情況下，是由處理消息者自己去等待消息是否被觸發(fā)；
• 而異步的情況下是由觸發(fā)機(jī)制來通知處理消息者；
  

舉例： 比如在上課時(shí)，你問老師一個(gè)問題，這個(gè)問題可能需要花費(fèi)一點(diǎn)時(shí)間去思考，這個(gè)時(shí)候老師可能：

• 思考，思考……，好了，有答案了；
• 這個(gè)問題需要一點(diǎn)時(shí)間，你先做點(diǎn)別的，等我想好了，去找你。
  

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

• 阻塞非阻塞，主要是對于請求者而言的。
• 阻塞：發(fā)出請求等待結(jié)果返回，然后再處理后續(xù)的事情；
• 非阻塞：發(fā)出請求不等待結(jié)果返回，可以接著做后續(xù)的事情；

舉例，還是上一個(gè)例子：

• 老師在使用同步思考的時(shí)候，你可以靜靜的等待老師給出答案，也可以邊做自己的事情邊等待老師的回答，當(dāng)然這時(shí)候你需要時(shí)刻去關(guān)注老師是否已經(jīng)想好了，在程序中需要進(jìn)行輪詢了。乀(ˉεˉ乀)
• 老師使用異步的方式，這個(gè)時(shí)候老師告訴你可以先去做別的，好了就通知你，那么你可以去做點(diǎn)別的，然后監(jiān)聽事件就行，當(dāng)然你也可以很軸，我就不做別的！我要一直等著老師“想好了”的事件發(fā)生。
• 所以同步可以是阻塞的也可以是非阻塞的，異步也是如此。
  

九、GET和POST的區(qū)別，何時(shí)使用POST？

分析：

像是數(shù)據(jù)交互類的概念題在面試時(shí)被問到的機(jī)率之多，也反應(yīng)出它在工作中的實(shí)用價(jià)值。所以沒別的，好好學(xué)吧，好好背！

建議回復(fù)：

GET和POST的區(qū)別：

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

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

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

1. 以提交為目的的請求（類似語義化，get 表示請求，post 表示提交）；
2. 發(fā)送私密類數(shù)據(jù)（用戶名、密碼）（因?yàn)闉g覽器緩存記錄特性）；
3. 向服務(wù)器發(fā)送大量數(shù)據(jù)（數(shù)據(jù)大小限制區(qū)別）；
4. 上傳文件圖片時(shí)（數(shù)據(jù)類型區(qū)別）；

十、 AJAX 的局限性?

建議回復(fù)：

1. AJAX 不支持瀏覽器 back 按鈕。
2. 安全問題 AJAX 暴露了與服務(wù)器交互的細(xì)節(jié)。
3. 對搜索引擎的支持比較弱。不會(huì)執(zhí)行你的 JS 腳本，只會(huì)操作你的網(wǎng)頁源代碼；
4. 跨域請求有一定限制。解決方式：jsonp；
   

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

分析：

原理概念題。

建議回復(fù)：

當(dāng)使用 new 操作符調(diào)用構(gòu)造函數(shù)，函數(shù)實(shí)際會(huì)經(jīng)歷如下步驟：

1. 創(chuàng)建一個(gè)新對象；
2. 把函數(shù)中上下文（作用域）對象this指向該對象；
3. 執(zhí)行代碼，通過this給新對象添加屬性或方法；
4. 返回對象；
   

十二、null 和 undefined 的區(qū)別？

分析：

經(jīng)典的概念題。

建議回復(fù)：

null： null表示空值，轉(zhuǎn)為數(shù)值時(shí)為0；

undefined：undefined表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒有定義。

1. 變量被聲明了，但沒有賦值時(shí)，就等于undefined。
2. 對象沒有賦值的屬性，該屬性的值為undefined。
3. 函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined。
   

十三、JavaScript 原型，原型鏈 ? 有什么特點(diǎn)？

建議回復(fù)：

JavaScript 原型： 每創(chuàng)建一個(gè)函數(shù)，函數(shù)上都有一個(gè)屬性為 prototype，它的值是一個(gè)對象。 這個(gè)對象的作用在于當(dāng)使用函數(shù)創(chuàng)建實(shí)例的時(shí)候，那么這些實(shí)例都會(huì)共享原型上的屬性和方法。

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

十四、實(shí)現(xiàn)對數(shù)組進(jìn)行亂序

分析：

這道題檢驗(yàn)了數(shù)組的 sort() 方法，因?yàn)槭莵y序，所以還需要用到 Math.random() 產(chǎn)生隨機(jī)數(shù)，打亂排序規(guī)律。

建議回復(fù)：

在寫代碼前，先把實(shí)現(xiàn)原理介紹一下，然后再開始寫代碼：

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
});

十五、實(shí)現(xiàn)一個(gè)函數(shù) clone()，可以對 JavaScript 中的5種主要的數(shù)據(jù)類型（包括 Number、String、Object、Array、Boolean）進(jìn)行值復(fù)制。

分析：

這道題考察了以下知識點(diǎn)：

1. 使用 typeof 判斷值得類型；
2. 使用 toString 區(qū)分?jǐn)?shù)組和對象；
3. 遞歸函數(shù)的使用；

建議回復(fù)：

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

總結(jié)

以上就是給大家總結(jié)關(guān)于Javascript前端面試題的全部內(nèi)容了，后續(xù)看到再繼續(xù)補(bǔ)充，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，請大家繼續(xù)關(guān)注腳本之家。

最新評論