在多年的程式設計生涯裡，我常常面臨著各種新的語言，新的工具。但是語言、工具最終也僅僅為工具，最終目的是分析問題，解決問題。雖然常年在一個領域，一種語言裡摸爬滾打，可能對語言本身的理解更為深刻，即使是有意識的去系統、全面的學習瞭解這種語言的，也可能只是當時對語言本身有些瞭解，時間一長也就遺忘了，最終沉澱下來的是解決問題的方法。所以我在公司面試時，基本上不會考慮太多對語言細節的考查，在參加其它公司面試時也反感這種筆試的東西，對於這類筆試，我直接無視，丟在一邊。如同我們曾經經歷過的高考、考研一樣，我們曾經是如此牛逼，數學、物理、化學無所不精，語文、政治、英語無所不能，到如今又記得什麼呢？！別怪我唯學校論，我基本只關心哪個學校畢業的，性格是否合拍。經歷過那麼多年的考試，在工作多年後，再給我來個資料結構、語法，真的是件很無趣的事情。

但是世間的事真就如此無趣，如果你逃不掉這些，那你還是從了吧。在你準備跳槽之前，面試題如同你從小到大的各類考試一樣，應付考試是最有效的。所以，如果你看見誰在拿著演算法、資料結構、語言的的書看，那基本上是他要跳槽了，你準備找人替代他的工作吧。

面試題也並非一無是處，雖說是看了忘，跳槽再看的東西，但依然是把所涉語言、工具的特點挑出來最簡單粗暴的東西，讓你抓住重點。看了一下上面的25道基本面試題是JavaScript推薦度最高的，也有很多譯文，但我為什麼再來一次，因為我只譯給自己看的，別人的與我何干，另外，拒絕裝逼，儘量尊重原文，原文辛苦寫了那麼多，大多譯文只是三兩句裝逼的話實在對不起原作者。

1.用typeof bar===

”object”判斷bar是否是一個object的潛在缺陷是什麼？怎樣才能避免這種缺陷？

答：儘管用typeof bar===”object”是一個判斷bar是一個object的可靠方法，但是令人驚訝的是，在JavaScript中null也是一個object!

因此，以下的程式碼會讓很多開發者驚訝，log顯示true，而不是false.

var bar = null;

console.log(typeof bar === "object");  // logs true!

只要你意識到這些，這個問題就能通過判斷bar是否為null輕鬆避免：

console.log((bar !== null) && (typeof bar === "object"));  // logs false

為了使我們的答案更加完全、徹底的解決這個問題，還有兩件事需要說明：

首先：上面的解決方案裡，如果bar是一個function，也會返回false,通常情況下，這是我們期望的，但是在某些情況下，我們希望當bar是function時，也返回true,你就需要修改上面的解決方案如下：

console.log((bar !== null) && ((typeof bar === "object") || (typeof bar === "function")));

其次：如果bar是一個array(var bar=[])，也會返回true,大多情況下，這是我們想要的結果，因為arrays的確是objects。但是如果當bar為arrays，你想返回false，你就需要修改上面的解決方案如下：

console.log((bar !== null) && (typeof bar === "object") && (toString.call(bar) !== "[object Array]"));

或者用jQuery如下：

console.log((bar !== null) && (typeof bar === "object") && (! $.isArray(bar)));

2.下面的程式碼將輸出什麼？並說明原因

(function(){

  var a = b = 3;

})();

console.log("a defined? " + (typeof a !== 'undefined'));

console.log("b defined? " + (typeof b !== 'undefined'));

答：既然a和b在一個function的程式碼塊裡定義，並且既然在同一行以var開始，很多JavaScript開發者認為typeof a和typeof b都將是undefined.然而，事實卻並非如此，大多數開發者的問題是錯誤的理解了var a=b=3;這段程式碼，以為是下面程式碼的縮寫:

Var b=3;

Var a=b;

但是事實上，var a=b=3; 實際縮寫是以下程式碼：

b=3;

Var a=b;

如果你沒有采用strict模式,輸出結果如下：

a defined? false

b defined? True

