在js数组的map方法中使用parseInt详解

1.我们先看一下这个经典题目

从代码量上看是非常的简洁，但是知识点可是一点都不少，下面我就这道题做一个简单的解析本人水平有限，仅供各位掘友参考，如有错误，欢迎大家给我指正

let arr = [1, 2, 3, 4];
arr = arr.map(parseInt);
console.log(arr);//=> 1,NAN,NAN,NAN
复制代码

2.解题前置知识了解

我第一次看到答案的时候也是一脸懵逼，冥思苦想而不得其解，后来经过多方查找资料才得以理解，首先我们需要了解一些前置知识，才能理解这一道题目的重点

2.1数组中的map函数理解

map是数组原型上的一个方法

//所有的数组实例都可以调用它
Array.prototype.map === [].map;
复制代码

map函数语法

/*
*params:
*   callback生成新数组元素的函数，使用三个参数：
*       currentValue：callback 中正在处理的当前元素。
*       index：callback 数组中正在处理的当前元素的索引。(可选)
*       array: map 方法调用的数组。（可选）
*   return 返回值是回调函数的结果组成了新数组的每一个元素
*/
var new_array = arr.map(function callback(currentValue, index, array) {
 // Return element for new_array 
})
复制代码

map() 方法的作用是遍历调用它数组的每一个元素，根据每个元素都调用一次提供的函数后的返回值组成一个新的数组。下面给出一个简单的实例代码

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
复制代码

2.2 window下的parseInt（）函数理解

parseInt(string, radix) 将一个字符串 string 转换为 radix 进制的整数， radix 为介于2-36之间的数。

parseInt是window下的一个方法，所以再js中可以直接调用
parseInt的语法

/*
*params :
*   string：要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用  ToString 抽象操作)。字符串开头的空白符将会被忽略。
*   radix(可选)：从 2 到 36，代表该进位系统的数字。例如说指定 10 就等于指定十进位。请注意，通常预设值不是 10 进位！
*/
parseInt(string, radix);
复制代码

radix参数详解

radix存在以下特殊情况

如果 radix 是 undefined、0或未指定的，JavaScript会假定以下情况：
- 如果输入的 string以"0x"或"0x"（一个0，后面是小写或大写的X）开头，那么radix被假定为16，字符串的其余部分被解析为十六进制数。
- 如果输入的 string以"0"（0）开头，radix被假定为8（八进制）或10（十进制）。具体选择哪一个radix取决于实现。ECMAScript5澄清了应该使用10(十进制)，但不是所有的浏览器都支持。因此，在使用 parseInt 时，一定要指定一个 radix。
- 如果输入的 string以任何其他值开头，radix是10(十进制)。如果第一个字符不能转换为数字，parseInt会返回 NaN。
radix 小于 2 或大于 36（0除外），或第一个非空格字符不能转换为数字。

3.解题

掌握了以上只是，再看这道题就没那么不容易理解了

arr = arr.map(parseInt);//
//这句话实际的执行过程如下：
parseInt('1',0);//=>radix为特殊值'0',按十进制转换==>1
parseInt('2',1);//=>radix为1，不满足2-36的范围==>NAN
parseInt('3',2);//=>radix为2，按二进制来解析字符串3，3不符合二进制数字规范，==>NAN
parseInt('4',3);//=>radix为3，按三进制来解析字符串4,4不符合二进制数字规范，==>NAN
复制代码

现在是不是觉得这道题so easy ，妈妈再也不用担心我的编程啊哈哈..(手动滑稽)

4.拓展题

现在是不是觉得自己有以后遇到这种题再也不怕啦，那咱们再来试一试

var xs = ['10', '10', '10'];

xs = xs.map(parseInt);

console.log(xs);  // 输出结果为保密，先自己想一想，然后在试一试，希望你能得到正确的答案！
复制代码

5.留一个拓展，进制的转换（有时间在总结）

来源：oschina

链接：https://my.oschina.net/u/4274857/blog/3278545

标签

javascript

ECMAScript