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

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

输出：[1, NaN, NaN]
考察， map方法、parseInt方法。

打印[‘1’, ‘7’, ‘11’].map(parseInt)结果

  1. ['1', '7', '11'].map(parseInt)
  2. // (3) [1, NaN, 3]

总结：

1. map方法

  1. ['1', '2', '3'].map(function(element, index, array) {
  2.     console.log(element, index, array);
  3. })
  4.  // 1 0 (3) ['1', '2', '3']
  5.  // 2 1 (3) ['1', '2', '3']
  6.  // 3 2 (3) ['1', '2', '3']

2. pareseInt

等价于

  1. ['1', '2', '3'].map(function(element, index, array) {
  2.     console.log(element, index, array);
  3.     return Number.parseInt(element, index, array);
  4. })
  5. // 1 0 (3) ['1', '2', '3']
  6. // 2 1 (3) ['1', '2', '3']
  7. // 3 2 (3) ['1', '2', '3']
  8. // (3) [1, NaN, NaN]

参数radix

image.png
parseInt(string, radix); 将radix进制的string转为十进制。因此，需要先校验合法性。

  1. Number.parseInt(2, 1)
  2. // NaN
  3. Number.parseInt(3, 2)
  4. // NaN

扩展:

parseInt和parseFloat的区别

parseInt

parseInt 会忽略字符串前面的空格，直到找到第一个非空格字符，如果第一个字符是数字字符会继续解析第二个字符，直到遇到非数字字符停止

parseInt可以识别各种整数格式，如：8进制，10进制，16进制，所以可以接收第二个参数表示要转换为多少进制。

  1. var num = parseInt('0xAF', 16)
  2. //175

面试题

  1. [1,2,3].map(parseInt)
  2. //[1, NaN, NaN]

parseInt原理

  1. 首先，str 会被转为字符串，然后脱去左边的空白字符。
  2. 其次，取得并脱去 str 的符号（+ 或 -）。如未提供，符号为正。
  3. radix 的处理比较复杂，会将 radix 其转为 32Int。
  4. 对 str 从左往右，取出尽可以多的合法字符，转换后带上符号返回。 需要特别注意的是，如果 radix 为 16，则不包含开头的 0x 或 0X。如合法字符的长度为 0，返回 NaN。

    parseFloat

    parseFloat 会忽略字符串前面的空格，从第一个字符开始解析直到遇见一个无效的浮点数字字符为止(也就是字符串中第一个小数点是有效的而字符串中的第二个小数点是无效的)

parseFloat只能解析10进制值，所以没有第二个参数

  1. var num = parseFloat('0xAF')
  2. //0

面试题

  1. ['1', '2', '3'].map(parseFloat);
  2. // (3) [1, 2, 3]
  4. ['1', '7', '11'].map(parseFloat)
  5. // (3) [1, 7, 11]

parseFloat原理

parseFloat() 和 parseInt() 类似，也会忽略左边的空格，有效数字字符长度为 0，也返回 NaN。
不同的是，parseFloat() 不支持进制，且支持科学计数法，支持 Infinity，省略小数的前导 0 也是允许的。
image.png