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

结果

我们期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN].

测试

我们先做一个demo例子

function testFunc() {
  console.log(...arguments);
  console.log("arguments['0']-->", typeof(arguments['0']), arguments['0']);
  console.log("arguments['1']-->", typeof(arguments['1']), arguments['1']);
  return parseInt(arguments['0'], arguments['1']);
}
let arrTest = ['1','2','3'].map(testFunc);
console.log('arrTest---->', arrTest);

vscode里运行代码run code， 结果如下

分析

关于这个问题的描述具体可以参考使用技巧案例：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

parseInt

我们先来看看parseInt这个函数

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt

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

1、参数

parseInt(string, radix);

• string: 必需。要被解析的值。
• radix：可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

parseInt('123', 5) // 将'123'看作5进制数，返回十进制数38 => 1*5^2 + 2*5^1 + 3*5^0 = 38

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

当忽略参数 radix , JavaScript 默认数字的基数如下:

   如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。

   如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。

   如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

2、注意

   只有字符串中的第一个数字会被返回。

   开头和结尾的空格是允许的。

   如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。

   在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数。

map

定义：map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

语法：

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

参数：

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

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

       index：可选，callback 数组中正在处理的当前元素的索引。

       array：可选，map 方法调用的数组。

   thisArg：可选，执行 callback 函数时值被用作this。

callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。

querySelectorAll 应用：

如何去遍历用 querySelectorAll 得到的动态对象集合。

var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});