第 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]
原文地址:https://www.cnblogs.com/lyplucky/p/11190064.html