['1', '2', '3'].map(parseInt)？

這是今天在  Daily-Interview-Question 項目 看到一個比較有意思的題目。 主要是講 JS 的映射與解析 早在 2013 年, 加里·伯恩哈德就在微博上發佈瞭如下代碼段:

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

parseInt

parseInt() 函數解析一個字符串參數，並返回一個指定基數的整數 (數學系統的基礎)。

const intValue = parseInt(string[, radix]);
複製代碼

string 要被解析的值。若是參數不是一個字符串，則將其轉換爲字符串(使用 ToString 抽象操做)。字符串開頭的空白符將會被忽略。

radix 一個介於2和36之間的整數(數學系統的基礎)，表示上述字符串的基數。默認爲10。

返回值 返回一個整數或NaN。

parseInt(100); // 100
parseInt(100, 10); // 100
parseInt(100, 2); // 4 -> converts 100 in base 2 to base 10
複製代碼

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

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

更多詳見parseInt | MDN

map

map() 方法建立一個新數組，數組中的每一個元素都調用一個提供的函數，新數組中的元素就是執行這個函數後返回的結果。

var new_array = arr.map(function callback(currentValue[,index[, array]]) {
 // Return element for new_array
 }[, thisArg])
複製代碼

能夠看到callback回調函數須要三個參數, 咱們一般只使用第一個參數 (其餘兩個參數是可選的)。 currentValue 是callback 數組中正在處理的當前元素。 index可選, 是callback 數組中正在處理的當前元素的索引。 array可選, 是callback map 方法被調用的數組。 另外還有thisArg可選, 執行 callback 函數時使用的this 值。

const arr = [1, 2, 3];
arr.map((num) => num + 1); // [2, 3, 4]
複製代碼

更多詳見Array.prototype.map() | MDN

回到真實的例子上

回到咱們真實的例子上

['1', '2', '3'].map(parseInt)
複製代碼

對於每一個迭代map, parseInt()傳遞兩個參數: 字符串和基數。 因此實際執行的的代碼是：

['1', '2', '3'].map((item, index) => {
	return parseInt(item, index)
})
複製代碼

即返回的值分別爲：

parseInt('1', 0) // 1
parseInt('2', 1) // NaN，radix 須要在 2 和 36 之間
parseInt('3', 2) // NaN, 3 不是二進制
複製代碼

因此：

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

由此，加里·伯恩哈德例子也就很好解釋了，這裏再也不贅述

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

如何在現實世界中作到這一點

若是你就是想要循環訪問字符串數組, 那要怎麼辦？ 使用 map() 時而後把它換成數字就行了。

['10','10','10','10','10'].map(Number);
// [10, 10, 10, 10, 10]
複製代碼

系列文章

• JS 系列一：var、let、const、解構、展開、函數

想看更過系列文章，點擊前往 github 博客主頁

走在最後

1. ❤️玩得開心，不斷學習，並始終保持編碼。👨💻

2. 若有任何問題或更獨特的看法，歡迎評論或直接聯繫瓶子君（公衆號回覆 123 便可）！👀👇

3. 👇歡迎關注：前端瓶子君，每日更新！👇