但是b在function的內部，怎麼在外部是defined呢? 好吧，既然var a=b=3;是b=3和var a=b;的縮寫，b最終是作為全域性變數的，因為b沒有用var定義，因此作用域在function外部。

需要注意的是，在strict 模式（如使用use strict），var a=b=3;將會產生一個執行時error：ReferenceError: b is not defined。因此可以避免這類的錯誤。（因此，這也使為什麼要在你的程式碼應採用use strict模式）。

3.以下程式碼的輸出是什麼？並說明原因。

var myObject = {

    foo: "bar",

    func: function() {

        var self = this;

        console.log("outer func:  this.foo = " + this.foo);

        console.log("outer func:  self.foo = " + self.foo);

        (function() {

            console.log("inner func:  this.foo = " + this.foo);

            console.log("inner func:  self.foo = " + self.foo);

        }());

    }

};

myObject.func();

答：上面的程式碼輸出如下：

outer func:  this.foo = bar

outer func:  self.foo = bar

inner func:  this.foo = undefined

inner func:  self.foo = bar

在outer function裡，this和self都指向myObject, 因此都能訪問到foo,

在inner function裡，this不再指向myObject,因此，this.foo在inner function裡面是undefined,然而，self依然指向myObject，（在ECMA5之前，this在內部function裡將指向window，然而，在ECMA5之後，內部function的this將是undefined).

4.將一個JavaScript檔案封裝在一個function塊裡的意義，原因是什麼？

答：在很多流行的JavaScript庫（jQuery,Node.js等）將原始碼檔案封裝在一個函式中越來越普遍。這種技術會為這個原始碼檔案建立一個封閉的環境，可能最重要的是建立了一個私有的名稱空間，因此避免了在不同的JavaScript modules和庫中出現潛在的命名衝突。

這種技術的另一個特點是允許通過別名的方式很容易的引用全域性變數。這個經常用到，比如，在jQuery外掛中，jQurey 允許你通過jQuery.noConflict(),使得不能通過$引用jQuery名稱空間。如果你這麼做了，你依然可以像下面程式碼一樣使用$採用這種閉包的技術：

(function($) { /* jQuery plugin code referencing $ */ } )(jQuery);

5.在JavaScript原始碼檔案中以’use strict’開始的意義和好處是什麼？

答：採用strict模式的主要好處如下：

a.使得debugging更容易：在一些被忽略或者潛在的錯誤會產生error或者exceptions，會很快的在你的程式碼中顯示警告，引導你很快的找到對應的原始碼。

b.阻止出現意外的全域性變數：如果不是在strict模式裡，那麼賦值給一個沒有宣告的變數時，會自動的建立一個同名的全域性變數，這是JavaScript中最常見的錯誤之一。在strict模式裡，會嘗試丟擲一個error.

c.強制排除this錯誤：在非strict模式裡，this引用為null或者undefined時，會自動強制指向全域性，這會導致各種錯誤的引用。在strict模式裡，this值為null或者undefined將會丟擲error.

d.不允許重名的屬性名或者引數名.在strict模式裡，如果定義瞭如：var object={foo:’bar’,foo:’baz’};或者定義一個重名引數的函式，如:function foo(val1,val2,val1){}.會產生一個error,而這個bug幾乎一定會產生，但你可能浪費大量的時間才能找到。

e.使eval()更加安全。在strict模式和非strict模式裡，eval()存在很多不同。在strict模式裡，變數和函式在eval()中宣告，但語句不在內部塊建立，但是在非strict模式裡，語句也會在內部塊裡建立，這也是常見的原始碼問題。

f.不正確使用delete會丟擲error:delete操作（用於從object中刪除一個屬性）不能用於沒有配置的屬性，在非strict模式的程式碼裡刪除一個沒有配置的屬性會失敗，但不會有提示，在strict模式裡，則會丟擲error。

6.考慮一下下面的兩個函式，他們將返回同樣的值嗎？請說明原因

function foo1()

{

  return {

      bar: "hello"

  };

}

function foo2()

{

  return

  {

      bar: "hello"

  };

}

答：很奇怪的是，兩個函式返回的值並不一樣，如果執行以下語句：

console.log("foo1 returns:");

console.log(foo1());

console.log("foo2 returns:");

console.log(foo2());

