WEB前端面試選擇題解答（共36題）

第1題

["1", "2", "3"].map(parseInt)

A：["1", "2", "3"]

B：[1, 2, 3]

C：[0, 1, 2]

D：other

解釋：該題目的答案爲：[1, NaN, NaN]；即選擇D。該題用到了map與parseInt；parseInt() 函數的語法是parseInt(string, radix)；
string 必需。要被解析的字符串。
radix可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。
若是省略該參數或其值爲 0，則數字將以 10 爲基礎來解析。若是它以 「0x」 或 「0X」 開頭，將以 16 爲基數。
若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。

實際上 map裏面的callback函數接受的是三個參數 分別爲元素 下標和數組 (雖然不少狀況只使用第一個參數)

回調函數的語法以下所示：
function callbackfn(value, index, array1)
可以使用最多三個參數來聲明回調函數。

例：
var a=["1", "2", "3", "4","5",6,7,8,9,10,11,12,13,14,15];
a.map(parseInt);
返回結果爲：[1, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 9, 11, 13, 15, 17, 19]

第2題

[typeof null, null instanceof Object]

A: ["object", false]

B: [null, false]

C: ["object", true]

D: other

解釋：

考察typeof運算符和instanceof運算符，上MDN上看一下typeof運算符，一些基礎類型的結果爲：

Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Any other object "object"
Array "object"

null instanceof 任何類型 都是false，因此選A。

第3題

[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow)]

A: an error

B: [9, 0]

C: [9, NaN]

D: [9, undefined]

解答：這題考的Math.pow和Array.prototype.reduce

Math.pow(base, exponent)接受兩個參數：基數、須要計算的次方

reduce傳遞給其做爲參數的函數幾個值：

• previousValue：上一次計算的結果
• currentValue：當前元素的值
• index： 當前元素在數組中的位置
• array：整個數組

reduce自己接受兩個參數，callback和initialValue，分別是reduce的回調函數和計算初始值--也就是第一次reduce的callback被調用時的previousValue的值，默認爲0

reduce在數組爲空且沒有定義initialValue時，會拋出錯誤，在火狐下報錯爲：TypeError: reduce of empty array with no initial value
因此選A

第4題

var val = 'smtg';
console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');

A: Value is Something

B: Value is Nothing

C: NaN

D: other

解答：這題考的javascript中的運算符優先級，這裏'+'運算符的優先級要高於'?'因此運算符，其實是 'Value is true'?'Something' : 'Nothing'，當字符串不爲空時，轉換爲bool爲true，因此結果爲'Something'，選D

第5題

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

A: Goodbye Jack

B: Hello Jack

C: Hello undefined

D: Hello World

這題考的是javascript做用域中的變量提高，javascript的做用於中使用var定義的變量都會被提高到全部代碼的最前面，因而乎這段代碼就成了：

var name = 'World!';
(function () {
    var name;//如今仍是undefined
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

這樣就很好理解了，typeof name === 'undefined'的結果爲true，因此最後會輸出'Goodbye Jack'，選A

第6題

var END = Math.pow(2, 53);
var START = END - 100;
var count = 0;
for (var i = START; i <= END; i++) {
    count++;
}
console.log(count);

A: 0

B: 100

C: 101

D: other

解答：這題考查javascript中的數字的概念：首先明確一點，javascript和其餘語言不一樣，僅有一種數字，IEEE 754標準的64位浮點數，可以表示的整數範圍是-2^53~2^53（包含邊界值），因此Math.pow(2, 53)即爲javascript中所能表示的最大整數，在最大整數在繼續增大就會出現精度丟失的狀況，END + 1 的值實際上是等於END的，這也就形成了死循環。

第7題

var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;});

A: [undefined × 7]

B: [0, 1, 2, 10]

C: []

D: [undefined]

解答：選擇C Array.prototype.filter is not invoked for the missing elements（缺乏的元素，不會調用過濾器）。

第8題

var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
[two - one == one, eight - six == two]

A: [true, true]

B: [false, false]

C: [true, false]

D: other

解答：浮點數計算時的精度丟失問題。.chrome中計算出來的結果：[0.1, 0.20000000000000007]，也就是[true, false]，最終答案選C。

第9題

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

A: Case A

B: Case B

C: Do not know!

D: undefined

解答：此題考察的是關於new string（）；其實就是new一個實例對象。要匹配的也是object；因此答案是Do not know!，選擇C。

