年來，從事JavaScript的程序員越來越多，JavaScript的曝光率也越來越高，如果你想轉行試試JavaScript，不妨收下這份面試題及答案，沒準用得上。當然，如果針對這些問題，你有更棒的答案，歡迎移步至評論區。

1、什么是JavaScript？（這是基本題，對很多程序員來說也是送分題！）

JavaScript是客戶端和服務器端腳本語言，可以插入到HTML頁面中，并且是目前較熱門的Web開發語言。同時，JavaScript也是面向對象編程語言。

類似的基本題目還包括：JavaScript都有哪些類型?JavaScript是誰發明的？......

2、列舉Java和JavaScript之間的區別？

Java是一門十分完整、成熟的編程語言。相比之下，JavaScript是一個可以被引入HTML頁面的編程語言。這兩種語言并不完全相互依賴，而是針對不同的意圖而設計的。 Java是一種面向對象編程（OOPS）或結構化編程語言，類似的如C ++或C，而JavaScript是客戶端腳本語言，它被稱為非結構化編程。

3. JavaScript和ASP腳本相比，哪個更快？

JavaScript更快。JavaScript是一種客戶端語言，因此它不需要Web服務器的協助來執行。另一方面，ASP是服務器端語言，因此總是比JavaScript慢。值得注意的是，Javascript現在也可用于服務器端語言（nodejs）。

4、什么是負無窮大？

負無窮大是JavaScript中的一個數字，可以通過將負數除以零來得到。

5、如何將JavaScript代碼分解成幾行嗎？

在字符串語句中可以通過在第一行末尾使用反斜杠“\”來完成

例：document.write("This is \a program");

如果不是在字符串語句中更改為新行，那么javaScript會忽略行中的斷點。

例：

var x=1, y=2,

z=

x+y;

上面的代碼是完美的，但并不建議這樣做，因為阻礙了調試。

6、什么是未聲明和未定義的變量？

未聲明的變量是程序中不存在且未聲明的變量。如果程序嘗試讀取未聲明變量的值，則會遇到運行時錯誤。未定義的變量是在程序中聲明但尚未給出任何值的變量。如果程序嘗試讀取未定義變量的值，則返回未定義的值。

7、如何編寫可動態添加新元素的代碼？

8、什么是全局變量？這些變量如何聲明，使用全局變量有哪些問題？

全局變量是整個代碼長度可用的變量，也就是說這些變量沒有任何作用域。var關鍵字用于聲明局部變量或對象。如果省略var關鍵字，則聲明一個全局變量。

例：// Declare a global globalVariable = “Test”;

使用全局變量所面臨的問題是本地和全局變量名稱的沖突。此外，很難調試和測試依賴于全局變量的代碼。

9、解釋JavaScript中定時器的工作？如果有，也可以說明使用定時器的缺點？

定時器用于在設定的時間執行一段代碼，或者在給定的時間間隔內重復該代碼。這通過使用函數setTimeout，setInterval和clearInterval來完成。

• setTimeout（function，delay）函數用于啟動在所述延遲之后調用特定功能的定時器。

• setInterval（function，delay）函數用于在提到的延遲中重復執行給定的功能，只有在取消時才停止。

• clearInterval（id）函數指示定時器停止。

定時器在一個線程內運行，因此事件可能需要排隊等待執行。

10、ViewState和SessionState有什么區別？

“ViewState”特定于會話中的頁面。

“SessionState”特定于可在Web應用程序中的所有頁面上訪問的用戶特定數據。

11、什么是===運算符？

===被稱為嚴格等式運算符，當兩個操作數具有相同的值而沒有任何類型轉換時，該運算符返回true。

12、說明如何使用JavaScript提交表單？

要使用JavaScript提交表單，請使用

document.form [0] .submit（）;

document.form [0] .submit（）

13、元素的樣式/類如何改變？

可以通過以下方式完成：

document.getElementById(“myText”).style.fontSize = “20?;

或

