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

·  阅读 392

一道在腾讯和百度的面试中,都出现过的题:
['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),问题就在于返回的 NaNtrue 还是 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'
      复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改