这道JS高频面试题你掌握了吗?_加里·伯恩哈德例子-优快云博客

此文借鉴瓶子君的文章，原文链接： https://mp.weixin.qq.com/s/4E9ZKR2SFSeoCNiZ4JqGZg

['1', '2', '3'].map(parseInt) 输出结果是什么 ?
这是在 Daily-Interview-Question 项目看到一个比较有意思的题目。
主要是讲 JS 的映射与解析。

早在 2013 年, 加里·伯恩哈德就在微博上发布了以下代码段：

['10','10','10','10','10'].map(parseInt);
// [10, NaN, 2, 3, 4]

parseInt() 函数

定义和用法
可解析一个字符串，并返回一个整数。

语法

parseInt(string, radix)

参数	描述
string	必需。要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

返回值
返回解析后的数字。

说明
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

举例，如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

提示和注释
注释：只有字符串中的第一个数字会被返回。

注释：开头和结尾的空格是允许的。

提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

map()

map() 方法创建一个新数组，数组中的每个元素都调用一个提供的函数，新数组中的元素就是执行这个函数后返回的结果。

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

可以看到callback回调函数需要三个参数, 我们通常只使用第一个参数 (其他两个参数是可选的)。
currentValue是callback 数组中正在处理的当前元素。
index可选, 是callback 数组中正在处理的当前元素的索引。
array可选,是callback map 方法被调用的数组。
另外还有thisArg可选, 执行 callback 函数时使用的this 值。

让我们回到例子上：
['1', '2', '3'].map(parseInt)

对于每个迭代map, parseInt()传递两个参数: 字符串和基数。
所以实际执行的的代码是：

['1', '2', '3'].map((item, index) => {
    return parseInt(item, index)
})

即返回的值分别为：

parseInt('1', 0) // 1
parseInt('2', 1) // NaN，radix 需要在 2 和 36 之间
parseInt('3', 2) // NaN, 3 不是二进制

所以：

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

由此，加里·伯恩哈德例子也就很好解释了，这里不再赘述。

如果你就是想要循环访问字符串数组, 那要怎么办？使用 map()时然后把它换成数字就好了

['10','10','10','10','10'].map(Number);
// [10, 10, 10, 10, 10]