['1', '2', '3'].map(parseInt) 输出什么？为什么？（深度解析）

['1', '2', '3'].map(parseInt) 输出什么？为什么？

输出： [1, NaN, NaN]

为什么：

1.map函数和parseInt函数说明：

Array.prototype.map()说明，参考mdn

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

map 函数接受一个callback生成新数组元素的函数

callback 函数会被自动传入三个参数：

数组元素(currentValue | 必选)，

元素索引(index | 可选)，

原数组本身(array | 可选)

---

parseInt(string, radix)说明，参考mdn

string

要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。

radix

一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。比如参数"10"表示使用我们通常使用的十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时，不同的实现会产生不同的结果，通常认为其值默认为10，但是请在使用时总是显示的指定它。

则上面的代码就变成这样

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

即返回的值分别为：

parseInt('1', 0) // 1
parseInt('2', 1) // NaN, 第二个参数不在2-36之间
parseInt('3', 2) // NaN, 3 不是二进制

2.深度解析：parseInt(string, radix)

// radix参数
// 默认为10（十进制）
// radix为0时，且string参数不以“0x”和“0”开头时，按照10为基数处理  

// 如果第一个参数string不能被转换成数字，parseInt返回NaN。

parseInt("Hello", 2); // NaN
parseInt(10)          // 10
parseInt(10,  10)     // 10
parseInt(10, 0);      // 10


// radix 取值范围为 2-36。  超过36返回NaN。 小于2不等于0即只能是1时返回NaN。为0时，且string参数不以“0x”和“0”开头时，按照10为基数处理  

parseInt(10, 0)  // 10
parseInt(10, 1)  // NaN
parseInt(10, 3)  // 3
parseInt(10, 37) // NaN

// 如何计算最终输出？

parseInt(10, 3)
// 首先参数string中, 每一位都小于3（1 < 3 && 0 < 3），并且 radix参数在2到36之间 ，所以这时候我们应该是有个正确的输出的 。
// 计算： 现在是3进制，则输出结果为：0 * (3^0) + 1 * (3^1) = 3 ==>输出 3

parseInt(101, 2) // 5
// 同理, 101每一位都小于2（1 < 2 && 0 < 2），并且 radix在2到36之间
// 计算： 现在是2进制，则输出结果为：1 * (2^0) + 0 * (2^1) + 1 * (2^2) = 5 ==>输出 5

parseInt(102, 2) // 2
// 在102中 ，第三位2 >= 2 (radix = 2) ，并且 radix在2到36之间
// 这个时候忽略大于等于radix位及其之后的所有数值 。则现在 102 ==> 10
// 计算： 现在是2进制，则输出结果为：0 * (2^0) + 1 * (2^1) = 2 ==>输出 2

parseInt(1061, 3) // 3
// 在1061中 ，第三位 6 >= 3 (radix = 3) ，并且 radix在2到36之间
// 这个时候忽略大于等于radix位及其之后的所有数值 。则现在 1061 ==> 10
// 计算： 现在是3进制，则输出结果为：0 * (3^0) + 1 * (3^1) = 3 ==>输出 3

parseInt(3061, 3) // NaN
// 第一位大于等于radix时，NaN

3.实际代码应该怎么写？

['1','2','3'].map(n=>parseInt(n,10))
// [1, 2, 3]

如果数组每项都是数字字符串的话，可以这样

['1','2','3'].map(Number)
// [1, 2, 3]

参考链接：

1.mdn Array.prototype.map

2.mdn parseInt

3.https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/4