JavaScript九大面試問題集錦，助你順利通關！

全文共6287字，預計學習時長20分鐘或更長

圖片來源：Irvan Smith / Unsplash

人們認爲JavaScript是最適合初學者的語言。一部分緣由在於JavaScript在互聯網中運用普遍，另外一部分緣由在於其自身特性使得即便編寫的代碼不那麼完美依然能夠運行：不管是否少了一個分號或是內存管理問題，它都不像許多其餘語言那樣嚴格，但在開始學習以前，要確保你已經知道JavaScript的前因後果，包括能夠自動完成的事情和「幕後」的操做。

本文將介紹一些面試時關於JavaScript的常見問題，以及一些突發難題。固然，每次面試都是不一樣的，你也可能不會碰見這類問題。可是知道的越多，準備的就越充分。

第一部分：突發難題

若是在面試中忽然問到下列問題，彷佛很難回答。即使如此，這些問題在準備中仍發揮做用：它們揭示了JavaScript的一些有趣的功能，並強調在提出編程語言時，首先必須作出的一些決定。

瞭解有關JavaScript的更多功能，建議訪問https://wtfjs.com。

1. 爲何Math.max（）小於Math.min（）？

Math.max（）> Math.min（）輸出錯誤這一說法看上去有問題，但其實至關合理。

若是沒有給出參數，Math.min（）返回infinity（無窮大），Math.max（）返回-infinity(無窮小)。這只是max（）和min（）方法規範的一部分，但選擇背後的邏輯值得深議。瞭解其中緣由，請看如下代碼：

Math.min(1) // 1
Math.min(1, infinity)// 1
Math.min(1, -infinity)// -infinity

若是-infinity（無窮小）做爲Math.min（）的默認參數，那麼每一個結果都是-infinity（無窮小），這毫無用處！ 然而，若是默認參數是infinity（無窮大），則不管添加任何參數返回都會是該數字 - 這就是咱們想要的運行方式。

2. 爲何0.1+0.2不等於0.3

簡而言之，這與JavaScript在二進制中存儲浮點數的準確程度有關。在Google Chrome控制檯中輸入如下公式將獲得：

0.1 + 0.2// 0.30000000000000004 
0.1 + 0.2 - 0.2// 0.10000000000000003 
0.1 + 0.7// 0.7999999999999999

若是是簡單的等式，對準確度沒有要求，這不太可能產生問題。可是若是須要測試相等性，即便是簡單地應用也會致使使人頭疼的問題。解決這些問題，有如下幾種方案。

Fixed Point固定點

例如，若是知道所需的最大精度（例如，若是正在處理貨幣），則可使用整數類型來存儲該值。所以，能夠存儲499而非4.99美圓，並在此基礎上執行任何等式，而後可使用相似result =（value / 100）.toFixed（2）的表達式將結果顯示給最終用戶，該表達式返回一個字符串。

BCD代碼

若是精度很是重要，另外一種方法是使用二進制編碼的十進制（BCD）格式，可使用BCD庫（https://formats.kaitai.io/bcd/javascript.html）訪問JavaScript。每一個十進制值分別存儲在一個字節（8位）中。鑑於一個字節能夠存儲16個單獨值，而該系統僅使用0-9位，因此這種方法效率低下。可是，若是十分注重精確度，採用何種方法都值得考量。

3. 爲何018減017等於3？

018-017返回3實際是靜默類型轉換的結果。這種狀況，討論的是八進制數。

八進制數簡介

你或許知道計算中使用二進制（base-2）和十六進制（base-16）數字系統，可是八進制（base-8）在計算機歷史中的地位也舉足親重：在20世紀50年代後期和 20世紀60年代間，八進制被用於簡化二進制，削減高昂的製造系統中的材料成本。

不久之後Hexadecimal（十六進制）開始登上歷史舞臺：

1965年發佈的IBM360邁出了從八進制到十六進制的決定性一步。咱們這些習慣八進制的人對這一舉措感到震驚！

沃恩·普拉特（Vaughan Pratt）

現在的八進制數

但在現代編程語言中，八進制又有何做用呢？針對某些案例，八進制比十六進制更具優點，由於它不須要任何非數字（使用0-7而不是0-F）。

一個常見用途是Unix系統的文件權限，其中有八個權限變體：

4 2 1

0 - - - no permissions

1 - - x only execute

2 - x - only write

3 - x x write and execute

4 x - - only read

5 x - x read and execute

6 x x - read and write

7 x x x read, write and execute

出於類似的起因，八進制也用於數字顯示器。

回到問題自己

在JavaScript中，前綴0將全部數字轉換爲八進制。可是，八進制中不使用數字8，任何包含8的數字都將自動轉換爲常規十進制數。

所以，018-017實際上等同於十進制表達式：18-15，由於017使用八進制而018使用十進制。