第10題

function showCase2(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(String('A'));

A: Case A

B: Case B

C: Do not know!

D: undefined

和上題原理同樣，不過這裏沒有使用new來生成字符串，因此生成的結果就是原始字符串，至關於showCase('A')，因此結果就是A

第11題

function isOdd(num) {
    return num % 2 == 1;
}
function isEven(num) {
    return num % 2 == 0;
}
function isSane(num) {
    return isEven(num) || isOdd(num);
}
var values = [7, 4, '13', -9, Infinity];
values.map(isSane);

A: [true, true, true, true, true]

B: [true, true, true, true, false]

C: [true, true, true, false, false]

D: [true, true, false, false, false]

仍是JS的數字相關，不過此次考察的是取模，這題我也是瞎蒙的（果斷跪了）。

前兩個基本上沒什麼疑問，必然是true

'13'在進行計算前則會進行隱式類型轉換（JS最噁心的部分之一），詳細參見$雨$的文章《Javascript類型轉換的規則》，這裏的規則就是將字符串經過Number()方法轉換爲數字，因此結果爲13 % 2 ，也就是true

而JS中負數取模的結果是負數，這裏-9%2的結果其實是-1，因此爲false

而Infinity對任意數取模都是NaN，因此是false

綜上，結果爲[true, true, true, false, false]，也就是C

第12題

parseInt(3, 8)
parseInt(3, 2)
parseInt(3, 0)

A: 3, 3, 3

B: 3, 3, NaN

C: 3, NaN, NaN

D: other

仍是parseInt的題，考的和第一題相似，第一個值爲3沒什麼好說的。若是出現的數字不符合後面輸入的進制，則爲NaN，因此第二個值爲NaN。而radix爲0時的狀況第一題下面有介紹，這裏也是同樣爲默認10，因此結果爲3，因此答案爲3, NaN, 3，選D

第13題

Array.isArray( Array.prototype )

A: true

B: false

C: error

D: other

死知識，MDN傳送門，這是MDN官方給的例子...選A

第14題

var a = [0];
if ([0]) { 
  console.log(a == true);
} else { 
  console.log("wut");
}

A: true

B: false

C: "wut"

D: other

一樣是一道隱式類型轉換的題，不過此次考慮的是'=='運算符，a自己是一個長度爲1的數組，而當數組不爲空時，其轉換成bool值爲true。

而==左右的轉換，會使用若是一個操做值爲布爾值，則在比較以前先將其轉換爲數值的規則來轉換，Number([0])，也就是0，因而變成了0 == true，結果天然是false，因此最終結果爲B

第15題

[] == []

A: true

B: false

C: error

D: other

這題考的是數組字面量建立數組的原理和==運算符，首先JS中數組的真實類型是Object這點很明顯typeof []的值爲"object"，而==運算符當左右都是對象時，則會比較其是否指向同一個對象。而每次調用字面量建立，都會創造新的對象，也就是會開闢新的內存區域。因此指針的值天然不同，結果爲 false，選B

第16題

'5' + 3  
'5' - 3

A: 53, 2

B: 8, 2

C: error

D: other

又是一道隱式類型轉換的題

加法： 加法運算中，若是有一個操做值爲字符串類型，則將另外一個操做值轉換爲字符串，最後鏈接起來

減法： 若是操做值之一不是數值，則被隱式調用Number()函數進行轉換

因此第一行結果爲字符串運算，爲'53'。第二行結果爲2，選A

第17題

1 + - + + + - + 1

A: 2

B: 1

C: error

D: other

C語言中的經典...對於這種問題，原理什麼的不懂，蒙吧，結果是2。選A

第18題

var ary = Array(3);
ary[0]=2
ary.map(function(elem) { return '1'; });

A: [2, 1, 1]

B: ["1", "1", "1"]

C: [2, "1", "1"]

D: other

又是考的Array.prototype.map的用法，map在使用的時候，只有數組中被初始化過元素纔會被觸發，其餘都是undefined，因此結果爲["1", undefined × 2]，選D

第19題

function sidEffecting(ary) { 
  ary[0] = ary[2];
}
function bar(a,b,c) { 
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1)

A: 3

B: 12

C: error

D: other

這題考的是JS的函數arguments的概念：

在調用函數時，函數內部的arguments維護着傳遞到這個函數的參數列表。它看起來是一個數組，但實際上它只是一個有length屬性的Object，不從Array.prototype繼承。因此沒法使用一些Array.prototype的方法。

arguments對象其內部屬性以及函數形參建立getter和setter方法，所以改變形參的值會影響到arguments對象的值，反過來也是同樣

具體例子能夠參見Javascript祕密花園#arguments

因此，這裏全部的更改都將生效，a和c的值都爲10，a+b+c的值將爲21，選D

第20題

var a = 111111111111111110000,
    b = 1111;
a + b;

A: 111111111111111111111

B: 111111111111111110000

C: NaN

D: Infinity

又是一道考查JavaScript數字的題，與第七題考察點類似。因爲JavaScript實際上只有一種數字形式IEEE 754標準的64位雙精度浮點數，其所能表示的整數範圍爲-2^53~2^53(包括邊界值)。這裏的111111111111111110000已經超過了2^53次方，因此會發生精度丟失的狀況。綜上選B

第21題

var x = [].reverse;
x();

A: []

B: undefined

C: error

D: window

這題考查的是函數調用時的this和Array.prototype.reverse方法。
首先看Array.prototype.reverse方法，首先舉幾個栗子：

console.log(Array.prototype.reverse.call("skyinlayer"));
//skyinlayer
console.log(Array.prototype.reverse.call({}));
//Object {}
console.log(Array.prototype.reverse.call(123));
//123

這幾個栗子能夠得出一個結論，Array.prototype.reverse方法的返回值，就是this

Javascript中this有以下幾種狀況：

全局下this，指向window對象

console.log(this);
//輸出結果：
//Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

函數調用，this指向全局window對象：

function somefun(){
    console.log(this);
}
somefun();
//輸出結果：
//Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

方法調用，this指向擁有該方法的對象：

var someobj = {};
someobj.fun = function(){
    console.log(this);
};
console.log(someobj.fun());
//輸出結果：
//Object {fun: function}

調用構造函數，構造函數內部的this指向新建立對象：

function Con() {
    console.log(this);
}
Con.prototype.somefun = function(){};
console.log(new Con());
//輸出結果：
//Con {somefun: function}

顯示肯定this：

function somefun(){
    console.log(this);
};
somefun.apply("skyinlayer");
somefun.call("skyinlayer");
//輸出結果：
//String {0: "s", 1: "k", 2: "y", 3: "i", 4: "n", 5: "l", 6: "a", 7: "y", 8: "e", 9: "r", length: 10}
//String {0: "s", 1: "k", 2: "y", 3: "i", 4: "n", 5: "l", 6: "a", 7: "y", 8: "e", 9: "r", length: 10}

這裏報錯：Uncaught TypeError: Array.prototype.reverse called on null or undefined，選C。

第22題

Number.MIN_VALUE > 0

A: false

B: true

C: error

D: other

考查的Number.MIN_VALUE的概念，MDN傳送門，關鍵的幾句話

• The Number.MIN_VALUE property represents the smallest positive numeric value representable in JavaScript.

翻譯：Number.MIN_VALUE表示的是JavaScript中最小的正數

• The MIN_VALUE property is the number closest to 0, not the most negative number, that JavaScript can represent.

翻譯：MIN_VALUE是接近0的數，而不是最小的數

• MIN_VALUE has a value of approximately 5e-324. Values smaller than MIN_VALUE ("underflow values") are converted to 0.

翻譯：MIN_VALUE值約等於5e-324，比起更小的值（大於0），將被轉換爲0

因此，這裏是true，選B

順帶把Number的幾個常量拉出來：

• • Number.MAX_VALUE：最大的正數
• • Number.MIN_VALUE：最小的正數
• • Number.NaN：特殊值，用來表示這不是一個數
• • Number.NEGATIVE_INFINITY：負無窮大
• • Number.POSITIVE_INFINITY：正無窮大

若是要表示最小的負數和最大的負數，可使用-Number.MAX_VALUE和-Number.MIN_VALUE

第23題

[1 < 2 < 3, 3 < 2 < 1]

A: [true, true]

B: [true, false]

C: error

D: other

運算符的運算順序和隱式類型轉換的題，從MDN上運算符優先級，'<'運算符順序是從左到右，因此變成了[true < 3, false < 1]

接着進行隱式類型轉換，'<'操做符的轉換規則（來自$雨$的文章《Javascript類型轉換的規則》）:

• 若是兩個操做值都是數值，則進行數值比較
• 若是兩個操做值都是字符串，則比較字符串對應的字符編碼值
• 若是隻有一個操做值是數值，則將另外一個操做值轉換爲數值，進行數值比較
• 若是一個操做數是對象，則調用valueOf()方法（若是對象沒有valueOf()方法則調用toString()方法），獲得的結果按照前面的規則執行比較
• 若是一個操做值是布爾值，則將其轉換爲數值，再進行比較

因此，這裏首先經過Number()轉換爲數字而後進行比較，true會轉換成1，而false轉換成0，就變成了[1 < 3, 0 < 1]

因此結果爲A

第24題

// the most classic wtf
2 == [[[2]]]

A: true

B: false

C: undefined

D: other

又是隱式類型轉換的題（汗）

題目做者的解釋是：
both objects get converted to strings and in both cases the resulting string is "2"

也就是說左右兩邊都被轉換成了字符串，而字符串都是"2"

這裏首先須要對==右邊的數組進行類型轉換，根據如下規則（來自justjavac的文章《「譯」JavaScript 的怪癖 1：隱式類型轉換》）：

1. 調用 valueOf()。若是結果是原始值（不是一個對象），則將其轉換爲一個數字。
2. 不然，調用 toString() 方法。若是結果是原始值，則將其轉換爲一個數字。
3. 不然，拋出一個類型錯誤。

因此右側被使用toString()方法轉換爲"2"，而後又經過Number("2")轉換爲數字2進行比較，結果就是true了，選A

第25題

3.toString()
3..toString()
3...toString()

A: "3", error, error

B: "3", "3.0", error

C: error, "3", error

D: other

說實話這題有點常見了，不少人都踩過3.toString()的坑（包括我）...雖然JavaScript會在調用方法時對原始值進行包裝，可是這個點是小數點呢、仍是方法調用的點呢，因而乎第一個就是error了，由於JavaScript解釋器會將其認爲是小數點。

而第二個則很好說通了，第一個點解釋爲小數點，變成了(3.0).toString()，結果就是"3"了

第三個也是，第一個點爲小數點，第二個是方法調用的點，可是後面接的不是一個合法的方法名，因而乎就error了

綜上，選C

第26題

(function(){
  var x = y = 1;
})();
console.log(y);
console.log(x);

A: 1, 1

B: error, error

C: 1, error

D: other

變量提高和隱式定義全局變量的題，也是一個JavaScript經典的坑...

仍是那句話，在做用域內，變量定義和函數定義會先行提高，因此裏面就變成了:

(function(){
    var x;
    y = 1;
    x = 1;
})();

這點會問了，爲何不是var x, y;，這就是坑的地方...這裏只會定義第一個變量x，而y則會經過不使用var的方式直接使用，因而乎就隱式定義了一個全局變量y

因此，y是全局做用域下，而x則是在函數內部，結果就爲1, error，選C

第27題

var a = /123/,
    b = /123/;
a == b
a === b

A: true, true

B: true, false

C: false, false

D: other

首先須要明確JavaScript的正則表達式是什麼。JavaScript中的正則表達式依舊是對象，使用typeof運算符就能得出結果：

console.log(typeof /123/);
//輸出結果：
//"object"

==運算符左右兩邊都是對象時，會比較他們是否指向同一個對象，能夠理解爲C語言中兩個指針的值是否同樣（指向同一片內存），因此兩個結果天然都是false

第28題

var a = [1, 2, 3],
    b = [1, 2, 3],
    c = [1, 2, 4]
a == b
a === b
a > c
a < c

A: false, false, false, true

B: false, false, false, false

C: true, true, false, true

D: other

和上題相似，JavaScript中Array的本質也是對象，因此前兩個的結果都是false，

而JavaScript中Array的'>'運算符和'<'運算符的比較方式相似於字符串比較字典序，會從第一個元素開始進行比較，若是同樣比較第二個，還同樣就比較第三個，如此類推，因此第三個結果爲false，第四個爲true。

綜上所述，結果爲false, false, false, true，選A

第29題

var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]

