['1', '2', '3'].map(parseInt)` what & why ?

99 阅读2分钟

['1', '2', '3'].map(parseInt) what & why ?

首先这道题的答案应该是[1, NaN, NaN],而不是[1,2,3]

  • 回顾一下map函数的语法是
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

developer.mozilla.org/zh-CN/docs/…

callback一共可以接收三个参数,其中第一个参数代表当前被处理的元素,而第二个参数代表该元素的索引。

  • parseInt的语法是
parseInt(string, radix);

developer.mozilla.org/zh-CN/docs/…

parseInt接收两个参数,第一个表示被处理的字符),第二个表示解析时的基数。radix应该是2-36整数,对于未指定radix或者radix值为 undefined0的情况,会根据传入字符串的特点进行默认处理:

  1. 如果输入的 string以 "0x"或 "0X"(一个0,后面是小写或大写的X)开头,那么radix被假定为16,字符串的其余部分被当做十六进制数去解析。
  2. 如果输入的 string以 "0"开头, radix被假定为8(八进制)或10(十进制)。具体选择哪一个radix取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制),但不是所有的浏览器都支持。因此,在使用 parseInt 时,一定要指定一个 radix
  3. 如果输入的 string 以任何其他值开头, radix 是 10 (十进制)。
  • 另外,当 radix 小于 2 或大于 36 ,或第一个非空格字符不能转换为数字时,parseInt返回NaN

  • 因此对于题目中的问题:

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

map接收两个参数,item和index,实际执行的代码是

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

遍历执行过程如下:

  1. parseInt('1', 0) //radix为0时,且string参数不以“0x”和“0”开头时,按照10为基数处理。这个时候返回1
  2. parseInt('2', 1) //radix为1,不在2-36的范围中,返回NaN
  3. parseInt('3', 2) //radix为2(2进制)表示的数中,最大值小于3,所以无法解析,返回NaN
  • map函数返回的是一个数组,所以最后返回的结果为[1, NaN, NaN]