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

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

首先，思考一下答案是什么？为什么？

答案

[1, NaN, NaN]

解题开始

数组map方法解析

1. 定义

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

2. 语法

array.map(function(currentValue,index,arr), thisValue)

3. 参数说明

参数	说明
function(currentValue,index,arr)	必须。函数，数组中的每个元素都会执行这个函数。
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

*function(currentValue,index,arr)参数说明

参数	说明
currentValue	必需，当前元素的值。
index	可选，当前元素的索引。
arr	可选，当前元素所属的数组对象

parseInt方法解析

1. 定义

parseInt()解析一个字符串，返回一个整数

2. 语法

parseInt(string, radix)

3. 参数说明

参数	说明
string	必需，要被解析的字符串
radix	可选，要被解析的数字的基数，值为2～36之间。如果该参数为空或者为0时，则数字以10为基数，‘0x’或者‘0X‘开头的以16为基数，以‘0’开头的则未定，以8或者16为基数。如果该参数小于2或大于36，则返回结果为NaN。

4. 返回值
   解析后的数字

过程

从上述两个解析我们可以看到，数组[‘1’, ‘2’, ‘3’]在map遍历过程将当前值和当前值的索引作为参数传递给了parseInt()进行解析，过程如下：

代码['1', '2', '3'].map(parseInt)实际上如下：
['1', '2', '3'].map((item, value, arr) => parseInt(item, index))

'1': parseInt('1', 0) => 1
'2': parseInt('2', 1) => NaN
'3': parseInt('3', 2) => NaN

故，['1', '2', '3'].map(parseInt)的返回结果为[1, NaN, NaN]

优化/正确书写

那么，在平时的开发中，我们可以如何正确书写来得到我们想要的结果呢？
我们只要重新定义一个函数，传递特定的值给到parseInt()，再将这个函数作为map的第一个参数就可以啦。

['1', '2', '3'].map(item => parseInt(item))
// 返回结果：[1, 2, 3]
['1', '2', '3'].map((item, index) => parseInt(item) * index)
// 返回结果：[0, 2, 6]