A: [false, true]

B: [true, true]

C: [false, false]

D: other

原型鏈的題（總會有的），考查的__proto__和prototype的區別。首先要明確對象和構造函數的關係，對象在建立的時候，其__proto__會指向其構造函數的prototype屬性

Object其實是一個構造函數（typeof Object的結果爲"function"）,使用字面量建立對象和new Object建立對象是同樣的，因此a.__proto__也就是Object.prototype，而Object.getPrototypeOf(a)與a.__proto__是同樣的，因此第二個結果爲true

而實例對象是沒有prototype屬性的，只有函數纔有，因此a.prototype實際上是undefined，第一個結果爲false

綜上，選A

第30題

function f() {}
var a = f.prototype, b = Object.getPrototypeOf(f);
a === b

A: true

B: false

C: null

D: other

仍是__proto__和prototype的區別，二者不是一個東西，因此選B

第31題

function foo() { }
var oldName = foo.name;
foo.name = "bar";
[oldName, foo.name]

A: error

B: ["", ""]

C: ["foo", "foo"]

D: ["foo", "bar"]

考察了函數的name屬性，使用函數定義方式時，會給function對象自己添加一個name屬性，保存了函數的名稱，很好理解oldName爲"foo"。name屬性時只讀的，不容許修改，因此foo.name = "bar";以後，foo.name仍是"foo"，因此結果爲["foo", "foo"]，選C

