Js中的 parseInt

Posted 2023-04-04 upward_tomato

start

• 先看一个题目['1','2','3'].map(parseInt)

• 乍一看，我写下答案：[1,2,3]

• 控制台运行：['1',NaN，NaN]

• 为什么？map函数我很熟悉了，那么问题出在哪里？大概率出在 parseInt上了

回顾一下map

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。总共就两个参数，一个是回调函数，一个是指定对应的this。

1.第一个参数：回调函数

var newArr = [1, 2, 3].map((item, index, arr) => 
  console.log(item, index, arr)
  return item * 2
)
/* 
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
*/

console.log(newArr) // [ 2, 4, 6 ]

回调函数的三个参数依次为：1.当前正在处理的元素；2.当前元素的索引；3.调用map的数组；

2.第二个参数：指定this

var obj =  name: 'obj对象' 

var newArr = [1, 2, 3].map(function (item, index, arr) 
  return item * 2 + this.name
, obj)

console.log(newArr) // [ '2obj对象', '4obj对象', '6obj对象' ]

这里稍微注意下，这里不能使用箭头函数的形式，因为箭头函数的this没有自己的this对象，内部的this就是定义时上层作用域中的this。

学习一下 parseInt

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

怎么理解：

• 将一个字符串A转换成数字B;
• 第一个参数：需要转换的字符串A;
• 第二个参数：表示进制的基数（用我自己的大白话讲就是：解析字符串A的时候，把A当做多少进制的数字。）

正常的使用：

console.log(parseInt('10')) // 10
console.log(parseInt('10a')) // 10

console.log(parseInt('111', 2)) // 7
console.log(parseInt('A12', 16)) // 2578

注意事项：

对于 parseInt 第一个参数。如果参数不是一个字符串，则将其转换为字符串 (使用 ToString抽象操作)。字符串开头的空白符将会被忽略。

对于 parseInt 第二个参数。从 2 到 36 的整数，表示进制的基数。例如指定 16 表示被解析值是十六进制数。如果超出这个范围，将返回 NaN。假如指定 0 或未指定，基数将会根据字符串的值进行推算。注意，推算的结果不会永远是默认值 10！文章后面的描述解释了当参数 radix 不传时该函数的具体行为。

1. 第一个参数如果不是字符串，会被转换为字符串，且开头空白符会被忽略。

console.log(parseInt(10)) // 10
console.log(parseInt('            10')) // 10
console.log(parseInt('  11   22')) // 11 /* 如果字符之间有空格，读取第一个 */	

2. 第二个参数，取值范围为 2-36 的整数，如果超出这个范围，将返回 NaN。

console.log(parseInt('10', 1)) // NaN
console.log(parseInt('10', 2)) // 2
console.log(parseInt('10', 36)) // 36
console.log(parseInt('10', 37)) // NaN

3. 第二个参数假如指定 0 或未指定，基数将会根据字符串的值进行推算。

console.log(parseInt('10')) // 10
console.log(parseInt('010')) // 10   /* 某些浏览器这里会解读成 8进制 */
console.log(parseInt('ox10')) // NaN


/* 第二个参数如果是字符串，会被尝试读取数字 */
console.log(parseInt('10', '36')) // 36

/* **我实践的结果：** 第二个参数如果是字符串，会被尝试读取数字，无法读取，默认基数将会根据字符串的值进行推算*/
console.log(parseInt('10', '7tamato')) // 10
console.log(parseInt('10', 'tamato7')) // 10
console.log(parseInt('0x10', 'tamato7')) // 16

估算的方式：

1. 如果输入的 string 以 0x 或 0X（一个 0，后面是小写或大写的 X）开头，那么 radix 被假定为 16，字符串的其余部分被当做十六进制数去解析。
2. 如果输入的 string 以 “0”（0）开头，radix 被假定为 8（八进制）或 10（十进制）。具体选择哪一个 radix 取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制)，但不是所有的浏览器都支持。因此，在使用 parseInt 时，一定要指定一个 radix。
3. 如果输入的 string 以任何其他值开头，radix 是 10 (十进制)。

4. 解析的字符串包含的数字超过 基数，返回NaN

console.log(parseInt('3', 2)) // NaN
console.log(parseInt('4', 3)) // NaN
console.log(parseInt('1324', 3)) // NaN

5. 小数点后超过7位

console.log(parseInt(0.000005)) // 0
console.log(parseInt(0.0000005)) // 5

/* 原因是 0.0000005 不是字符串，会被toString() => 5e-7 */
console.log((0.0000005).toString()) // 5e-7

回到初始的问题

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

可以理解成这样：

parseInt('1',0,['1','2','3'])
parseInt('2',1,['1','2','3'])
parseInt('3',2,['1','2','3'])

• parseInt没有第三个参数，所以可以忽略。

• 基数为0 => 默认10进制

• 解析的字符串包含的数字超过基数，返回NaN

所以答案：[1,NaN，NaN]

总结：

1. 由于 parseInt 第二个参数的推算并不稳定，所以建议在使用 parseInt 的时候第二个参数也添加上。

2. 再捋捋解析规则：

   • 第一个参数默认为字符串类型，不是字符串类型，会被 toString；如果字符串无法解析，直接返回NaN;
   • 第二个参数指定为 0 或未指定，会根据第一个参数的格式，进行推断。基数的取值范围为 2-36；基数超出范围NaN;

来都来了

来都来了，顺便看一下和parseInt 比较相似的parseFloat，parseFloat比较简单，只有一个参数，就是需要解析的字符串。

对于 BigInt 类型的数据，使用 parseInt和 parseFloat 转换BigInt类型的数据，都会存在精度丢失的情况，需要注意下。

end

• 其实这道题目就是考察，对 parseInt 方法的熟悉程度。加油

js , map中的坑

由于map()接收的回调函数可以有3个参数：callback(currentValue, index, array)，通常我们仅需要第一个参数，而忽略了传入的后面两个参数。不幸的是，parseInt(string, radix)没有忽略第二个参数，导致实际执行的函数分别是：

• parseInt(‘0‘, 0); // 0, 按十进制转换

• parseInt(‘1‘, 1); // NaN, 没有一进制

• parseInt(‘2‘, 2); // NaN, 按二进制转换不允许出现2

可以改为r = arr.map(Number);，因为Number(value)函数仅接收一个参数。