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

153 阅读2分钟

Array.prototype.map() 理解

 arr.map(function callback(currentValue[, index[, array]])  //> 返回一个新数组对象

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

  • 第一个参数代表当前被处理的元素,

  • 第二个参数代表该元素的索引。

  • 第三个参数代表原数组对象

而parseInt则是用来解析字符串的,使字符串成为指定基数的整数。

parseInt(string, radix)

接收两个参数

  • 第一个表示被处理的值(字符串)

  • 第二个表示为解析时的基数 (radix | 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。) 了解这两个函数后,我们可以模拟一下运行情况

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

Demo test: ['11', '11', '11',11].map(parseInt) ? 解析:

  • parseInt('11', 0), //radix为0时,且string参数不以“0x”和“0”开头时,按照10为基数处理。这个时候返回11

  • parseInt('11', 1), //基数为1(1进制)表示的数中,1不在radix的范围内,所以无法解析,返回NaN

  • parseInt('11', 2), //radix为2时, (2的0次方 是1 )* 1 + (2的1次方 是2) *1这个时候返回3

  • parseInt('11', 3), //radix为3时,(3的0次方 是1 )* 1 + (3的1次方 是3) *1这个时候返回4

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

最后附上MDN上对于这两个函数的链接,具体参数大家可以到里面看 developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/…