2017年第一波JavaScript前端面試題

時間  2019-12-05
標籤 2017年 第一 javascript 端面 試題 欄目 JavaScript 简体版
原文   原文鏈接

面試題按類型來分，主要涉及到「技術」與「非技術」兩大類，今天咱們主要討論的是「技術類」，在這個大類別下涉及到的子類別有：前端

  • 移動 & PC端佈局類
  • JavaScript 核心基礎類
  • 衍生框架類
  • 項目應用類

這四大類別的面試題若按出現頻率來劃分，則面試時 100% 會問到的題型有：「移動端&PC端佈局類、JavaScript 核心基礎類」。本次咱們選擇了這兩類中難度更高一些的 「JavaScript 核心基礎類」 面試題，給你們進行了分析和解答，供你們面試前準備。面試

特別說明：

假如你在面試時被這些題型卡住了，就必須正視本身的知識短板，而且要心悅城服的刻苦鑽研、直至學會爲止！畢竟想要成爲一個合格的 「WEB前端工程師」，掌握如下這些 JavaScript 核心的基礎知識，才擔得上「合格」這兩個字，不然就是「冒牌」的哦~ajax

言歸正傳，咱們來看看妙味 JS 講師們爲你們整理的十五道 JavaScript 核心基礎類面試題：json

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

分析：

這道題檢驗的是 JS 基本功，在妙味課堂 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」。

2、請寫出如下運算結果：

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、例舉至少 3 種強制類型轉換和 2 種隱式類型轉換?

分析：

類型轉換聽起來可能有點寬泛，但這道題明確給出了回答的範圍，對於聽過 JS 實體課的同窗來講，這幾乎是送分題，由於課上講師們就明確講解了類型轉換的幾種不一樣形式，假如你們有作好筆記的話~安全

建議回覆：

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

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

4、JavaScript 的事件流模型都有什麼？

分析：

事件流模型這個知識點在妙味中級階段 event 事件章節就有詳細講解，若是已經忘記的朋友，再去看看這個階段的視頻吧。 題外話：通常純理論的知識點學起來枯燥（妙味實體班的學員也是如此），但理論的好處在於當遇到問題時，能迅速判斷出錯的原理所在，從而能夠準確迅速的查找問題並精準修復，可讓冗餘代碼簡化到最低、能夠再也不出了錯之後像撞大運般的採用 「試來試去大法」 來修復~

建議回覆：

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

——文字好繞口有沒有？誰讓當初聽課畫圖講解的時候，你不認真聽課卻在那兒打瞌睡呢？ ^_^ 繼續~

事件流包含三個階段：
  • 事件捕捉階段
  • 處於目標階段
  • 事件冒泡階段
  1. 事件捕捉階段：事件開始由頂層對象觸發，而後逐級向下傳播，直到目標的元素；
  2. 處於目標階段：處在綁定事件的元素上；
  3. 事件冒泡階段：事件由具體的元素先接收，而後逐級向上傳播，直到不具體的元素；

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

分析：

再次提醒：這題是妙味JS班 BOM 課程的筆記。背下來吧，背不出來的去面壁……

建議回覆：

  1. window 對象，是 JS 的最頂層對象，其餘的 BOM 對象都是 window 對象的屬性；
  2. location 對象，瀏覽器當前URL信息；
  3. navigator 對象，瀏覽器自己信息；
  4. screen 對象，客戶端屏幕信息；
  5. history 對象，瀏覽器訪問歷史信息；

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

分析：

若是說僅僅只會用 AJAX 是基礎要求的話，那麼聽明白講師課上的細節分析，則是面試加分項之一。對於這種純概念題，建議面試前再寫一遍原生 AJAX 函數的封裝過程，必定要在理解的基礎上去背，纔會在面試時有良好發揮。

建議回覆：

  • 簡述 AJAX：AJAX即「Asynchronous Javascript And XML」（異步 JavaScript 和 XML），是指一種建立交互式網頁應用的網頁開發技術。經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

AJAX 基本步驟：

  1. 初始化ajax對象
  2. 鏈接地址，準備數據
  3. 發送請求
  4. 接收數據（正在接收，還沒有完成）
  5. 接收數據完成
//初始化ajax對象
var xhr = new XMLHttpRequest();
//鏈接地址，準備數據
xhr.open(「方式」,」地址」,是否爲異步);
//接收數據完成觸發的事件
xhr.onload =function(){}
//發送數據
xhr.send();

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

分析：

在聽講師講解 AJAX 課程的時候，請仔細留意講師所描述每個數字背後的含義、以及有可能出現的場景。萬一在面試時考官不只僅只是讓你背誦、而是給你一個場景讓你作問答題呢？——因此，「帶着理解去記憶」 是對付概念題最好的法寶，此外多看看延展的知識點，也是有益無害。

