【前端詞典】arr.filter(parseInt) 考查點爲什麼

這一類的面試題目時不時出現，那麼它的考點在哪裏呢？

其實這類題的目的很清楚，即考察：

• 數組方法的基礎知識
• 數值轉換方法的基礎知識

也就是考察 基礎知識的紮實程度，換句話說這是一道基礎題。

map()、filter()、reduce() 等數組方法

說明一下：map()、filter() 是 ES5 爲數組定義的迭代方法， reduce() 是 ES5 爲數組定義的歸併方法。這些方法並非 ES6 新增的語法（以前在一場面試中，面試官很確定的說這是 ES6 新增的方法）。

• 你能夠在 《JavaScript 高級程序設計-第三版》 96-97 頁中看到明確的說明。

語法:

array.filter(callback[,thisObject]);
  // array.map(callback[,thisObject]);
  // array.reduce(callback[,initialValue])
複製代碼

都不會改變原始數組。

參數：

callback：要對每一個數組元素執行的回調函數。
  thisObject：在執行回調函數時定義的 this 對象(沒有傳遞或者爲 null，將會使用全局對象)。
  // initialValue: 做爲第一次調用 callback 函數時的第一個參數的值。
複製代碼

map()

對原數組中的每一個元素按順序執行一次指定的函數（即 callback），callback 每次執行後的返回值（包括 undefined）組合起來造成一個新數組。

回調函數能夠有三個參數：當前元素，當前元素的索引 [可選] 和當前的數組對象 [可選] 。

filter()

對原數組中的每一個元素執行一次指定的函數（即 callback），而且建立一個新的數組，該數組元素是全部回調函數執行時返回值爲 true 的原數組元素。

回調函數能夠有三個參數：當前元素，當前元素的索引 [可選] 和當前的數組對象 [可選] 。

reduce()

對原數組中的每一個元素執行一次指定的函數（即 callback），返回最後一次回調返回值。

回調函數能夠有四個參數：累計器，當前元素，當前元素的索引 [可選] 和當前的數組對象 [可選] 。

提醒：reduce() 區別於 map()/filter() 的地方就在回調函數的第一個參數 - accumulator : 累計器。

parseInt()、parseFloat() 兩個數值轉換方法

parseInt 語法

parseInt(string, radix)  
複製代碼

將一個字符串 string 轉換爲 radix（值默認爲 10） 進制的整數，radix 爲介於 2-36 之間的數。

注意：string 將看做是一個數的 n 進製表示，返回的值爲十進制。

返回值：

• 若是被解析參數的第一個字符沒法被轉化成數值類型，則返回 NaN
• 若是 radix 小於 2 或者大於 36，則返回 NaN

在 radix 爲 undefined，或者 radix 爲 0 或者沒有指定的狀況下，JavaScript 做以下處理：

• 若是字符串 string 以"0x"或者"0X"開頭, 則 radix 是 16 (16進制).
• 若是字符串 string 以"0"開頭, radix 是8（八進制）或者10（十進制），具體值由實現環境決定。ECMAScript 5 規定使用 10，可是並非全部的瀏覽器都遵循這個規定。所以，永遠都要明確給出 radix 參數的值
• 若是字符串 string 以其它任何值開頭，則 radix 是 10 (十進制)。

parseFloat 語法

parseFloat(string)
複製代碼

只有一個參數，用做將給定值解析成浮點數（若是給定值不能被轉換成數值，則會返回 NaN）。

解釋 arr.filter(parseInt)

其實以上的過程就很好地解析了這個問題，此類問題只要理解基本方法的傳參就不會出錯了，並且不須要強記['1', '2', '3'].map(parseInt)的結果。

let arr = [2,0,11,10];
arr.filter(parseInt);

// arr.map(parseInt); // [2, NaN, 3, 3]
複製代碼

一、首先 arr 的每一個元素執行一次 parseInt，傳入 parseInt 的參數就是當前元素和當前元素的索引。

二、經歷以下過程：

- parseInt(2,0)   // 結果爲 2，轉成 Boolean 爲 true
- parseInt(0,1)   // 結果爲 NaN，轉成 Boolean 爲 false
- parseInt(11,2)  // 結果爲 3，轉成 Boolean 爲 true
- parseInt(10,3)  // 結果爲 3，轉成 Boolean 爲 true
複製代碼

因此最後返回 [2, 11, 10]。

總結

基礎很重要，這是送分題。