第二部分：常見問題

圖片來源：pexels.com/@divinetechygirl

本節中，將介紹面試中一些更加常見的JavaScript問題。第一次學習JavaScript時，這些問題容易被忽略。但在編寫最佳代碼時，瞭解下述問題用處頗大。

4. 函數表達式與函數聲明有哪些不一樣？

函數聲明使用關鍵字function，後跟函數的名稱。相反，函數表達式以var，let或const開頭，後跟函數名稱和賦值運算符=。請看如下代碼：

// Function Declaration
function sum(x, y) 
{  return x + y;
};

// Function Expression: ES5
var sum = function(x, y) {  
return x + y;}; 

// Function Expression: ES6+
const sum = (x, y) => { return x + y };

實際操做中，關鍵的區別在於函數聲明要被提高，而函數表達式則沒有。這意味着JavaScript解釋器將函數聲明移動到其做用域的頂部，所以能夠定義函數聲明並在代碼中的任何位置調用它。相比之下，只能以線性順序調用函數表達式：必須在調用它以前解釋。

現在，許多開發人員偏心函數表達式有以下幾個緣由：

· 首先，函數表達式實施更加可預測的結構化代碼庫。固然，函數聲明也可以使用結構化代碼庫; 只是函數聲明讓你更容易擺脫凌亂的代碼。

· 其次，能夠將ES6語法用於函數表達式：這一般更爲簡潔，let和const能夠更好地控制是否從新賦值變量，咱們將在下一個問題中看到。

5. var，let和const有什麼區別？

自ES6發佈以來，現代語法已進入各行各業，這已經是一個極其常見的面試問題。Var是初版JavaScript中的變量聲明關鍵字。但它的缺點致使在ES6中採用了兩個新關鍵字：let和const。

這三個關鍵字具備不一樣的分配，提高和域 - 所以咱們將單獨討論。

i) 分配

最基本的區別是let和var能夠從新分配，而const則不能。這使得const成爲不變變量的最佳選擇，而且它將防止諸如意外從新分配之類的失誤。注意，當變量表示數組或對象時，const確實容許變量改變，只是沒法從新分配變量自己。

Let 和var均可從新分配，可是正如如下幾點應該明確的那樣，若是不是全部狀況都要求更改變量，多數選擇中，let具備優於var的顯著優點。

ii)提高

與函數聲明和表達式（如上所述）之間的差別相似，使用var聲明的變量老是被提高到它們各自的頂部，而使用const和let聲明的變量被提高，可是若是你試圖在聲明以前訪問，將會獲得一個TDZ（時間死區）錯誤。因爲var可能更容易出錯，例如意外從新分配，所以運算是有用的。請看如下代碼：

var x = "global scope";

function foo() {  
var x = "functional scope"; 
 console.log(x);
}

foo(); // "functional scope"
console.log(x); // "global scope"

這裏，foo（）和console.log（x）的結果與預期一致。可是，若是去掉第二個變量又會發生什麼呢？

var x = "global scope";

function foo() {
  x = "functional scope"; 
 console.log(x);
}foo(); // "functional scope"
console.log(x); // "functional scope"

儘管在函數內定義，但x =「functional scope」已覆蓋全局變量。須要重複關鍵字var來指定第二個變量x僅限於foo（）。

iii) 域

