当parseInt遇上map,会产生什么神奇的魔法?

499 阅读2分钟

「这是我参与11月更文挑战的第12天,活动详情查看:2021最后一次更文挑战」。


前言

在项目中,我们不乏会遇到需要将 String 的数据转成 Number 型的数据,其中我们通常会使用parseInt() 或者 Number() 或是 语法糖加号:+'1324'

下面我们结合map,来讲一下有关parseInt的奇奇怪怪的知识点

parseInt

parseInt的语法

parseInt(string, radix)
  • string参数为字符串,若不是字符串则转换为字符串。
  • radix是一个介于2-36之间的整数,表示字符串的基数,当未指定基数或基数为0,不同的传入值会产生不同的结果
    • 如果 string 以 "0x" 开头,会将 string 识别为16进制的整数
    • 如果 string 以 0 开头,那么会将字符识别为八进制或16进制的数字
    • 如果 string 以 1 ~ 9 的数字开头,那么会将把它识别为10进制的整数
    • 传送门:当radix参数不传时会有什么表现
  • 如果被解析参数的第一个字符无法被转化成数字类型,则返回NaN

传送门:MDN上关于 parseInt 的解释

看几个栗子:

parseInt("1",0)  // 以10进制转换,返回1
parseInt("2",1)  // 基数非法,返回NaN
parseInt("3",2)  // 以二进制为基数进行转换,因为第一个参数为"3",非二进制数,则第一个参数非法,返回NaN
parseInt("11",2)  // 以二进制为基数进行转换,第一个参数为合法的二进制,返回3

map

map的语法

传送门:MDN上关于 map 的解释

map对数组的每个元素调用定义的回调函数并返回包含结果的数组

array.map(callback(currentValue, index, arr), thisValue)
  • callback:必选函数。数组中的每个元素都会执行这个函数
    • currentValue必选。当前元素的值。
    • index:可选。当前元素的索引值
    • arr:可选。当前元素属于所在的数组对象
  • thisValue:可选。对象作为该执行回调时使用,传递给函数,用作“this”的值。如果省略了thisValue,“this”的值为“undefined”

当parseIn遇到map

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

猜猜会打印什么?

答案:[1, NaN, NaN]

该结果是由于map的回调函数而导致的,从上面map的用法不难看出,map第一个回调函数默认自带三个参数

回到上面的问题:

["1", "2", "3"].map(parseInt)  
// 在这里callback相当于是parseInt,于是就有了以下的展开式:
// 展开时相当于:
parseInt(1, 0, [1,2,3]);
parseInt(2, 1, [1,2,3]);
parseInt(3, 2, [1,2,3]);

结合上面parseInt的用法,就很容易得出为什么打印 [1,NaN,NaN]