JS面試題['1',?'7',?'11'].map(parseInt)怎么解決

JS面試題[‘1’, ‘7’, ‘11’].map(parseInt)怎么解決

在JavaScript的面試中，map和parseInt的組合常常被用來考察開發者對這兩個方法的理解。具體來說，面試題可能會問：['1', '7', '11'].map(parseInt)的結果是什么？這個問題的答案并不像表面看起來那么簡單，它涉及到map和parseInt的細節行為。本文將詳細解釋這個問題，并提供解決方案。

1. map方法的基本用法

map是JavaScript數組的一個高階函數，它接受一個回調函數作為參數，并對數組中的每個元素執行這個回調函數。map會返回一個新的數組，新數組中的每個元素都是回調函數的返回值。

const arr = [1, 2, 3];
const newArr = arr.map(x => x * 2);
console.log(newArr); // [2, 4, 6]

在這個例子中，map對數組中的每個元素都執行了x => x * 2這個回調函數，最終返回了一個新的數組[2, 4, 6]。

2. parseInt函數的基本用法

parseInt是JavaScript中的一個全局函數，用于將字符串轉換為整數。它接受兩個參數：第一個參數是要轉換的字符串，第二個參數是基數（即進制）。

const num = parseInt('10', 2);
console.log(num); // 2

在這個例子中，parseInt將字符串'10'按照二進制（基數為2）進行解析，最終返回了整數2。

3. map和parseInt的組合問題

現在回到面試題：['1', '7', '11'].map(parseInt)的結果是什么？

首先，我們需要理解map和parseInt的組合是如何工作的。map會將數組中的每個元素傳遞給parseInt，并期望parseInt返回一個值。然而，parseInt實際上接受兩個參數：要解析的字符串和基數。

map在調用回調函數時，會傳遞三個參數給回調函數：當前元素、當前索引和數組本身。因此，parseInt實際上接收到的參數是：

• 第一個參數：當前元素（字符串）
• 第二個參數：當前索引（數字）
• 第三個參數：數組本身（通常被忽略）

因此，['1', '7', '11'].map(parseInt)實際上等同于：

parseInt('1', 0); // 1
parseInt('7', 1); // NaN
parseInt('11', 2); // 3

3.1 解析第一個元素：'1'

parseInt('1', 0)：當基數為0時，parseInt會根據字符串的前綴來決定基數。由于'1'沒有前綴，parseInt會默認使用十進制，因此返回1。

3.2 解析第二個元素：'7'

parseInt('7', 1)：基數為1時，parseInt無法解析，因為1進制只包含數字0，因此返回NaN。

3.3 解析第三個元素：'11'

parseInt('11', 2)：基數為2時，parseInt會將字符串'11'解析為二進制數，即3。

因此，['1', '7', '11'].map(parseInt)的結果是[1, NaN, 3]。

4. 如何解決這個問題

要解決這個問題，我們需要確保parseInt只接收一個參數（即要解析的字符串），而不接收基數參數。我們可以通過定義一個只接受一個參數的函數來包裝parseInt：

const result = ['1', '7', '11'].map(str => parseInt(str));
console.log(result); // [1, 7, 11]

在這個例子中，我們使用了一個箭頭函數str => parseInt(str)，它只接受一個參數str，并將其傳遞給parseInt。這樣，parseInt就不會接收到基數參數，從而避免了之前的問題。

5. 總結

['1', '7', '11'].map(parseInt)的結果是[1, NaN, 3]，這是因為map會將當前索引作為基數傳遞給parseInt，導致了一些意外的結果。要解決這個問題，我們可以使用一個只接受一個參數的函數來包裝parseInt，從而確保parseInt只接收到要解析的字符串。

理解map和parseInt的行為細節對于避免類似的陷阱非常重要。希望本文能幫助你更好地理解這個問題，并在面試中表現出色。