前端进阶 | 浅析[1, 2, 3].map(parseInt)

183 阅读2分钟

第一眼看到这个题目的时候,脑海跳出的答案是 [1, 2, 3],但是真正的答案是[1, NaN, NaN]

map

首先让我们回顾一下,map函数的第一个参数callback

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg]) 这个callback一共可以接收三个参数,其中第一个参数代表当前被处理的元素,而第二个参数代表该元素的索引

通常情况下**,map 方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。**这个思维惯性可能会让我们犯一个很容易犯的错误。

parseInt

接下来我们再回顾下parseIntparseInt 是用来解析字符串的,使字符串成为指定基数的整数。

parseInt(string, radix)接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数(默认值为10**)**。

parseInt 经常只使用一个参数, 但是这里接受两个。 Array.prototype.map 传递3个参数:

  • the element
  • the index
  • the array

在这里第三个参数被parseInt忽视了,所以此时string对应Array.prototype.map当前被处理的元素radix对应该元素的索引

迭代步骤的简明示例

下面是迭代步骤的简明示例:

  1. parseInt('1', 0) //1

    radix为0时,且string参数不以“0x”和“0”开头时,按照10为基数处理。这个时候返回1

  2. parseInt('2', 1) //NAN

    基数为1(1进制)表示的数中,最大值小于2,所以无法解析,返回NaN

  3. parseInt('3', 2) //NAN

    基数为2(2进制)表示的数中,最大值小于3,所以无法解析,返回NaN

map函数返回的是一个数组,所以最后结果为[1, NaN, NaN]

参考

MDN文档