將得到下面的結果：

foo1 returns:

Object {bar: "hello"}

foo2 returns:

undefined

不僅僅只是對返回不一樣的結果奇怪，也要對foo2()沒有丟擲error特別注意。產生這個結果的原因是分號在JavaScript中的用法（省略分號不是好的做法）。當foo2()的一行語句中只包含return時，會在return語句後面自動的加上一個分號。後面的語句也是合法的，不會丟擲error，儘管它不會呼叫，也不做任何事（僅僅只是一個沒有用到的語句塊，它定義了一個等同於’hello’字串的屬性bar而已）。

這也說明了在Javascript中大括號的位置應該放在語句後面的程式設計風格更符合Javascript的語法要求（有些語言推薦放在新一行的開頭）。

7.NaN是什麼？它是什麼型別？怎樣能夠可靠的判斷一個值是否等於Nan?

答：NaN表示一個值不少number，一般指一個操作中有一個非number的值，或者操作的結果是非number的值（例如被0除）。這看起來很清楚明瞭，然而對於Nan，如果不瞭解的話，會有兩個很奇怪的特性，會讓人頭疼。

一個是儘管NaN的意思是不是number,但NaN的型別是number,如下：

console.log(typeof NaN === "number");  // logs "true"

另外一個是NaN更任何東西比較（即使是自身），結果都為false,如下：

console.log(NaN === NaN);  // logs "false"。

用isNaN()判斷一個number是否等於NaN是不可靠的，更好的解決方案使用value!==value，這個只有當value等於NaN時才會為true.在ES6中可以用Number.isNaN()來判斷，比使用老的全域性函式isNaN()更可靠。

8.下面的程式碼輸出結果是什麼？並解釋原因

console.log(0.1 + 0.2);

console.log(0.1 + 0.2 == 0.3);

答：這個問題也可以解釋為：你可能很有信心，它將列印0.3和true，然而可能是錯的，在JavaScript中數字採用浮點計數，因此，常常並不是期望的值。上面的例子將列印以下結果

0.30000000000000004

False

9.討論一下怎樣寫一個函式isInteger(x)，判斷x是一個整數。

答：這聽起來並不重要，事實上，在ES6中有一個新的函式Number.isInteger()能準確的實現這個目的，然而，在ES6之前，就比較複雜，沒有如Number.isInteger()的方法。

這個問題主要是因為，在ECMAScript中,整形只是概念上的，數字都是採用浮點計數。出於這個考慮，在ES6中的解決方式採用的是最簡單的方式function isInteger(x) { return (x^0) === x; } 。

下面的方案也可以，儘管沒有上面的優雅。

function isInteger(x) { return Math.round(x) === x; }

用Math.ceil()或者Math.floor()代替Math.round()也可以。

還可以選擇：

function isInteger(x) { return (typeof x === 'number') && (x % 1 === 0); }

通常採用下面的方案是不正確的。

function isInteger(x) { return parseInt(x, 10) === x; }

這主要是因為parseInt是基於能正確轉化x，一旦x太大，它會轉換失敗，parseInt會在轉化成數字是先強制轉換為字串，因此，一旦一個數字太大，它轉化的字串是原數字的指數形式（1e+21），因此，parseInt()將會解析1e+21,但是當遇到e是會停止解析了。如下：

> String(1000000000000000000000)

'1e+21'

> parseInt(1000000000000000000000, 10)

1

> parseInt(1000000000000000000000, 10) === 1000000000000000000000

False

10.下面數字1-4的列印順序是什麼？並解釋原因。

(function() {

    console.log(1);

    setTimeout(function(){console.log(2)}, 1000);

    setTimeout(function(){console.log(3)}, 0);

    console.log(4);

})();

答：上面的結果應該是：

1

4

3

2

讓我們預測一下每一部分的程式碼：

A.1和4將在呼叫console.log()後，直接打印出來。

B.2在3之後列印，因為3沒有時間延遲，2在3列印後延遲了1000毫秒在列印。

但是3延遲時間為0，難道不意味著立即列印嗎，並且，如果這樣，3應該在4之前列印，應為列印4的程式碼在後面執行的。這個問題的答案需要好好理解JavaScript的events和timing.

