此次列舉出一些覺得有意思的JS題目(來源於出了名的44題)，相信有非常多關於這些題目的部落格，寫這篇部落格的目的在於鞏固一些知識點，希望能和讀者共同進步。
1. map函式執行過程 ["1", "2", "3"].map(parseInt)
答案： [1, NaN, NaN] 解析： map(function callback(current, index, array)), map 回掉提供三個引數，current value, index of current value, array. parseInt(value, radix), parseInt 提供兩個引數，value 表示需要轉換的string，radix表示string原本的進位制單位，從2到36.
所以這道題的執行過程是這樣的： array.map(parseInt(value(current), radix(index) )); 回掉會自動按序分配引數 current => value, index => radix;
真實執行過程 array.map(parseInt(1, 0)) => parseInt(1, 0), 0 預設代表十進位制。 parseInt(2, 1), 沒有1進位制，所以返回NaN, parseInt(3,2), 2進位制只有0，1， 所以同樣返回NaN
2.[typeof null, null instanceof Object] 答案： [object, false] 解析： typeof 返回一個表示型別的字串, typeof null == object. instanceof 用來測試一個物件在其原型鏈中是否存在一個建構函式的 prototype 屬性, 顯而易見，null 沒有建構函式，所以返回的是false
- 運算子優先順序 var val = 'smtg';
console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing')
答案：Something 解析：+ 運算子優先順序高於 > ，所以沒有括號的情況下， 會先執行字串連線操作。 所以等價於 ‘Value is true'? 'Something' : 'Nothing' 如果搞不清運算子優先順序的時候，可以加上括號
- 稀疏陣列與Array.filter
var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;});
複製程式碼答案：[]
解析： 這邊的ary 是一個稀疏陣列，index從3到9都沒有定義，所以ary[3~9]的值是undefined（可以在chrome tool裡通過ary[index]來檢視），那麼乍一看這個題的答案應該是返回7個undefined組成的陣列。
但是這裡返回的是[]，原因在於filter函式的作用。
if (!Array.prototype.filter){
Array.prototype.filter = function(func, thisArg) {
'use strict';
if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
throw new TypeError();
var len = this.length >>> 0,
res = new Array(len), // preallocate array
t = this, c = 0, i = -1; //前端全棧學習交流圈：866109386.
if (thisArg === undefined){//面相1-3年前端開發人員.
while (++i !== len){ //幫助突破技術瓶頸，提升思維能力.
// checks to see if the key was set
//看這裡 看這裡
if (i in this){
if (func(t[i], i, t)){
res[c++] = t[i];
}
}
}
}
else{
while (++i !== len){
// checks to see if the key was set
if (i in this){
if (func.call(thisArg, t[i], i, t)){
res[c++] = t[i];
}
}
}
}
res.length = c; // shrink down array to proper size
return res;
};
}
複製程式碼可以看紅色文字下方的程式碼，filter函式會先判斷當前index是否在陣列中被設定，即是否有ary[index] = value的過程，否則會跳過這個index。
所以對於稀疏陣列，未定義的index會被跳過，從而導致這道題的答案是[]。 如果有ary[index] = undefined, 那麼結果就會是返回由undefined 組成的陣列。
5. String('A') 和 new String('A') 的區別
以下兩個程式碼段的輸出結果是？
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'));
複製程式碼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!');
}
}
showCase2(String('A'));
複製程式碼答案：‘Do not know!' ; 'Case A'
解析：為什麼兩個程式碼段的輸出不一致呢？
兩個原因：1.switch進行比較的時候用的是全等符“===”，所以不會做型別轉換，即“10”不會等於10；
- new String() 和 String 返回的型別不同，前者返回的是object，後者返回的是string，所以在做全等比較的時候，返回的結果是false。
所以如果有需要用到switch對於字串做比較的時候，需要注意傳入的引數型別。
6. 你真的瞭解"=="嗎？ 下面兩個程式碼段的輸出是？
var a = [0];
if ([0]) {
console.log(a == true);
} else {
console.log("wut");
}
複製程式碼[]==[]
複製程式碼答案：false, false
解析：如果單純的把[0]轉換成boolean型別的話，結果會是true，所以if判斷語句的結果是true。
看了很多其他的部落格，都有說到“==”會做型別轉換，比較其值，我覺得這個答案依然無法詳細解釋上述程式碼的結果。
查閱了更多資料後，找到了一些“==“的規則：
1、如果兩個值型別相同，進行 === 比較，比較規則同上 2、如果兩個值型別不同，他們可能相等。根據下面規則進行型別轉換再比較： a、如果一個是null、一個是undefined，那麼[相等]。 b、如果一個是字串，一個是數值，把字串轉換成數值再進行比較。 c、如果任一值是 true，把它轉換成 1 再比較；如果任一值是 false，把它轉換成 0 再比較。 d、如果一個是物件，另一個是數值或字串，把物件轉換成基礎型別的值再比較。物件轉換成基礎型別，利用它的toString或者valueOf方法。js核心內建類，會嘗試valueOf先於toString；例外的是Date，Date利用的是toString轉換。非js核心的物件，令說（比較麻煩，我也不大懂） e、任何其他組合（array陣列等），都不相等。
所以其實”==“的轉換規則，並沒有想象的那麼簡單，由此可見[0] == true, 應該採用的是規則c, 而[] == [] 應該採用的是規則e.
最後附上一張”==“比較的結果圖
7. Arguments of methods
function sidEffecting(ary) {
ary[0] = ary[2];
}
function bar(a,b,c) {
c = 10
sidEffecting(arguments);
return a + b + c;
}
bar(1,1,1)
複製程式碼function sidEffecting(ary) {
ary[0] = ary[2];
}
function bar(a,b,c) {
c = 10
sidEffecting(arguments);
return a + b + c;
}
bar(1,1,1)
複製程式碼答案：21， 12
解析：第一個程式碼段的答案，我相信很容易得出。問題是第二個程式碼段，乍一看結果應該和第一個程式碼段相同，實則不然，那麼是為什麼呢？
其實這邊不同的結果是由arguments 這個物件(arguments 不是陣列)造成的，如果函式的引數有預設值的時候，那麼arguments這個物件不會追蹤引數值的變化，並且只記錄傳遞過來的值。
所以第二個程式碼段中，arguments的結果是（1，1，1），sideEffecting函式拿到的結果是ary[0] =1, ary[2] =1; 所以回到a+b+c = 1+1+10 ==》 12。 8. 有趣的比較符又來了 [1 < 2 < 3, 3 < 2 < 1] 答案： true, true
解析：1<2<3 等價於1<2=> true; true<3 => 1<3=> true;
3<2=> false; false<1 => 0<1=> true.
9.變數提升
(function(){
var x = y = 1;
})();
console.log(y);
console.log(x);
複製程式碼答案： 1， error
解析：這道題目涉及到變數提升的範圍，以及賦值語法。
var x=y=1 等價於 var x=1; y=1; 這裡的y會被提升至全域性域，所以的除上述答案。
var x=1,y=1 等價於var x=1; var y=1, 這樣寫的話，x，y都是區域性變數，不會被提升。
先總結這麼幾道，之後碰到覺得有趣的題目，會持續更新。