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

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

为什么会出现这么怪异的问题?

其实主要出现在parseInt身上,我们先来看下map的参数
map函数的第一个参数callback:

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

这个callback一共可以接收三个参数,

  • currentValuecallback 数组中正在处理的当前元素。
  • index可选, 是callback数组中正在处理的当前元素的索引。
  • array可选, 是callback map 方法被调用的数组。
  • 另外还有thisArg可选, 执行 callback 函数时使用的this 值。

parseInt则是用来解析字符串的,使字符串成为指定基数的整数。
parseInt(string, radix)
接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数。

了解这两个函数后,我们可以模拟一下运行情况

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

如何改进才能得到我们需要的结果那?

在 Advanced-Frontend组织 看到一个比较有意思的题目。
主要是讲JS的映射与解析
早在 2013年, 加里·伯恩哈德就在微博上发布了以下代码段:

['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]

你可能感兴趣的:(['1', '2', '3'].map(parseInt) what & why ?)