摘要：第一題為的返回值。返回值其中的每個(gè)元素均為關(guān)聯(lián)的原始數(shù)組元素的回調(diào)函數(shù)返回值的新數(shù)組。修改數(shù)組對象數(shù)組對象可由回調(diào)函數(shù)修改。方法啟動(dòng)后的條件元素是否傳遞給回調(diào)函數(shù)在數(shù)組的原始長度之外添加元素。

JavaScript Puzzlers! 被稱為 javascript 界的專業(yè)八級測驗(yàn)，感興趣的 jser 可以去試試。
我試了一下， 36 道題只做對了 19 道， 算下來正確率為 53%，還沒有及格。

第一題為 ["1", "2", "3"].map(parseInt) 的返回值。

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

在 javascript 中 ["1", "2", "3"].map(parseInt) 為何返回不是 [1,2,3] 卻是 [1,NaN,NaN]？

我們首先回顧一下 parseInt() 個(gè) map() 兩個(gè)函數(shù)的用法：

parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。

parseInt(string, radix)

返回解析后的數(shù)字。

當(dāng)參數(shù) radix 的值為 0，或沒有設(shè)置該參數(shù)時(shí)，parseInt() 會(huì)根據(jù) string 來判斷數(shù)字的基數(shù)。

舉例：

如果 string 以 "0x" 開頭，parseInt() 會(huì)把 string 的其余部分解析為十六進(jìn)制的整數(shù)。

如果 string 以 0 開頭，那么 ECMAScript v3 允許 parseInt() 的一個(gè)實(shí)現(xiàn)把其后的字符解析為八進(jìn)制或十六進(jìn)制的數(shù)字。

如果 string 以 1 ~ 9 的數(shù)字開頭，parseInt() 將把它解析為十進(jìn)制的整數(shù)。

注釋：只有字符串中的第一個(gè)數(shù)字會(huì)被返回。

注釋：開頭和結(jié)尾的空格是允許的。

提示：如果字符串的第一個(gè)字符不能被轉(zhuǎn)換為數(shù)字，那么 parseInt() 會(huì)返回 NaN。

在本例中，我們將使用 parseInt() 來解析不同的字符串：

parseInt("10");         // 返回 10 (默認(rèn)十進(jìn)制)
parseInt("19",10);      // 返回 19 (十進(jìn)制: 10+9)
parseInt("11",2);       // 返回 3 (二進(jìn)制: 2+1)
parseInt("17",8);       // 返回 15 (八進(jìn)制: 8+7)
parseInt("1f",16);      // 返回 31 (十六進(jìn)制: 16+15)
parseInt("010");        // 未定：返回 10 或 8

對數(shù)組的每個(gè)元素調(diào)用定義的回調(diào)函數(shù)并返回包含結(jié)果的數(shù)組。

array1.map(callbackfn[, thisArg])

其中的每個(gè)元素均為關(guān)聯(lián)的原始數(shù)組元素的回調(diào)函數(shù)返回值的新數(shù)組。

如果 callbackfn 參數(shù)不是函數(shù)對象，則將引發(fā) TypeError 異常。

對于數(shù)組中的每個(gè)元素，map 方法都會(huì)調(diào)用 callbackfn 函數(shù)一次（采用升序索引順序）。 不為數(shù)組中缺少的元素調(diào)用該回調(diào)函數(shù)。

除了數(shù)組對象之外，map 方法可由具有 length 屬性且具有已按數(shù)字編制索引的屬性名的任何對象使用。

回調(diào)函數(shù)的語法如下所示：

function callbackfn(value, index, array1)

可使用最多三個(gè)參數(shù)來聲明回調(diào)函數(shù)。

下表列出了回調(diào)函數(shù)參數(shù)。

數(shù)組對象可由回調(diào)函數(shù)修改。

下表描述了在 map 方法啟動(dòng)后修改數(shù)組對象所獲得的結(jié)果。

下面的示例闡釋了 map 方法的用法。

// 定義回調(diào)函數(shù)
// 計(jì)算圓的面積
function AreaOfCircle(radius) { 
    var area = Math.PI * (radius * radius); 
    return area.toFixed(0); 
} 

// 定義一個(gè)數(shù)組，保護(hù)三個(gè)元素
var radii = [10, 20, 30]; 

// 計(jì)算 radii 的面積. 
var areas = radii.map(AreaOfCircle); 

document.write(areas); 

// 輸出: 
// 314,1257,2827

下面的示例闡釋 thisArg 參數(shù)的用法，該參數(shù)指定對其引用 this 關(guān)鍵字的對象。

// 定義一個(gè)對象 object，保護(hù) divisor 屬性和 remainder 方法
// remainder 函數(shù)求每個(gè)傳入的值的個(gè)位數(shù)。（即除以 10 取余數(shù)）
var obj = { 
    divisor: 10, 
    remainder: function (value) { 
        return value % this.divisor; 
    } 
} 

