第 2 期：['1', '2', '3'].map(parseInt) what & why

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.
// 但实际上,parseInt可以有两个参数.第二个参数是进制数.
// 可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 
// 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

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

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 意料之中的结果

// 也可以使用简单的箭头函数，结果同上
['1', '2', '3'].map( str => parseInt(str) );

// 一个更简单的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 与`parseInt` 不同，下面的结果会返回浮点数或指数:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

Array.prototype.map()

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

callback 函数会被自动传入三个参数：

数组元素，元素索引，原数组本身。

map 不修改调用它的原数组本身

参数

• callback

  生成新数组元素的函数，使用三个参数：

  currentValue

  callback 数组中正在处理的当前元素。

  index可选

  callback 数组中正在处理的当前元素的索引。

  array可选

  callback map 方法被调用的数组。

• thisArg可选

  执行 callback 函数时使用的this 值。(默认全局对象)

返回值

一个新数组，每个元素都是回调函数的结果

parseInt

parseInt(string, radix)

string为字符串，radix为介于2-36之间的数,默认10。

使用者告诉这个函数string（比如11）是radix（比如2）进制的，函数将固定返回string以十进制时显示的数（3）

返回值：

如果被解析参数的第一个字符无法被转化成数值类型，则返回 NaN。

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

例：

1.

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

解析：

1. parseInt('1', 0) //radix为0时，且string参数不以“0x”和“0”开头时，按照10为基数处理。这个时候返回1
2. parseInt('2', 1) //基数为1（1进制）表示的数中，最大值小于2，所以无法解析，返回NaN
3. parseInt('3', 2) //基数为2（2进制）表示的数中，最大值小于3，所以无法解析，返回NaN

2.

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

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