['1','2','3'].map(parseInt)的返回值是什么？你真的了解基数radix吗

['1', '2', '3'].map(parseInt) 的返回值是什么？很多人的第一反应是 [1, 2, 3] ，但是结果并非如此。

真正的结果是 [1, NaN, NaN] 为什么？我们慢慢往下看：

map 方法：

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

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测、不会改变原始数组。

const arr = [1, 4, 9, 16];
const map = array1.map(x => x * 2);
console.log(map); // [2, 8, 18, 32]

map 方法可以接受一个函数，来遍历处理数组中的元素：

语法：

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

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

函数（callback）可以接受三个参数：

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

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

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

简单示例：

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

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

parseInt 函数：

parseInt(string, radix) 解析字符串，并返回指定基数的十进制整数， radix 是 2-36 之间的整数，表示被解析字符串的基数。

语法：

parseInt(string, radix);

parseInt() 可以接受两个参数：

string 要被解析的值。如果参数不是一个字符串，则将其转换为字符串，字符串开头的空白符将会被忽略。

radix 可选：

• 表示要解析的数字的基数。该值介于 2 ~ 36 之间。
  

• 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 "0x" 或 "0X" 开头，将以 16 为基数。
  

• 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

praseInt('1') // 1
parseInt('1', 0) // 111
// radix 为空或 0 的时候，按 16/8 进制解析，但是如果开头是 1-9 就按 10 进制解析
parseInt('2', 1) // NaN ( radix参数小于 2 或者大于 36，则 parseInt() 将返回 NaN)
parseInt('3', 2)（radix的参数是 2，所以按二进制解析，而二进制最大为 1，只能为 0、1, 3 显然超了，转换不了，所以是NaN）
var num1 = parseInt("10",2); //2 (按二进制解析)
var num2 = parseInt("10",8); //8 (按八进制解析)
var num3 = parseInt("10",10); //10 (按十进制解析)
var num4 = parseInt("10",16); //16 (按十六进制解析)

看到这里，大家可能会说了，这个 radix 可不就是进制吗！

别着急，我们在看一个示例：

既然 radix 代表进制，6 进制里为什么能有 7，还有 8 ？，8 进制为什么能有 9 ？

看来事情并没有那么简单，我们来看一下。

radix 基数是什么：

百度百科给出的解释是：

基数（cardinal number）在数学上，是集合论中刻画任意集合大小的一个概念。两个能够建立元素间一一对应的集合称为互相对等集合。例如 3 个人的集合和 3 匹马的集合可以建立一一对应，是两个对等的集合。

称两个集 M 与 N 为有相同基数，即|M|=|N|，若存在双射φ:M→N。且|M|≤|N|，若存在单射φ:M→N。

越看越懵逼了呢，不去管他了！

我们再看几个示例：

parseInt('45', 5) 当解析 45 时，4 属于范围内，所以得到 4，但是 5 不属于，所以走到这里直接把后面抛弃掉，相当于 parseInt('4', 5); ---最终得到 4。

parseInt('454', 5) 当解析 454 时，4 属于范围内，所以得到 4，但是 5 不属于，所以走到这里直接把后面全部抛弃掉， 相当于 parseInt('4', 5); ---最终得到 4。 

parseInt('44', 5) 当解析 44 时，4 属于范围内，后面那个 4 还是在范围内，所以，算作一个整体，属于正常，不进行任何操作   根据进制算法，最终算出，从右往左 4*5^0+4*5^1 = 24。

parseInt('445', 5) 当解析 445 时，4 属于范围内，后面那个 4 还是在范围内， 但是在后面的 5 不属于， 所以，5 抛弃掉，只取 44，相当于 parseInt('44', 5); ， 根据进制算法，最终算出，从右往左 4*5^0+4*5^1 = 24。

parseInt('544', 5) 当解析 544 时，5 直接不属于范围内，所以全部抛弃掉，只取 ''， 相当于 parseInt('', 5); 返回 NaN。

parseInt('5', 5) 当解析 5 时，5 直接不属于范围内，所以全部抛弃掉，只取 ''， 相当于 parseInt('', 5); 返回 NaN。

看到这，应该可以理解 radix 的含义了吧，并不是简单的进制计算。

未经允许不得转载：Web前端开发资源网 » ['1','2','3'].map(parseInt)的返回值是什么？你真的了解基数radix吗

推荐阅读：

Linux下如何重置MySQL密码

QQ聊天插件，鼠标划入划出显示隐藏效果。

jQuery实现本地input选择图片实时显示

使用 swiper 轮播插件遇到的问题及解决方法

Photoshop保存ICO格式插件 ICOFormat.8bi