瀏覽器有一個事件佇列，用來檢查處理和等待事件。例如：當一個事件在後臺觸發了（例如onload），然而現在瀏覽器很忙（在處理onclick），這個事件會放入事件佇列中，當onclick控制代碼完成後，會檢查事件佇列，執行事件(onload)。

類似，如果瀏覽器忙則setTimeout()會將執行的函式放入事件佇列中。當setTimeout()設定時間為0，它的意思是“儘可能快”的指向相應的函式。執行的函式會放入事件佇列中，在下一個時間片執行。需要指出的是，這並不是要立即執行。函式一直會等到下一個時間片。這也就是上面結果的原因。Console.log(4)會在console.log(3)之前執行。

11.寫一個函式，判斷一個字串（超過80個字元）是否是迴文結構（正序和逆序想同）。

答：下面的函式，如果str是迴文則返回true，否則返回false.

function isPalindrome(str) {

    str = str.replace(/\W/g, '').toLowerCase();

    return (str == str.split('').reverse().join(''));

}

例如：

console.log(isPalindrome("level"));                   // logs 'true'

console.log(isPalindrome("levels"));                  // logs 'false'

console.log(isPalindrome("A car, a man, a maraca"));  // logs 'true'

12.寫一個sum函式使以下兩種呼叫方式都正確。

console.log(sum(2,3));   // Outputs 5

console.log(sum(2)(3));  // Outputs 5

答：至少有兩種方式實現：

方法1

function sum(x) {

  if (arguments.length == 2) {

    return arguments[0] + arguments[1];

  } else {

    return function(y) { return x + y; };

  }

}

在JavaScript中，函式可以通過arguments物件訪問傳入的給函式的引數。我們能通過在執行時訪問length屬性的值得到引數的個數。如果是兩個引數，我們直接相加並返回，否則，我們假定呼叫的是sum(2)(3),因此我們返回一個匿名函式，通過sum()相加（引數2），並且把引數傳給匿名函式（引數3）。

方法2：

function sum(x, y) {

  if (y !== undefined) {

    return x + y;

  } else {

    return function(y) { return x + y; };

  }

}

在JavaScript中，一個函式被呼叫，是不需要輸入引數完全匹配函式的引數定義的。如果輸入引數超過函式定義的引數，則超過的引數會被忽略，另一方面，如果輸入的引數少於函式定義的引數，則缺少的引數將會賦予undefined.因此，上面的例子中，通過判斷第二個引數是否為undefined，我們可以決定採用哪種函式呼叫和執行方式。

13.考慮一下以下的程式碼片段

for (var i = 0; i < 5; i++) {

  var btn = document.createElement('button');

  btn.appendChild(document.createTextNode('Button ' + i));

  btn.addEventListener('click', function(){ console.log(i); });

  document.body.appendChild(btn);

}

（a)當用戶點選“Button4”的時候會列印什麼？並解釋為什麼？

（b)提供一個或多個正確的實現方式。

答：（a)無論點選哪個按鈕，都將列印5.因為任何按鈕在呼叫onclick方法時，for迴圈已經完成了，變數i的值變成了5.

(b).關鍵是要抓住在每一次迴圈for的時候要把i的值傳人到最近建立的函式物件中，下面有三個可能的方式解決這個問題：

for (var i = 0; i < 5; i++) {

  var btn = document.createElement('button');

  btn.appendChild(document.createTextNode('Button ' + i));

  btn.addEventListener('click', (function(i) {

    return function() { console.log(i); };

  })(i));

  document.body.appendChild(btn);

}

二種：你可以將整個btn.addEventListener封裝在一個新的匿名函式裡。

for (var i = 0; i < 5; i++) {

  var btn = document.createElement('button');

  btn.appendChild(document.createTextNode('Button ' + i));

  (function (i) {

    btn.addEventListener('click', function() { console.log(i); });

  })(i);

  document.body.appendChild(btn);

}

三種：可以將for迴圈換成array物件的本地呼叫方法forEach.

['a', 'b', 'c', 'd', 'e'].forEach(function (value, i) {

  var btn = document.createElement('button');

  btn.appendChild(document.createTextNode('Button ' + i));

  btn.addEventListener('click', function() { console.log(i); });

  document.body.appendChild(btn);

});

