面试题：[1,2,3].map(parseInt)结果是什么

引入

有这样一道前端面试题：

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

我们先说一下结果：[1, NaN, NaN]

前言

我们先看一下map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

const arr=[1,2,3]
const result = arr.map(function(item){
  return 1
})
console.log(result)

这里返回的是 [1, 1, 1]
这就是map的基础用法

 const arr=[1,2,3]
 const result = arr.map(function(item,index){
   console.log(item,index)
 })

浏览器显示结果

//  1 0
//  2 1
//  3 2

map 函数的 callback function 接收两个参数
第一个是item，代表每一项的内容，第二个是index，代表每一项的当前下标

现在再看看parseInt

parseInt() 函数可解析一个字符串，并返回一个整数。
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
当忽略参数 radix , JavaScript 默认数字的基数如下:
如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

console.log(parseInt('123ABC')) //123
console.log(parseInt('AA123ABC'))  //NaN
console.log(parseInt('2333'))  //2333
console.log(parseInt(2333))  //2333

这是parseInt的基本用法
把字符串或者数字转换成 Int (整型)
如果字符串开头不是数字，则返回NaN
如果是数字，则返回数字那一段
同时，parseInt函数还支持第二个参数

radix，从 2 到 36，代表该进位系统的数字。例如说指定 10 就等于指定十进位。请注意，通常预设值不是 10 进位！（来自MDN）

parseInt('123', 5) // 将’123’看作5进制数，返回十进制数38 => 1*5^2 + 2*5^1 + 3*5^0 = 38

所以 parseInt(第一个参数无论是什么， 1) // NaN

如果radix是0 或者 undefined，那么它就是正常parseInt

如果radix不再 2 - 36 这个区间，都返回 NaN

总结

parseInt
以第二个参数为基数来解析第一个参数字符串，通常用来做十进制的向上取整（省略小数）如：parseInt(2.7) //结果为2

参考文章

[‘1’,‘2’,‘3’].map(parseInt)即

parseInt(‘1’,0);radix 为 0，parseInt() 会根据十进制来解析，所以结果为 1；

parseInt(‘2’,1);radix 为 1，超出区间范围，所以结果为 NaN；

parseInt(‘3’,2);radix 为 2，用2进制来解析，应以 0 和 1 开头，所以结果为 NaN。

写法1
const arr=[1,2,3]
const result = arr.map(function(item,index){
  return parseInt(item,index)
})
console.log(result)

写法2
console.log([1,2,3].map(parseInt))

上面那一块跟下面那一块是等价的

面试题：[1,2,3].map(parseInt)结果是什么

引入

前言

总结

猜你喜欢