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

2017-10-10 | 阅读：次

javascript-puzzlers 被称为 javascript 界的专业八级测验，感兴趣的 jser 可以去试试。

自己亲测了下，只对了一半多一点… 路漫漫其修远兮，吾将上下而求索~ js的路还有好远~~~

进入正题：

在 javascript 中 ['1', '2', '3'].map(parseInt) 为何返回不是 [1, 2, 3] 却是 [1, NaN, NaN]？

我们首先回顾一下 parseInt() 个 map() 两个函数的用法：

parseInt() 函数可解析一个字符串，并返回一个整数。

parseInt(string, radix)

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

如果parseInt(string,radix)中的, 小于10的string数字大于等于非零的radix也会返回NaN，还有其它 NaN情况就控制台打印试试~~

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

对数组的每个元素调用定义的回调函数并返回包含结果的新数组。

arr.map(callback[,thisArg]);

参数	描述
arr	必需。一个数组对象。
callback	必需。必需。一个接受最多三个参数的函数。对于数组中的每个元素，`map` 方法都会调用 `callback` 函数一次。这三个参数分别为： `currentValue` callback的第一个参数，数组中当前被传递的元素。 `index` callback的第二个参数，数组中当前被传递的元素的索引。 `array` callback的第三个参数，调用 map 方法的数组。
thisArg	可选。callback 函数里的`this`值默认是`window`对象

var parseInt = function (string, radix, others) {
    return string + '-' + radix + '-' + others;
};
['1','2','3'].map(parseInt);

返回结果如下：

为什么会得到这个数组?

以数组第一个字符串为例，1-0-1,2,3是因为map的callback返回参数分别是currentValue：1，index：0，array：[1,2,3]（此处被转义）。其他同上。

因为parseInt函数接收2个参数，string，radix，如果map函数返回了这两个参数，不管意义是否是所期望的，都会将其作为参数执行。

以1-0-1,2,3为例，map(parseInt)中，parseInt作为callback函数执行的将是：parseInt('1',0)（前面那个数字1自动被转换为字符串1），其他同上。

看下面的执行函数结果:

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);
注意：这里的 parseInt 是没有被重新定义过的。

所以得到1，NaN，NaN;

那我们如何正常获取到map返回的整数的值呢？？

方法一：使 parseInt基数默认为10。

function returnInt(element) {
    return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]

方法二：使用Number函数

['1', '2', '3'].map(Number); // [1, 2, 3]

方法三：使用箭头函数

['1', '2', '3'].map(str => parseInt(str)); // [1, 2, 3]

李元成