14.下面的程式碼將輸出什麼，並解釋原因？

var arr1 = "john".split('');

var arr2 = arr1.reverse();

var arr3 = "jones".split('');

arr2.push(arr3);

console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));

console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

答：輸出結果如下：

"array 1: length=5 last=j,o,n,e,s"

"array 2: length=5 last=j,o,n,e,s"

Arr1和arr2輸出結果一樣的原因如下:

A.呼叫array物件的reverse()方法不僅僅返回轉置後的陣列，它自身的順序也轉置了。

B.Reverse()方法返回的是指向array自身的一個引用，因此，arr2僅僅是arr1的一個引用，無論對arr2怎麼操作，arr1也會受到影響，arr1,arr2都指向同一個物件。

C.通過呼叫array的push()方法，傳人另一個array，僅僅只是把傳人的array作為一個元素新增到佇列的尾部，因此,arr2.push(arr3)是將arr3當作一個元素新增到arr2的隊尾，而不是像concat()方法一樣，合併兩個array。

D.與Python類似，JavaScript通過輸入-1呼叫slice()是一種指向array佇列尾部最後一個元素的方法。

15.下面程式碼的輸出是什麼，並解釋為什麼？

console.log(1 +  "2" + "2");

console.log(1 +  +"2" + "2");

console.log(1 +  -"1" + "2");

console.log(+"1" +  "1" + "2");

console.log( "A" - "B" + "2");

console.log( "A" - "B" + 2);

答：上面程式碼的顯示的結果是：

"122"

"32"

"02"

"112"

"NaN2"

NaN

主要的問題是JavaScript是一種弱型別的語言，它會在操作執行時自動轉化數值型別。

例1：1+”2”+”2”輸出結果為”122”.第一個操作是1+”2”,因為有個運算元是”2”，是字串，JavaScript會在執行操作過程中轉化成字串的合併，1轉化成”1”，1+”2”得到結果為“12”，然後，“12”+“2”，結果為“122”。

例2：1+ +”2”+”2”輸出結果為“32”。第一個操作是+”2”，這被看成是一元操作，因此，JavaScript會把”2”的型別轉為數字，再賦予+，則為正整數2，然後執行1+2得3，但是當我們執行一個數字和字串的操作3+”2”時，又將轉化成字串連線操作，得到字串“32”。

例3：1+ -“1” + “2”輸出為“02”。這裡首先定義操作優先順序，一元操作-高於+，因此”1”轉為1，賦予-，轉為-1，加上1得結果0，然後與最後的“2”轉字串連線，結果為“02”。

例4：+“1” + “1” +“2”，輸出結果為112.首先執行+一元操作得1，然後與後面的“1”，“2”執行字串連線操作，得結果“112”。

例5：“a”-”b” +”2”輸出結果為“NaN2”。因為字串不存在-操作，因此會將A,B轉化成數字，轉化失敗，得到結果“NaN”，再與“2”做字串連線操作，得到結果“NaN2”.

例6：”a”-”b”+2,輸出結果為NaN，因為字串不存在-操作，因此會將A,B轉化成數字，轉化失敗，得到結果“NaN”，再與2執行加操作，但是NaN與任何數字操作結果還是NaN。

16.下面的程式碼，如果佇列太長會導致棧溢位，怎樣解決這個問題並且依然保持迴圈部分。

var list = readHugeList();

var nextListItem = function() {

    var item = list.pop();

    if (item) {

        // process the list item...

        nextListItem();

    }

};

答：為了避免棧溢位，迴圈部分改為如下程式碼：

var list = readHugeList();

var nextListItem = function() {

    var item = list.pop();

    if (item) {

        // process the list item...

        setTimeout( nextListItem, 0);

    }

};

棧溢位主要是因為迴圈事件，而不是棧。當執行nextListItem時，如果item不是null,在timeout函式中的nextListItem會推入到事件佇列中。當事件空閒，則會執行nextListItem,因此，這種方法從開始到結束沒有直接進行迴圈呼叫，可以不用考慮迴圈次數。