document.getElementById(“myText”).className = “anyclass”;

14、JavaScript中的循環結構都有什么？

For、While、do-while loops

15、如何在JavaScript中將base字符串轉換為integer？

parseInt() 函數解析一個字符串參數，并返回一個指定基數的整數。parseInt（）將要轉換的字符串作為其第一個參數，第二個參數是給定字符串的基礎。

為了將4F（基數16）轉換為整數，所使用的代碼是 ：parseInt ("4F", 16);

16、說明“==”和“===”之間的區別？

“==”僅檢查值相等，而“===”是一個更嚴格的等式判定，如果兩個變量的值或類型不同，則返回false。

17、3 + 2 +“7”的結果是什么？

由于3和2是整數，它們將直接相加。由于7是一個字符串，它將會被直接連接，所以結果將是57。

18、說明如何檢測客戶端機器上的操作系統？

為了檢測客戶端機器上的操作系統，應使用navigator.appVersion字符串（屬性）。

19、Javascript中的NULL是什么意思？

NULL用于表示無值或無對象。它意味著沒有對象或空字符串，沒有有效的布爾值，沒有數值和數組對象。

20、delete操作符的功能是什么？

delete操作符用于刪除程序中的所有變量或對象，但不能刪除使用VAR關鍵字聲明的變量。

21、JavaScript中有哪些類型的彈出框？

Alert、Confirm and、Prompt

22、Void（0）怎么用？

• Void（0）用于防止頁面刷新，并在調用時傳遞參數“zero”。

• Void（0）用于調用另一種方法而不刷新頁面。

23、如何強制頁面加載JavaScript中的其他頁面？

必須插入以下代碼才能達到預期效果：

24、escape字符是用來做什么的？

使用特殊字符（如單引號，雙引號，撇號和＆符號）時，將使用轉義字符（反斜杠）。在字符前放置反斜杠，使其顯示。

例：

25、什么是JavaScript Cookie？

Cookie是用來存儲計算機中的小型測試文件，當用戶訪問網站以存儲他們需要的信息時，它將被創建。

26、解釋JavaScript中的pop（）方法？

pop（）方法與shift（）方法類似，但不同之處在于Shift方法在數組的開頭工作。此外，pop（）方法將最后一個元素從給定的數組中取出并返回。然后改變被調用的數組。

例：

var cloths = [“Shirt”, “Pant”, “TShirt”];

cloths.pop();

//Now cloth becomes Shirt,Pant

27、在JavaScript中使用innerHTML的缺點是什么？

如果在JavaScript中使用innerHTML，缺點是：內容隨處可見；不能像“追加到innerHTML”一樣使用；即使你使用+ = like“innerHTML = innerHTML +'html'”舊的內容仍然會被html替換；整個innerHTML內容被重新解析并構建成元素，因此它的速度要慢得多；innerHTML不提供驗證，因此我們可能會在文檔中插入有效的和破壞性的HTML并將其中斷。

28、break和continue語句的作用？

• Break語句從當前循環中退出。

• continue語句繼續下一個循環語句。

29、在JavaScript中，dataypes的兩個基本組是什么？

• Primitive

• Reference types

原始類型是數字和布爾數據類型。引用類型是更復雜的類型，如字符串和日期。

30、如何創建通用對象？

通用對象可以創建為：

var I = new object();

31、operator類型用來做什么？

'Typeof'是一個運算符，用于返回變量類型的字符串描述。

32、哪些關鍵字用于處理異常？

try... Catch-finally用于處理JavaScript中的異常。

33、JavaScript中不同類型的錯誤有幾種？

有三種類型的錯誤：

• Load time errors：該錯誤發生于加載網頁時，例如出現語法錯誤等狀況，稱為加載時間錯誤，并且會動態生成錯誤。

• Run time errors：由于在HTML語言中濫用命令而導致的錯誤。

• Logical Errors：這是由于在具有不同操作的函數上執行了錯誤邏輯而發生的錯誤。

34、在JavaScript中使用的Push方法是什么？

