今天看到一道笔试题:

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

这道题目中涉及到 map 和 parseInt 函数的运用,如果对这两个函数的理解不充分的话,是很难思考出正确的结果的。下面就通过这道题目对 map 和 parseInt 函数作一个简单的理解和分析:

map((item, index, thisArr) => ( newArr ))

【参数解析】
 item: callback 的第一个参数,数组中正在处理的当前元素。
 index: callback 的第二个参数,数组中正在处理的当前元素的索引。
 thisArr: callback 的第三个参数,map 方法被调用的数组。
【返回】
 一个新数组,每个元素都是执行回调函数的结果。

parseInt(string, radix)

【参数解析】
 string: 必需。要被解析的字符串。
 radix: 可选。表示要解析的字符串的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。
【返回】
 解析后的数字
【注意】

1. 只有字符串中的第一个数字会被返回。 
   // parseInt(' 12abc!6')  12
 2. 开头和结尾的空格是允许的。 
   // parseInt(' 12x') 12
 3. 如果字符串的第一个字符不能被转换为数字,那么 parseInt() 会返回 NaN。     
   // parseInt('s90')  NaN
 4. radix 表示的是当前要解析的字符串的表示进制数,而不是解析的进制数。
   // parseInt('3', 2) 表示当前的字符串'3' 是以二进制表示的(当然这是不合规则的,仅为说明问题),而不是将 3 用二进制作转换
【示例】 
parseInt("10"); // 10
parseInt("19",10); // 19 (10+9)
parseInt("11",2); // 3 (2+1)
parseInt("17",8); // 15 (8+7)
parseInt("1f",16); // 31 (16+15)
parseInt("010"); // 10 或 8

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

通过上述对 map 和 parseInt 函数的分析可以知道,执行方法时,map给parseInt传递了三个参数:

parseInt(item, index, thisArr)

其中第三个参数会被 parseInt 忽略,因此会依次执行:

parseInt('1', 0)
// radix 为 0,默认以十进制解析字符串,返回 1
parseInt('2', 1)
// radix 为 1,不在 2 ~ 36 之间,返回 NaN
parseInt('3', 2)
// radix 为 2, 字符串却为 3,超出二进制的表示范围,因此要解析的字符串和基数矛盾,返回 NaN
综上,最后返回的数组为 [1, NaN, NaN]

parseInt(false, 16)
// 250

parseInt(parseInt, 16) 
// 15

parseInt('0x10', 16)
// 16

parseInt('103', 2)
// 2

parseInt(1/0, 19)
// 18

【参考】

为什么 ["1", "2", "3"].map(parseInt) 返回 [1,NaN,NaN]?

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt


您已经阅读00:00:00欢迎留言评论,喜欢的话就为作者点个赞或者赏颗糖吧! 分享