PS：name屬性不是一個標準屬性，不要去使用，除非你想要坑別人

第32題

"1 2 3".replace(/\d/g, parseInt)

A: "1 2 3"

B: "0 1 2"

C: "NaN 2 3"

D: "1 NaN 3"

String.prototype.replace、正則表達式的全局匹配和parseInt（又是parseInt...），能夠根據題意看出來題目上漏了一個''

首先須要肯定replace會傳給parseInt哪些參數。舉個栗子：

"1 2 3".replace(/\d/g, function(){
    console.log(arguments);
});
//輸出結果：
//["1", 0, "1 2 3"]
//["2", 2, "1 2 3"]
//["3", 4, "1 2 3"]

一共三個：

1. match：正則表達式被匹配到的子字符串
2. offset：被匹配到的子字符串在原字符串中的位置
3. string：原字符串

這樣就很好理解了，又回到以前parseInt的問題了，結果就是parseInt("1", 10), parseInt("2", 2), parseInt("3", 4)因此結果爲"1, NaN, 3"，選D

第33題

function f() {}
var parent = Object.getPrototypeOf(f);
f.name // ?
parent.name // ?
typeof eval(f.name) // ?
typeof eval(parent.name) //  ?

A: "f", "Empty", "function", "function"

B: "f", undefined, "function", error