push方法用于將一個或多個元素添加或附加到數組的末尾。使用這種方法，可以通過傳遞多個參數來附加多個元素。

35、什么是JavaScript中的unshift方法？

Unshift方法就像在數組開頭工作的push方法。該方法用于將一個或多個元素添加到數組的開頭。

36、對象屬性如何分配？

屬性按以下方式分配給對象：

obj["class"] = 12;

或

obj.class = 12;

37、獲得CheckBox狀態的方式是什么？

alert（document.getElementById（'checkbox1'）。checked）;

如果CheckBox被檢查，此警報將返回TRUE。

38、解釋window.onload和onDocumentReady？

在載入頁面的所有信息之前，不運行onload函數。這導致在執行任何代碼之前會出現延遲。

onDocumentReady在加載DOM之后加載代碼。這允許早期的代碼操縱。

39、你將如何解釋JavaScript中的閉包？ 什么時候使用？

Closure是與函數返回時保留在內存中的函數相關的本地聲明變量。

例如：

40、一個值如何附加到數組？

可以以給定的方式將值附加到數組：

arr [arr.length] = value;

41、解釋for-in循環？

for-in循環用于循環對象的屬性。

for-in循環的語法是：

在每次循環中，來自對象的一個屬性與變量名相關聯，循環繼續，直到對象的所有屬性都被耗盡。

42、描述JavaScript中的匿名函數？

被聲明為沒有任何命名標識符的函數被稱為匿名函數。一般來說，匿名函數在聲明后無法訪問。

匿名函數聲明：

43、.call（）和.apply（）之間有什么區別？

函數.call（）和.apply（）在使用上非常相似，只是有一點區別。當程序員知道函數參數的編號時，使用.call（），因為它們必須在調用語句中被提及為參數。另一方面，當不知道數字時使用.apply（）,函數.apply（）期望參數為數組。

.call（）和.apply（）之間的基本區別在于將參數傳遞給函數。它們的用法可以通過給定的例子進行說明。

44、定義事件冒泡？

JavaScript允許DOM元素嵌套在一起。在這種情況下，如果單擊子級的處理程序，父級的處理程序也將執行同樣的工作。

45、什么樣的布爾運算符可以在JavaScript中使用？

“And”運算符（&&），'Or'運算符（||）和'Not'運算符（?。┛梢栽贘avaScript中使用。

*運算符沒有括號。

46、一個特定的框架如何使用JavaScript中的超鏈接定位？

可以通過使用“target”屬性在超鏈接中包含所需幀的名稱來實現。

<a href=”newpage.htm” target=”newframe”>>New Page</a>

47、在web-garden和web-farm之間有何不同？

web-garden和web-farm都是網絡托管系統。唯一的區別是web-garden是在單個服務器中包含許多處理器的設置，而web-farm是使用多個服務器的較大設置。

48、如何分配對象屬性？

將屬性分配給對象的方式與賦值給變量值相同。例如，表單對象的操作值以下列方式分配為“‘submit”：Document.form.action =“submit”

49、在JavaScript中讀取和寫入文件的方法是什么？

可以通過使用JavaScript擴展（從JavaScript編輯器運行），打開文件的示例來完成：

fh = fopen(getScriptPath(), 0);

50、在JavaScript中如何使用DOM？

DOM代表文檔對象模型，并且負責文檔中各種對象的相互交互。DOM是開發網頁所必需的，其中包括諸如段落，鏈接等對象?？梢圆僮鬟@些對象以包括添加或刪除等操作，DOM還需要向網頁添加額外的功能。除此之外，API的使用比其他更有優勢。

51、JavaScript中如何使用事件處理程序？

事件是由用戶生成活動（例如單擊鏈接或填寫表單）導致的操作。需要一個事件處理程序來管理所有這些事件的正確執行。事件處理程序是對象的額外屬性。此屬性包括事件的名稱以及事件發生時采取的操作。

52、解釋延遲腳本在JavaScript中的作用？

