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

一道在腾讯和百度的面试中，都出现过的题：
['1', '2', '3'].map(parseInt)、['1', '2', '3'].filter(parseInt) 结果是什么？

先看结果：

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

再看为什么：

1. map 方法的 callback 函数参数是什么？

   

2. parseInt 参数

   

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

   ['1', '2', '3'].map((...args) => { console.log(args) })
   // ["1", 0, Array(3)]
   // ["2", 1, Array(3)]
   // ["3", 2, Array(3)]
   ['1', '2', '3'].map(parseInt) // 其中的 parseInt 执行为
   parseInt('1', 0) // radix为 0 时，会默认为是10，用10进制转换，结果为 1
   parseInt('2', 1) // radix为 1 时，无效，parseInt() 返回 NaN
   parseInt('3', 2) // radix为 2 时，二进制仅支持 0 和 1，返回 NaN
   

4. 再看 filter 参数

   

5. 再看 ['1', '2', '3'].filter(parseInt)，问题就在于返回的 NaN 是 true 还是 false，那请看 Falsy - MDN，结论是返回 false，所以本题结果是：

   ['1', '2', '3'].filter(parseInt) // ["1"]
   

结论：主要考察一些不常用的参数。

延伸一下：

1. ['1', '2', '3'].map(parseFloat)、['1', '2', '3'].map(Number) 结果是什么？

   

   ['1', '2', '3'].map(parseFloat) // [1, 2, 3]
   ['1', '2', '3'].map(Number) // [1, 2, 3]
   // more
   ['1', '1', '0'].map(parseInt) // [1, NaN, 0]
   ['1', '1', '0'].filter(parseInt) // ["1"]
   

2. '1 2 3'.replace(/\d/g, parseInt) 结果是什么？

   1. 先看 replace 的参数：

      

   2. 再看其中 function 的参数：

      '1 2 3'.replace(/\d/g, (...args) => { console.log(args) })
      // ["1", 0, "1 2 3"]
      // ["2", 2, "1 2 3"]
      // ["3", 4, "1 2 3"]
      

   3. 回归本题

      '1 2 3'.replace(/\d/g, parseInt) // 其中 parseInt 执行为
      parseInt('1', 0)
      parseInt('2', 2)
      parseInt('3', 4)
      // 所以结果是: '1 NaN 3'