雖然var是function-scoped(函數做用域)，但let和const是block-scoped(塊做用域的：通常狀況下，Block是大括號{}內的任何代碼，包括函數，條件語句和循環。爲了闡明差別，請看如下代碼：

var a = 0;
let b = 0;
const c = 0;
if (true) { 
 var a = 1;
  let b = 1; 
 const c = 1;
}
console.log(a); // 1
console.log(b); // 0
console.log(c); // 0

在條件塊中，全局範圍的var a已從新定義，但全局範圍的let b和const c則沒有。通常而言，確保本地任務保持在本地執行，將使代碼更加清晰，減小出錯。

6. 若是分配不帶關鍵字的變量會發生什麼？

若是不使用關鍵字定義變量，又會如何？從技術上講，若是x還沒有定義，則x = 1是window.x = 1的簡寫。

要想徹底杜絕這種簡寫，能夠編寫嚴格模式，——在ES5中介紹過——在文檔頂部或特定函數中寫use strict。後，當你嘗試聲明沒有關鍵字的變量時，你將收到一條報語法錯誤：Uncaught SyntaxError：Unexpected indentifier。

7. 面向對象編程（OOP）和函數式編程（FP）之間的區別是什麼？

JavaScript是一種多範式語言，即它支持多種不一樣的編程風格，包括事件驅動，函數和麪向對象。

編程範式各有不一樣，但在當代計算中，函數編程和麪向對象編程最爲流行 - 而JavaScript兩種均可執行。

面向對象編程

OOP以「對象」這一律念爲基礎的數據結構，包含數據字段（JavaScript稱爲類）和程序(JavaScript中的方法)。

一些JavaScript的內置對象包括Math（用於random，max和sin等方法），JSON（用於解析JSON數據）和原始數據類型，如String，Array，Number和Boolean。

不管什麼時候採用的內置方法，原型或類，本質上都在使用面向對象編程。

函數編程

FP（函數編程）以「純函數」的概念爲基礎，避免共享狀態，可變數據和反作用。這可能看起來像不少術語，但可能已經在代碼中建立了許多純函數。

輸入相同數據，純函數老是返回相同的輸出。這種方式沒有反作用：除了返回結果以外，例如登陸控制檯或修改外部變量等都不會發生。

至於共享狀態，這裏有一個簡單的例子，即便輸入是相同的，狀態仍能夠改變函數的輸出。設置一個具備兩個函數的代碼：一個將數字加5，另外一個將數字乘以5。

const num = { 
val: 1
};const add5 = () => num.val += 5;
const multiply5 = () => num.val *= 5;

若是先調用add5在調用乘以5，則總體結果爲30。可是若是以相反的方式執行函數並記錄結果，則輸出爲10，與以前結果不一致。

這違背了函數式編程的原理，由於函數的結果因Context調用方法而異。 從新編寫上面的代碼，以便結果更易預測：

const num = { 
val: 1
};
const add5 = () => Object.assign({}, num, {val: num.val + 5}); const multiply5 = 
() => Object.assign({}, num, {val: num.val * 5});

如今，num.val的值仍然爲1，不管Context調用的方法如何，add5（num）和multiply5（num）將始終輸出相同的結果。

8. 命令式和聲明性編程之間有什麼區別？

關於命令式編程和聲明式編程的區別，能夠以OOP（面向對象編程）和FP（函數式編程）爲參考。

這兩種是描述多種不一樣編程範式共有特徵的歸納性術語。FP（函數式編程）是聲明性編程的一個範例，而OOP（面向對象編程）是命令式編程的一個範例。

從基本的意義層面，命令式編程關注的是如何作某事。它以最基本的方式闡明瞭步驟，並以for和while循環，if和switch陳述句等爲特徵。

const sumArray = array => {
  let result = 0; 
 for (let i = 0; i < array.length; i++) { 
    result += array[i] 
 }; 
 return result;
}

相比之下，聲明性編程關注的是作什麼，它經過依賴表達式將怎樣作抽出來。這一般會產生更簡潔的代碼，可是在規模上，因爲透明度低，調試會更加困難。

這是上述的sumArray（）函數的聲明方法。

const sumArray = array => { return array.reduce((x, y) => x + y) };

圖片來源：pexels.com/@rawpixel

9. 是什麼基於原型的繼承？

最後，要講到的是基於原型的繼承。面向對象編程有幾種不一樣的類型，JavaScript使用的是基於原型的繼承。該系統經過使用現有對象做爲原型，容許重複運行。

即便是首次遇到原型這一律念，使用內置方法時也會遇到原型系統。 例如，用於操做數組的函數（如map，reduce，splice等）都是Array.prototype對象的方法。實際上，數組的每一個實例（使用方括號[]定義，或者 -不常見的 new Array（））都繼承自Array.prototype，這就是爲何map，reduce和spliceare等方法都默承認用的緣由。

幾乎全部內置對象都是如此，例如字符串和布爾運算：只有少數，如Infinity，NaN，null和undefined等沒有類或方法。

在原型鏈的末尾，能發現 Object.prototype，幾乎JavaScript中的每一個對象都是Object的一個實例。好比Array. prototype和String. prototype都繼承了Object.prototype的類和方法。

要想對使用prototype syntax的對象添加類和方法，只需將對象做爲函數啓動，並使用prototype關鍵字添加類和方法：

funcion Person() {};
Person.prototype.forename = "John";
Person.prototype.surname = "Smith";

是否應該覆蓋或擴展原型運算？

可使用與建立擴展prototypes一樣的方式改變內置運算，可是大多數開發人員（以及大多數公司）不會建議這樣作。

若是但願多個對象進行一樣的運算，能夠建立一個自定義對象（或定義你本身的「類」或「子類」），這些對象繼承內置原型而不改變原型自己。若是打算與其餘開發人員合做，他們對JavaScript的默認行爲有必定的預期，編輯此默認行爲很容易致使出錯。

總的來講，這些問題可以幫助你更好理解JavaScript，包括其核心功能和其餘不爲人知的功能 ，而且望能助你爲下次的面試作好準備。

留言 點贊 關注

咱們一塊兒分享AI學習與發展的乾貨
歡迎關注全平臺AI垂類自媒體 「讀芯術」

（添加小編微信：dxsxbb，加入讀者圈，一塊兒討論最新鮮的人工智能科技哦～）