默認情況下，在頁面加載期間，HTML代碼的解析將暫停，直到腳本停止執行。這意味著，如果服務器速度較慢或者腳本特別沉重，則會導致網頁延遲。在使用Deferred時，腳本會延遲執行直到HTML解析器運行。這減少了網頁加載時間，并且它們的顯示速度更快。

53、JavaScript中的各種功能組件是什么？

JavaScript中的不同功能組件是：

• First-class函數：JavaScript中的函數被用作第一類對象。這通常意味著這些函數可以作為參數傳遞給其他函數，作為其他函數的值返回，分配給變量，也可以存儲在數據結構中。

• 嵌套函數：在其他函數中定義的函數稱為嵌套函數。

54、解釋unshift（）方法？

該方法在數組啟動時起作用，與push（）不同。 它將所需數量的元素添加到數組的頂部。例如：

輸出如下所示：

[" joseph "," Jane ", " charlie ", " john "]

55、decodeURI（）和encodeURI（）是什么？

EncodeURl（）用于將URL轉換為十六進制編碼。而DecodeURI（）用于將編碼的URL轉換回正常。

56、為什么不建議在JavaScript中使用innerHTML？

innerHTML內容每次刷新，因此很慢。 在innerHTML中沒有驗證的余地，因此，更容易在文檔中插入錯誤代碼，從而使網頁不穩定。

57、如何在不支持JavaScript的舊瀏覽器中隱藏JavaScript代碼？

• 在<script>標簽之后的代碼中添加“<！ - ”，不帶引號。

• 在<script>標簽之前添加“// - >”代碼中沒有引號。

• 舊瀏覽器現在將JavaScript代碼視為一個長的HTML注釋。而支持JavaScript的瀏覽器則將“<！ - ”和“// - >”作為一行注釋。

者｜FullStack.Cafe

出處｜前端之巔

根據 Stack Overflow 的 2018 年度調查，JavaScript 連續六年成為最常用的編程語言。所以我們必須面對這樣的現實，JavaScript 已經成為全棧開發技能的基石，在全棧開發面試中都會不可避免地涉及到與 JavaScript 有關的問題。FullStack.Cafe 匯編了最常見的 JavaScript 面試問題和答案，希望能夠幫助讀者找到下一份夢想中的工作。

Q1：JavaScript 中的強制轉型（coercion）是指什么？

難度：0

在 JavaScript 中，兩種不同的內置類型間的轉換被稱為強制轉型。強制轉型在 JavaScript 中有兩種形式：顯式和隱式。

這是一個顯式強制轉型的例子：

var a = "42";
var b = Number( a );
a; // "42"
b; // 42 -- 是個數字!

這是一個隱式強制轉型的例子：

var a = "42";
var b = a * 1; // "42" 隱式轉型成 42 
a; // "42"
b; // 42 -- 是個數字!

Q2：JavaScript 中的作用域（scope）是指什么？

難度：?

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

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

Q3：解釋 JavaScript 中的相等性。

難度：?

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

• 嚴格比較（例如 ===）在不允許強制轉型的情況下檢查兩個值是否相等；
• 抽象比較（例如 ==）在允許強制轉型的情況下檢查兩個值是否相等。

var a = "42";
var b = 42;
a == b; // true
a === b; // false

一些簡單的規則：

• 如果被比較的任何一個值可能是 true 或 false，要用 ===，而不是 ==；
• 如果被比較的任何一個值是這些特定值（0、“”或 []），要用 ===，而不是 ==；
• 在其他情況下，可以安全地使用 ==。它不僅安全，而且在很多情況下，它可以簡化代碼，并且提升代碼可讀性。

Q4：解釋什么是回調函數，并提供一個簡單的例子。

難度：??

回調函數是可以作為參數傳遞給另一個函數的函數，并在某些操作完成后執行。下面是一個簡單的回調函數示例，這個函數在某些操作完成后打印消息到控制臺。