17.什麼是閉包？並舉例。

答：閉包是一個內部函式訪問外部定義的變數，閉包有三種訪問變數的方式。1）在自身域的變數。2）閉包函式域的變數。3）全域性變數。

例子：

var globalVar = "xyz";

(function outerFunc(outerArg) {

  var outerVar = 'a';

  (function innerFunc(innerArg) {

    var innerVar = 'b';

    console.log(

      "outerArg = " + outerArg + "\n" +

      "innerArg = " + innerArg + "\n" +

      "outerVar = " + outerVar + "\n" +

      "innerVar = " + innerVar + "\n" +

      "globalVar = " + globalVar);

  })(456);

})(123);

上面例子中，在innerFunc中訪問的變數分別在innerFunc,outFunc和全域性名稱空間裡。輸出結果如下：

outerArg = 123

innerArg = 456

outerVar = a

innerVar = b

globalVar = xyz

18.下面程式碼的輸出結果是什麼？並解釋原因

for (var i = 0; i < 5; i++) {

  setTimeout(function() { console.log(i); }, i * 1000 );

}

答：例子顯示的結果不是預想的0，1，2，3和4.而是5，5，5，5和5.原因是每個執行的函式在迴圈完全執行完成後，i最後的賦值是5.閉包的方式可以解決這個問題，在每個迴圈中為次的迴圈變數建立一個唯一域，如下：

for (var i = 0; i < 5; i++) {

(function(x) {

     setTimeout(function() { console.log(x); }, x * 1000 );

    })(i);

}

則結果將會是0，1，2，3，4.

19.下面程式碼的輸出結果是什麼？並解釋原因。

console.log("0 || 1 = "+(0 || 1));

console.log("1 || 2 = "+(1 || 2));

console.log("0 && 1 = "+(0 && 1));

console.log("1 && 2 = "+(1 && 2));

答：程式碼段的輸出結果如下：

0 || 1 = 1

1 || 2 = 1

0 && 1 = 0

1 && 2 = 2

在JavaScript中，||和&&是邏輯操作，將從左往右進行邏輯判斷。||操作符的表示式是X|Y，X先進行評估，判斷一個boolean邏輯值，如果為true，則值為X。如果為false，則值為Y。&&操作恰恰相反。

20.下面程式碼的執行結果是什麼？並解釋原因

console.log(false == '0')

console.log(false === '0')

答：程式碼的執行結果為：true  false;

在JavaScript中，有兩個等於操作，其中三等號===更像傳統的等於操作，如果表達是兩邊的型別和值都相等才為true，雙等號==會在比較相等時進行強制的值比較，因此更好的程式設計風格是採用===，同樣的應採用!==，而不是!=。

21.下面程式碼的輸出結果是什麼？並解釋原因。

var a={},

    b={key:'b'},

    c={key:'c'};

a[b]=123;

a[c]=456;

console.log(a[b]);

答：輸出的結果應該是456，而不是123.

原因是，當我們設定一個object屬性時，JavaScript會隱形的將引數值字串化。在這個例子中，b和c都是objects，他們會轉化為”[object,object]”，結果a[b]和a[c]都等於a[”[object,object]”],因此，設定或者引用a[c]等同於設定和引用a[b].

22.給出以下程式碼的輸出結果，並解釋原因？

console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10));

答：程式碼塊的輸出結果是10facorial值，也就是(10！或者 3628800）,f()會迴圈呼叫自身，直到呼叫f(1),返回1，因此，以下是執行過程。

f(1): returns n, which is 1

f(2): returns 2 * f(1), which is 2

f(3): returns 3 * f(2), which is 6

f(4): returns 4 * f(3), which is 24

f(5): returns 5 * f(4), which is 120

f(6): returns 6 * f(5), which is 720

f(7): returns 7 * f(6), which is 5040

f(8): returns 8 * f(7), which is 40320

f(9): returns 9 * f(8), which is 362880

f(10): returns 10 * f(9), which is 3628800

23.下面程式碼塊的輸出是什麼？並解釋原因。

(function(x) {

    return (function(y) {

        console.log(x);

    })(2)

})(1);

答：輸出結果是1，儘管x

相關推薦