// 定義一個(gè)包含 4 個(gè)元素的數(shù)組
var numbers = [6, 12, 25, 30]; 

// 對 numbers 數(shù)組的每個(gè)元素調(diào)用 obj 對象的 remainder 函數(shù)。
// map 函數(shù)的第 2 個(gè)參數(shù)傳入 ogj。 
var result = numbers.map(obj.remainder, obj); 
document.write(result); 

// 輸出: 
// 6,2,5,0

在下面的示例中，內(nèi)置 JavaScript 方法用作回調(diào)函數(shù)。

// 對數(shù)組中的每個(gè)元素調(diào)用 Math.sqrt(value) （求平方根）
var numbers = [9, 16]; 
var result = numbers.map(Math.sqrt); 

document.write(result); 
// 輸出: 3,4

[9, 16].map(Math.sqrt) 回調(diào)函數(shù)，輸出的結(jié)果是 [3, 4]。
但是為什么 ["1", "2", "3"].map(parseInt) 卻返回 [1,NaN,NaN]？

網(wǎng)站給出的提示是：

  
what you actually get is [1, NaN, NaN] because parseInt takes two parameters (val, radix) and map passes 3 (element, index, array)

簡單翻譯一下就是

  
parseInt 需要 2 個(gè)參數(shù) (val, radix)， 而 map 傳遞了 3 個(gè)參數(shù) (element, index, array)」。

通過上面的解釋，我們可以看出，如果想讓 parseInt(string, radix) 返回 NaN，有兩種情況：

第一個(gè)參數(shù)不能轉(zhuǎn)換成數(shù)字。

第二個(gè)參數(shù)不在 2 到 36 之間。

我們傳入的參數(shù)都能轉(zhuǎn)換成數(shù)字，所以只能是第二種可能。

到底是不是呢？我們重新定義 parseInt(string, radix) 函數(shù)：

var parseInt = function(string, radix) {
    return string + "-" + radix;
};

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

輸出結(jié)果為：

["1-0", "2-1", "3-2"]

看見，map 函數(shù)將數(shù)組的值 value 傳遞給了 parseInt 的第一個(gè)參數(shù)，將數(shù)組的索引傳遞給了第二個(gè)參數(shù)。
第三個(gè)參數(shù)呢？我們再加一個(gè)參數(shù)

var parseInt = function(string, radix, obj) {
    return string + "-" + radix + "-" + obj;
};

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

輸出結(jié)果：

["1-0-1,2,3", "2-1-1,2,3", "3-2-1,2,3"]

我們再繼續(xù)增加參數(shù)：

var parseInt = function(string, radix, obj, other) {
    return string + "-" + radix + "-" + obj + "-" + other;
};

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

輸出結(jié)果：

["1-0-1,2,3-undefined", "2-1-1,2,3-undefined", "3-2-1,2,3-undefined"]

第四個(gè)參數(shù)為 undefined，看見 map 確實(shí)為 parseInt 傳遞了三個(gè)參數(shù)。就像作者寫道的：

(element, index, array)

數(shù)組的值

數(shù)組的索引

數(shù)組

UPDATE 原文勘誤：（謝謝 米粽粽 提醒）

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

應(yīng)該對應(yīng)的是：

[parseInt("1", 0), parseInt("2", 1), parseInt("3", 2)]

parseInt("3", 2) 的第二個(gè)參數(shù)是界于 2-36 之間的，之所以返回 NaN 是因?yàn)?字符串 "3" 里面沒有合法的二進(jìn)制數(shù)，所以 NaN。

我們還可以繼續(xù)試驗(yàn):

> ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"].map(parseInt)
[1, NaN, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

只有當(dāng)?shù)诙€(gè)參數(shù)是 1 的時(shí)候返回 NaN，其它情況都返回 1。

> ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"].map(parseInt)
[1, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 9, 11, 13, 15, 17, 19, 21]

簡單列舉一下：

parseInt("1", 0);    // 十進(jìn)制 1
parseInt("2", 1);    // 第二個(gè)參數(shù)不在 2-36 直接
parseInt("3", 2);    // 二進(jìn)制 NaN
parseInt("4", 3);    // 三進(jìn)制
parseInt("5", 4);
parseInt("6", 5);
parseInt("7", 6);
parseInt("8", 7);
parseInt("9", 8);
parseInt("10", 9);   // 九進(jìn)制 （1*9+0 = 9）
parseInt("11", 10);  // 十進(jìn)制 （1*10+1 = 11）
parseInt("12", 11);
parseInt("13", 12);
parseInt("14", 13);
parseInt("15", 14);
parseInt("16", 15);

（全文完）

文章來自我的個(gè)人博客：JavaScript Puzzlers 解密（一）：為什么 ["1", "2", "3"].map(parseInt) 返回 [1, NaN, NaN]？