function modifyArray(arr, callback) {
 // 對 arr 做一些操作
 arr.push(100);
 // 執行傳進來的 callback 函數
 callback();
}
var arr = [1, 2, 3, 4, 5];
modifyArray(arr, function() {
 console.log("array has been modified", arr);
});

Q5：“use strict”的作用是什么？

難度：??

use strict 出現在 JavaScript 代碼的頂部或函數的頂部，可以幫助你寫出更安全的 JavaScript 代碼。如果你錯誤地創建了全局變量，它會通過拋出錯誤的方式來警告你。例如，以下程序將拋出錯誤：

function doSomething(val) {
 "use strict"; 
 x = val + 10;
}

它會拋出一個錯誤，因為 x 沒有被定義，并使用了全局作用域中的某個值對其進行賦值，而 use strict 不允許這樣做。下面的小改動修復了這個錯誤：

function doSomething(val) {
 "use strict"; 
 var x = val + 10;
}

Q6：解釋 JavaScript 中的 null 和 undefined。

難度：??

JavaScript 中有兩種底層類型：null 和 undefined。它們代表了不同的含義：

• 尚未初始化的東西：undefined；
• 目前不可用的東西：null。

Q7：編寫一個可以執行如下操作的函數。

難度：??

var addSix = createBase(6);
addSix(10); // 返回 16
addSix(21); // 返回 27

可以創建一個閉包來存放傳遞給函數 createBase 的值。被返回的內部函數是在外部函數中創建的，內部函數就成了一個閉包，它可以訪問外部函數中的變量，在本例中是變量 baseNumber。

function createBase(baseNumber) {
 return function(N) {
 // 我們在這里訪問 baseNumber，即使它是在這個函數之外聲明的。
 // JavaScript 中的閉包允許我們這么做。
 return baseNumber + N;
 }
}
var addSix = createBase(6);
addSix(10);
addSix(21);

Q8：解釋 JavaScript 中的值和類型。

難度：??

JavaScript 有類型值，但沒有類型變量。JavaScript 提供了以下幾種內置類型：

• string
• number
• boolean
• null 和 undefined
• object
• symbol (ES6 中新增的)

Q9：解釋事件冒泡以及如何阻止它？

難度：??

事件冒泡是指嵌套最深的元素觸發一個事件，然后這個事件順著嵌套順序在父元素上觸發。

防止事件冒泡的一種方法是使用 event.cancelBubble 或 event.stopPropagation()（低于 IE 9）。

Q10：JavaScript 中的 let 關鍵字有什么用？

難度：??

除了可以在函數級別聲明變量之外，ES6 還允許你使用 let 關鍵字在代碼塊（{..}）中聲明變量。

Q11：如何檢查一個數字是否為整數？

難度：??

檢查一個數字是小數還是整數，可以使用一種非常簡單的方法，就是將它對 1 進行取模，看看是否有余數。

function isInt(num) {
 return num % 1 === 0;
}
console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

Q12：什么是 IIFE（立即調用函數表達式）？

難度：???

它是立即調用函數表達式（Immediately-Invoked Function Expression），簡稱 IIFE。函數被創建后立即被執行：

(function IIFE(){
 console.log( "Hello!" );
})();
// "Hello!"

在避免污染全局命名空間時經常使用這種模式，因為 IIFE（與任何其他正常函數一樣）內部的所有變量在其作用域之外都是不可見的。

Q13：如何在 JavaScript 中比較兩個對象？

難度：???

對于兩個非原始值，比如兩個對象（包括函數和數組），== 和 === 比較都只是檢查它們的引用是否匹配，并不會檢查實際引用的內容。

例如，默認情況下，數組將被強制轉型成字符串，并使用逗號將數組的所有元素連接起來。所以，兩個具有相同內容的數組進行 == 比較時不會相等：

var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";
a == c; // true
b == c; // true
a == b; // false

對于對象的深度比較，可以使用 deep-equal 這個庫，或者自己實現遞歸比較算法。