建議回覆：

  1. 200：請求已成功，請求所但願的響應頭或數據體將隨此響應返回。
  2. 302：請求的資源臨時從不一樣的 URI 響應請求。因爲這樣的重定向是臨時的，客戶端應當繼續向原有地址發送之後的請求。只有在 Cache-Control 或 Expires 中進行了指定的狀況下，這個響應纔是可緩存的。
  3. 304：若是客戶端發送了一個帶條件的 GET 請求且該請求已被容許，而文檔的內容（自上次訪問以來或者根據請求的條件）並無改變，則服務器應當返回這個狀態碼。304 響應禁止包含消息體，所以始終以消息頭後的第一個空行結尾。
  4. 403：服務器已經理解請求，可是拒絕執行它。
  5. 404：請求失敗，請求所但願獲得的資源未被在服務器上發現。
  6. 500：服務器遇到了一個不曾預料的情況，致使了它沒法完成對請求的處理。通常來講，這個問題都會在服務器端的源代碼出現錯誤時出現。

8、同步和異步的區別?

分析：

又是概念題，又是課上容易打瞌睡的題對不對？看看下面的「建議回覆」吧，或許和大家上課的內容有些區別，由於講師們又從新換了個比喻，把容易讓人弄暈的、深刻的知識，以舉例的形式描述了一遍。溫故而知新的體驗老是愉悅的，至於能把你們對該知識點的回憶勾起來多少？這就要看你們在妙味學習期間有沒有往內心去了。

建議回覆：

  • 首先同步異步於阻塞非阻塞並無關係。同步異步主要是事情作完之後，如何進行處理、或者說關注的是一種消息通訊機制。
  • 同步的狀況下，是由處理消息者本身去等待消息是否被觸發；
  • 而異步的狀況下是由觸發機制來通知處理消息者；

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

  1. 思考，思考……，好了，有答案了；
  2. 這個問題須要一點時間，你先作點別的，等我想好了，去找你。

第一種就是同步，第二種就是異步。因此同步異步能夠說是對被請求方來講的，被請求者使用什麼方式來告知處理結果。

  • 阻塞非阻塞，主要是對於請求者而言的。
  • 阻塞：發出請求等待結果返回，而後再處理後續的事情；
  • 非阻塞：發出請求不等待結果返回，能夠接着作後續的事情；

舉例，仍是上一個例子：

  1. 老師在使用同步思考的時候，你能夠靜靜的等待老師給出答案，也能夠邊作本身的事情邊等待老師的回答，固然這時候你須要時刻去關注老師是否已經想好了，在程序中須要進行輪詢了。乀(ˉεˉ乀)
  2. 老師使用異步的方式，這個時候老師告訴你能夠先去作別的，好了就通知你，那麼你能夠去作點別的，而後監聽事件就行，固然你也能夠很軸，我就不作別的！我要一直等着老師「想好了」的事件發生。

因此同步能夠是阻塞的也能夠是非阻塞的，異步也是如此。

9、GET和POST的區別，什麼時候使用POST？

分析：

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

建議回覆：

GET和POST的區別：

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

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

在如下狀況中，請使用 POST 請求：

  1. 以提交爲目的的請求（相似語義化，get 表示請求，post 表示提交）；
  2. 發送私密類數據（用戶名、密碼）（由於瀏覽器緩存記錄特性）；
  3. 向服務器發送大量數據（數據大小限制區別）；
  4. 上傳文件圖片時（數據類型區別）；

10、 AJAX 的侷限性?

分析：

剛剛上面有道題還分析了 AJAX 的原理步驟啥的，如今又冒出來個侷限性？若是你僅僅只是知道怎麼用它，那在看到這個題應該是一臉懵逼了……

建議回覆：

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

11、new 操做符具體幹了什麼呢?

分析：

原理概念題，上課好好聽、作好筆記、好好理解……啦啦啦~

建議回覆：

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

  1. 建立一個新對象；
  2. 把函數中上下文（做用域）對象this指向該對象；
  3. 執行代碼，經過this給新對象添加屬性或方法；
  4. 返回對象；

12、null 和 undefined 的區別？

分析：

經典的概念題，要回答好的確須要功底紮實。

建議回覆：

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

  • undefined：undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。

  1. 變量被聲明瞭，但沒有賦值時，就等於undefined。
  2. 對象沒有賦值的屬性，該屬性的值爲undefined。
  3. 函數沒有返回值時，默認返回undefined。

十3、JavaScript 原型，原型鏈 ? 有什麼特色？

分析：

不分析了，全是妙味實體班上課講的東西。。。ㄟ(▔,▔)ㄏ

建議回覆：

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

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

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

分析：

這道題檢驗了數組的 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
});

十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[k] === 'object' && typeof obj[k] !== 'null'){
                o[k] = clone(obj[k])
            }else{
                o[k] = obj[k];
            }
        }
    }else{ //不爲對象，直接把值返回
        return obj;
    }
    return o;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程