【每日一题】[‘1‘, ‘2‘, ‘3‘].map(parseInt) what & why ?

关于JS的映射你所要知道的:

.map()方法

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

map()方法可以传入一个函数作为参数，例如下面的例子：

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles数组的值为： [2, 8, 18]
// numbers数组未被修改： [1, 4, 9]

通常情况下，map()方法中的 callback 函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。

就如本文标题 ["1", "2", "3"].map(parseInt)  的输出是什么？
我们期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN].

这里补充说明一下parseInt()函数。

parseInt()

parseInt() 函数解析一个字符串参数，并返回一个指定基数的整数 (数学系统的基础)。

const intValue = parseInt(string[, radix]);

string 要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。

radix 一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。默认为10。 返回值 返回一个整数或NaN
直接上例子可能会比较明了:

parseInt(100); // 100,不指定第二个参数默认为10，即十进制
parseInt(100, 10); // 100
parseInt(100, 2); // 4，参数为2即按照二进制进行解析结果为十进制的4

注意： 在radix为 undefined，或者radix为 0 或者没有指定的情况下，JavaScript 作如下处理：

• 如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制)。
• 如果字符串 string 以"0"开头, 基数是8（八进制）或者10（十进制），那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10，但是并不是所有的浏览器都遵循这个规定。因此，永远都要明确给出radix参数的值。
• 如果字符串 string 以其它任何值开头，则基数是10 (十进制)。

回到最初的起点

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

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

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

即返回的值分别为：

parseInt('1', 0) // 1
parseInt('2', 1) // NaN
parseInt('3', 2) // NaN, 3 不是二进制

所以才会有不符合我们所预期的结果

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

如何解决？

方法一：使用Number()，代替parseInt()

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

方法二：使用函数传参，设置parseInt的基数为10

['1', '2', '3'].map(function(num) {
  return parseInt(num, 10);		// [1, 2, 3]
}); 

关于Number()

方法1提到了使用Number()，代替parseInt()，那么Number()又有什么特殊的功效呢？
使用 Number() 函数可以将将字符串或其他值转换为数字类型。
如果无法转换该值，它将返回NaN。
如果参数是 Date 对象，Number() 返回从 1970 年 1 月 1 日至今的毫秒数。
例如：

Number('123')  // returns the number 123
Number('123') === 123  // true
Number("unicorn")  // NaN
Number(undefined)  // NaN

Number与parseInt对比

直接看例子，清晰明了

//当字符串只有数字组成
var numbeTrans="9898";
alert(parseInt(numberTrans));  //9898
alert(Number(numberTrans));   //9898

//当数字只有字母组成
var numbeTrans="abab";
alert(parseInt(numberTrans));  //NaN
alert(Number(numberTrans));  //NaN

//当字符串由字母与数字组成
var numbeTrans="123ab";
alert(parseInt(numberTrans));  //123
alert(Number(numberTrans));  //NaN

//当字符串为小数时
var numbeTrans="123.123";
alert(parseInt(numberTrans));  //123
alert(Number(numberTrans));  //123.123

//当字符串为空null时
var numbeTrans="null";
alert(parseInt(numberTrans));  //NaN
alert(Number(numberTrans));   //0

//当字符串为空“ ”时
var numbeTrans=" ";
alert(parseInt(numberTrans));  //NaN
alert(Number(numberTrans));   //0