Q14：你能解釋一下 ES5 和 ES6 之間的區別嗎？

難度：???

• ECMAScript 5（ES5）：ECMAScript 的第 5 版，于 2009 年標準化。這個標準已在所有現代瀏覽器中完全實現。
• ECMAScript 6（ES6）或 ECMAScript 2015（ES2015）：第 6 版 ECMAScript，于 2015 年標準化。這個標準已在大多數現代瀏覽器中部分實現。

以下是 ES5 和 ES6 之間的一些主要區別：

• 箭頭函數和字符串插值：

const greetings = (name) => {
 return `hello ${name}`;
}
const greetings = name => `hello ${name}`;

• 常量

常量在很多方面與其他語言中的常量一樣，但有一些需要注意的地方。常量表示對值的“固定引用”。因此，在使用常量時，你實際上可以改變變量所引用的對象的屬性，但無法改變引用本身。

const NAMES = [];
NAMES.push("Jim");
console.log(NAMES.length === 1); // true
NAMES = ["Steve", "John"]; // error

• 塊作用域變量。

新的 ES6 關鍵字 let 允許開發人員聲明塊級別作用域的變量。let 不像 var 那樣可以進行提升。

• 默認參數值

默認參數允許我們使用默認值初始化函數。如果省略或未定義參數，則使用默認值，也就是說 null 是有效值。

// 基本語法
function multiply (a, b = 2) {
 return a * b;
}
multiply(5); // 10

• 類定義和繼承

ES6 引入了對類（關鍵字 class）、構造函數（關鍵字 constructor）和用于繼承的 extend 關鍵字的支持。

• for…of 操作符

for…of 語句將創建一個遍歷可迭代對象的循環。

• 用于對象合并的 Spread 操作

const obj1 = { a: 1, b: 2 }
const obj2 = { a: 2, c: 3, d: 4}
const obj3 = {...obj1, ...obj2}

• promise

promise 提供了一種機制來處理異步操作結果。你可以使用回調來達到同樣的目的，但是 promise 通過方法鏈接和簡潔的錯誤處理帶來了更高的可讀性。

const isGreater = (a, b) => {
return new Promise ((resolve, reject) => {
 if(a > b) {
 resolve(true)
 } else {
 reject(false)
 }
 })
}
isGreater(1, 2)
.then(result => {
 console.log('greater')
})
.catch(result => {
 console.log('smaller')
})

• 模塊導出和導入

const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;
import myModule from './myModule';

問題 15：解釋 JavaScript 中“undefined”和“not defined”之間的區別。

難度：???

在 JavaScript 中，如果你試圖使用一個不存在且尚未聲明的變量，JavaScript 將拋出錯誤“var name is not defined”，讓后腳本將停止運行。但如果你使用 typeof undeclared_variable，它將返回 undefined。

在進一步討論之前，先讓我們理解聲明和定義之間的區別。

“var x”表示一個聲明，因為你沒有定義它的值是什么，你只是聲明它的存在。

var x; // 聲明 x
console.log(x); // 輸出: undefined

“var x = 1”既是聲明又是定義（我們也可以說它是初始化），x 變量的聲明和賦值相繼發生。在 JavaScript 中，每個變量聲明和函數聲明都被帶到了當前作用域的頂部，然后進行賦值，這個過程被稱為提升（hoisting）。

當我們試圖訪問一個被聲明但未被定義的變量時，會出現 undefined 錯誤。

var x; // 聲明
if(typeof x === 'undefined') // 將返回 true

當我們試圖引用一個既未聲明也未定義的變量時，將會出現 not defined 錯誤。

console.log(y); // 輸出: ReferenceError: y is not defined

Q16：匿名和命名函數有什么區別？

難度：???

var foo = function() { // 賦給變量 foo 的匿名函數
 // ..
};
var x = function bar(){ // 賦給變量 x 的命名函數 bar
 // ..
};
foo(); // 實際執行函數
x();

Q17：Javascript 中的“閉包”是什么？舉個例子？