C: "f", "Empty", "function", error

D: other

又是Function.name屬性的題，和三十二題同樣樣，f.name值爲"f"，而eval("f")則會輸出f函數，因此結果爲"function"

接着看parent，parent實際上就是f.__proto__，須要明確的是JavaScript中的函數也是對象，其也有本身的構造函數Function，因此f.__proto__ === Function.prototype結果是true，而Function.prototype就是一個名爲Empty的function

console.log(Function.prototype);
console.log(Function.prototype.name);
//輸出結果：
//function Empty() {}
//Empty

因此parent.name的值爲Empty

若是想直接在全局做用域下調用Empty，顯示未定義...由於Empty並不在全局做用域下

綜上所述，結果爲C

第34題

var lowerCaseOnly =  /^[a-z]+$/;
[lowerCaseOnly.test(null), lowerCaseOnly.test()]

A: [true, false]

B: error

C: [true, true]

D: [false, true]

正則表達式的test方法會自動將參數轉換爲字符串，原式就變成了[lowerCaseOnly.test("null"), lowerCaseOnly.test("undefined")]，結果都是真，因此選C

第35題

[,,,].join(", ")

A: ", , , "

B: "undefined, undefined, undefined, undefined"

C: ", , "

D: ""

JavaScript中使用字面量建立數組時，若是最末尾有一個逗號','，會背省略，因此實際上這個數組只有三個元素（都是undefined）：

console.log([,,,].length);
//輸出結果：
//3

而三個元素，使用join方法，只須要添加兩次，因此結果爲", , "，選C

第36題

var a = {class: "Animal", name: 'Fido'};
a.class

A: "Animal"

B: Object

C: an error

D: other

經典坑中的一個，class是關鍵字。根據瀏覽器的不一樣，結果不一樣：

chrome的結果： "Animal"

Firefox的結果："Animal"

Opera的結果："Animal"

IE 8以上也是： "Animal"

IE 8 及如下： 報錯