parseInt引起的思考

步行去公司的路上，我想着顺便刷刷知识点，然后看到了一条题目。

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

我想了下选了[1, 2, 3], 结果显示错误 。正确答案是[1, NaN, NaN]。

What？Why?

迅速在MDN中搜索parseInt。parseInt函数接受两个参数，string, radix。

其中radix指的是2-36之间的一个整数，表示进制。指的是string代表的进制。

下面来讲讲具体的使用

parseInt函数将它的第一个参数转换成字符串，解析它，并且返回一个整数对象或者NaN。当返回的值是一个integer的时候，integer应该是字符串基于radix的值 。

    parseInt('A',16)
    =>1
    parseInt('017', 8)
    =>15
    parseInt('011', 2)
    =>3

一些数字可能会带有e，比如6.022e23(科学记数法) 。当使用parseInt函数来转换非常小或者非常大的时候常常可能会导致一些不好的结果。而且parseInt函数不应该作为Math.floor()函数的替代。

    parseInt(6.022e23)
    =>6
    parseInt(6.022e-23)
    =>6
    parseInt(6.022e2)
    =>602

当radix的值为Undefined或者0(或者不写),JavaScript会按照下面的规则进行处理:

• 如果输入以’0x’或者’0X’开头, 则假设radix为16。
• 如果输入以’0’开头, 则radix为8或者10 。具体选择哪个是独立实现的，es5的话选择的是10，但并不是所有的浏览器都支持。
• 如果输入是以其他的任意字符开头，则为10进制。

    //begins with '0x' or '0X'
    parseInt('0x10')
    =>16
    //begins with '0'
    parseInt('080')
    =>80 (firefox, edge, chrome)
    //begins with any other character
    parseInt('A')
    =>NaN
    parseInt('122')
    =>122

更加严格的实现

    const parseIntStrict = function(input) {
        if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value)) {
            return Number(value);
        }
        
        return NaN;
    }

    parseIntStrict('421');
    =>421
    parseIntStrict('+421');
    =>421
    parseIntStrict('-421');
    =>-421
    parseIntStrict('Infinity');
    =>Infinity
    parseIntStrict('421e+0');
    =>NaN
    parseIntStrict('1.61803398875');
    =>NaN

回到题目上来，map()实际上传的是三个参数element,index,array,那么[1,2,3].map(parseInt)实际的执行是

    parseInt('1', 0);
    parseInt('2', 1);
    parseInt('3', 2);

按照上面的规则来进行解析

    parseInt('1', 0)
    /**
     * 此时radix为0，且输入为以任何其他字符开头 ，则认为radix为10。
     * 即：
     *  parseInt('1', 0) == parseInt('1', 10)
     *  => 1
     */

    parseInt('2', 1)
    /**
     * 此时radix为1, 但是radix的进制范围时2 ~ 36
     * 即:
     *  parseInt('2', 1)
     *  => NaN
     */

     parseInt('3', 2)
     /**
      * 此时radix为2，但是二进制中只能为0、1。
      * 即：
      *  parseInt('3', 2)
      *  => NaN
      */

至此，parseInt函数简单分析完毕，一道知识点也是可以值得深入探究的。