[‘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;
});

最后祝大家：

/*
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 
 *            佛祖保佑       永不宕机     永无BUG
 */