難度：????

閉包是在另一個函數（稱為父函數）中定義的函數，并且可以訪問在父函數作用域中聲明和定義的變量。

閉包可以訪問三個作用域中的變量：

• 在自己作用域中聲明的變量；
• 在父函數中聲明的變量；
• 在全局作用域中聲明的變量。

var globalVar = "abc";
// 自調用函數
(function outerFunction (outerArg) { // outerFunction 作用域開始
 // 在 outerFunction 函數作用域中聲明的變量
 var outerFuncVar = 'x'; 
 // 閉包自調用函數
 (function innerFunction (innerArg) { // innerFunction 作用域開始
 // 在 innerFunction 函數作用域中聲明的變量
 var innerFuncVar = "y";
 console.log( 
 "outerArg = " + outerArg + "\n" +
 "outerFuncVar = " + outerFuncVar + "\n" +
 "innerArg = " + innerArg + "\n" +
 "innerFuncVar = " + innerFuncVar + "\n" +
 "globalVar = " + globalVar);
 // innerFunction 作用域結束
 })(5); // 將 5 作為參數
// outerFunction 作用域結束
})(7); // 將 7 作為參數

innerFunction 是在 outerFunction 中定義的閉包，可以訪問在 outerFunction 作用域內聲明和定義的所有變量。除此之外，閉包還可以訪問在全局命名空間中聲明的變量。

上述代碼的輸出將是：

outerArg = 7
outerFuncVar = x
innerArg = 5
innerFuncVar = y
globalVar = abc

Q18：如何在 JavaScript 中創建私有變量？

難度：????

要在 JavaScript 中創建無法被修改的私有變量，你需要將其創建為函數中的局部變量。即使這個函數被調用，也無法在函數之外訪問這個變量。例如：

function func() {
 var priv = "secret code";
}
console.log(priv); // throws error

要訪問這個變量，需要創建一個返回私有變量的輔助函數。

function func() {
 var priv = "secret code";
 return function() {
 return priv;
 }
}
var getPriv = func();
console.log(getPriv()); // => secret code

Q19：請解釋原型設計模式。

難度：????

原型模式可用于創建新對象，但它創建的不是非初始化的對象，而是使用原型對象（或樣本對象）的值進行初始化的對象。原型模式也稱為屬性模式。

原型模式在初始化業務對象時非常有用，業務對象的值與數據庫中的默認值相匹配。原型對象中的默認值被復制到新創建的業務對象中。

經典的編程語言很少使用原型模式，但作為原型語言的 JavaScript 在構造新對象及其原型時使用了這個模式。

Q20：判斷一個給定的字符串是否是同構的。

難度：????

如果兩個字符串是同構的，那么字符串 A 中所有出現的字符都可以用另一個字符替換，以便獲得字符串 B，而且必須保留字符的順序。字符串 A 中的每個字符必須與字符串 B 的每個字符一對一對應。

• paper 和 title 將返回 true。
• egg 和 sad 將返回 false。
• dgg 和 add 將返回 true。

isIsomorphic("egg", 'add'); // true
isIsomorphic("paper", 'title'); // true
isIsomorphic("kick", 'side'); // false
function isIsomorphic(firstString, secondString) {
 // 檢查長度是否相等，如果不相等, 它們不可能是同構的
 if (firstString.length !== secondString.length) return false
 var letterMap = {};
 for (var i = 0; i < firstString.length; i++) {
 var letterA = firstString[i],
 letterB = secondString[i];
 // 如果 letterA 不存在, 創建一個 map，并將 letterB 賦值給它
 if (letterMap[letterA] === undefined) {
 letterMap[letterA] = letterB;
 } else if (letterMap[letterA] !== letterB) {
 // 如果 letterA 在 map 中已存在, 但不是與 letterB 對應，
 // 那么這意味著 letterA 與多個字符相對應。
 return false;
 }
 }
 // 迭代完畢，如果滿足條件，那么返回 true。
 // 它們是同構的。
 return true;
}

