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

180 阅读2分钟

前言

这是一道经常会遇到的前端面试题,[1,2,3]脱口而出,结果被虐的渣都不剩,答案是:[1, NaN, NaN]

why 为什么会是这个结果

首先我们来熟悉下map函数

map函数

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

语法

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])

参数

callback 生成新数组元素的函数,使用三个参数:

  • currentValue callback 数组中正在处理的当前元素。
  • index可选 callback 数组中正在处理的当前元素的索引。
  • array可选 map 方法调用的数组。
  • thisArg可选 执行 callback 函数时值被用作this
返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。

再来就是说下parseInt函数

parseInt函数(重点关注)

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数, radix 是2-36之间的整数,表示被解析字符串的基数

语法

parseInt(string, radix)

参数
  • string 要被解析的值。如果参数不是一个字符串,则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。
  • radix可选 从 2 到 36,表示字符串的基数。例如指定 16 表示被解析值是十六进制数。请注意,10不是默认值!
返回值

从给定的字符串中解析出的一个整数。

例子分析

['1','2','3'].map(parseInt)实际上可以理解为

['1','2','3'].map((v, i, arr) =>parseInt(v,i)),依次输出:

  • parseInt('1', 0) // 1
  • parseInt('2', 1) // NaN
  • parseInt('3', 2) // NaN

排除疑惑

  • 所以根据parseInt的第二个参数radix的进制范围,我们知道 parseInt('2', 1)为什么等于NaN
  • 那么为什么parseInt('1', 0)等于1呢?其实MDN上面有相关的介绍 所以当radix为0,radix会被假定为10(十进制)来做运算,所以parseInt('1', 0) 等于 1
  • 那为什么parseInt('3', 2)等于NaN呢?radix 为 2,用2进制来解析,而二进制中应以 0 和 1 开头,不存在 3,所以结果为 NaN