Q21：“Transpiling”是什么意思？

難度：????

對于語言中新加入的語法，無法進行 polyfill。因此，更好的辦法是使用一種工具，可以將較新代碼轉換為較舊的等效代碼。這個過程通常稱為轉換（transpiling），就是 transforming + compiling 的意思。

通常，你會將轉換器（transpiler）加入到構建過程中，類似于 linter 或 minifier?，F在有很多很棒的轉換器可選擇：

• Babel：將 ES6+ 轉換為 ES5
• Traceur：將 ES6、ES7 轉換為 ES5

Q22：“this”關鍵字的原理是什么？請提供一些代碼示例。

難度：????

在 JavaScript 中，this 是指正在執行的函數的“所有者”，或者更確切地說，指將當前函數作為方法的對象。

function foo() {
 console.log( this.bar );
}
var bar = "global";
var obj1 = {
 bar: "obj1",
 foo: foo
};
var obj2 = {
 bar: "obj2"
};
foo(); // "global"
obj1.foo(); // "obj1"
foo.call( obj2 ); // "obj2"
new foo(); // undefined

Q23：如何向 Array 對象添加自定義方法，讓下面的代碼可以運行？

難度：????

var arr = [1, 2, 3, 4, 5];
var avg = arr.average();
console.log(avg);

JavaScript 不是基于類的，但它是基于原型的語言。這意味著每個對象都鏈接到另一個對象（也就是對象的原型），并繼承原型對象的方法。你可以跟蹤每個對象的原型鏈，直到到達沒有原型的 null 對象。我們需要通過修改 Array 原型來向全局 Array 對象添加方法。

Array.prototype.average = function() {
 // 計算 sum 的值
 var sum = this.reduce(function(prev, cur) { return prev + cur; });
 // 將 sum 除以元素個數并返回
 return sum / this.length;
}
var arr = [1, 2, 3, 4, 5];
var avg = arr.average();
console.log(avg); // => 3

Q24：什么是 JavaScript 中的提升操作？

難度：????

提升（hoisting）是 JavaScript 解釋器將所有變量和函數聲明移動到當前作用域頂部的操作。有兩種類型的提升：

• 變量提升——非常少見
• 函數提升——更常見

無論 var（或函數聲明）出現在作用域的什么地方，它都屬于整個作用域，并且可以在該作用域內的任何地方訪問它。

var a = 2;
foo(); // 因為`foo()`聲明被"提升"，所以可調用
function foo() {
 a = 3;
 console.log( a ); // 3
 var a; // 聲明被"提升"到 foo() 的頂部
}
console.log( a ); // 2

Q25：以下代碼輸出的結果是什么？

難度：????

0.1 + 0.2 === 0.3

這段代碼的輸出是 false，這是由浮點數內部表示導致的。0.1 + 0.2 并不剛好等于 0.3，實際結果是 0.30000000000000004。解決這個問題的一個辦法是在對小數進行算術運算時對結果進行舍入。

Q26：請描述一下 Revealing Module Pattern 設計模式。

難度：?????

暴露模塊模式（Revealing Module Pattern）是模塊模式的一個變體，目的是維護封裝性并暴露在對象中返回的某些變量和方法。如下所示：

var Exposer = (function() {
 var privateVariable = 10;
 var privateMethod = function() {
 console.log('Inside a private method!');
 privateVariable++;
 }
 var methodToExpose = function() {
 console.log('This is a method I want to expose!');
 }
 var otherMethodIWantToExpose = function() {
 privateMethod();
 }
 return {
 first: methodToExpose,
 second: otherMethodIWantToExpose
 };
})();
Exposer.first(); // 輸出: This is a method I want to expose!
Exposer.second(); // 輸出: Inside a private method!
Exposer.methodToExpose; // undefined

它的一個明顯的缺點是無法引用私有方法。

英文原文

https://www.fullstack.cafe/blog/top-26-javascript-interview-questions-and-answers-in-2019