到底该用哪个取整?Math.floor和Number.parseInt 别再傻傻分不清!

268 阅读5分钟

前言

Hello~大家好。我是秋天的一阵风

在项目开发过程中,我们经常会遇到需要对数字进行 取整处理 的情形,比如在计算统计数据、处理图表坐标或是实现某些算法逻辑时。对于JavaScript开发者而言,Math.floor 和 parseInt 是两种常用的取整方法,它们虽然都能达到取整的目的,但在实际应用中却有着本质的区别,接下来我们就一起探讨这两个方法的不同之处!

一、Math.floor

1. 简单介绍

MDN中,明确解释了Math.floor的作用:

Math.floor()  函数总是返回小于等于一个给定数字的最大整数。

例如,Math.floor(3.7) 返回 3Math.floor(-3.7) 返回 -4。这个函数总是执行向下取整,即使对于负数也是向绝对值更大的方向取整。

另外,Math.floor有且只有一个参数。

2. 实践案例

我们来看几个例子:

Math.floor(3.1); // 3
Math.floor(3.9); // 3

Math.floor(-3.1); // -4比-3小,向下取整,所以是 -4
Math.floor(-3.9); // -4比-3小,向下取整,所以是 -4

不管是正数还是负数,同学们只需要记得Math.floor返回的值永远是比当前值要小,另外floor的英语也有地板的意思,floor就可以记成向下取整

二、Number.parseInt

1.简单介绍

  1. parseInt() 函数解析一个字符串参数并返回一个指定基数的整数。它的行为不仅仅是对数字进行取整。

  2. parseInt相对于floor方法来说复杂一点,对于正数,向下取整。对于负数,向上取整。

  3. 例如,parseInt("3.7") 返回 3,因为它将字符串转换为整数,忽略了小数点和后续数字。如果字符串以非数字开始,则返回 NaN(不是数字)。

  4. parseInt() 还可以处理不同的数制(基数),如二进制、八进制、十六进制等,通过第二个参数指定。

2. 实践案例

Number.parseInt(3.1) // 3  正数,向下取整。比3.1小的是3
Number.parseInt(3.9) // 3  正数,向下取整。比3.9小的是3

Number.parseInt(-3.1) // -3  负数,向上取整。比-3.1大的是-3
Number.parseInt(-3.9) // -3  负数,向上取整。比-3.9大的是-3

3. 特殊用法

  1. parseInt会忽略数字后面的字符串,但如果第一个数字就是非数字,会返回NAN
Number.parseInt('123abc') // 123
Number.parseInt('abc123')  //NAN
Number.parseInt('1ab12'))   //1
  1. parseInt还有第二个参数: radix
  • radix 可选

  • 2 到 36 之间的整数,表示 string 的基数(数学记数系统中的基)。

    如果 radix 为 undefined 或 0,则 radix 将被默认设置为 10,除非该数字以码元对 0x 或 0X 开头,在这种情况下,radix 将被默认设置为 16


Number.parseInt(10,2) // 2 ,2的二进制就是10
Number.parseInt(11,2) // 3 ,3的二进制就是11
Number.parseInt(100,2) // 4, 4的二进制就是100

Number.parseInt('0xa',16) //10, 10的十六进制就是0xa
Number.parseInt('0xb',16) //11, 11的十六进制就是0x

4. 经典面试题

const arr = ["10", "10", "10", "10", "10"];
const result = arr.map(parseInt);
console.log(result); 

对于这段代码,会输出什么呢?同学们可以先思考一下~

我们知道map函数有两个参数,一个是数组项item,一个是索引值index

上面的代码我们可以先转换为普通写法:

const result1 = arr.map((item, index) => {
  return parseInt(item, index);
});
console.log(result1);

所以map执行的顺序和传参就是下面这个顺序:

parseInt("10", 0);
parseInt("10", 1);
parseInt("10", 2);
parseInt("10", 3);
parseInt("10", 4);

我们先把上面第二个参数radix的介绍复制下来,接着一个个来分析:

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

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

            如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaNparseInt("10", 0);    0 就是默认值十进制, "10" 以十进制解析, 那就是10     
  parseInt("10", 1);    1 不在2 ~36区间,  返回NAN
  parseInt("10", 2);    2 就是二进制 , "10" 以二进制解析, 那就是 2
  parseInt("10", 3);    3 就是三进制 , "10" 以三进制解析, 那就是 3
  parseInt("10", 4);    4 就是四进制 , "10" 以四进制解析, 那就是 4

所以打印的结果就是:

const arr = ["10", "10", "10", "10", "10"];
const result = arr.map(parseInt);
console.log(result); 
// [10, NaN, 2, 3, 4]

三、总结

parseInt

parseInt 是一个全局函数,用于将字符串转换成整数。其主要特点包括:

  • 功能:从给定的字符串开始解析数字,直到遇到非数字字符为止。

  • 参数

    • 字符串:必需,要解析的字符串。

    • radix(基数):可选,默认为 10,表示要解析的数字的基数。该值范围为 2 到 36。

      • 如果省略或为 0,且字符串以 "0x" 或 "0X" 开头,则基数为 16;否则基数为 10。
      • 若基数不在 2 至 36 的范围内,parseInt 返回 NaN
  • 返回值:返回字符串开头解析出的整数。若无法解析则返回 NaN

floor

Math.floor 是一个数学函数,用于向下取整到最接近的整数。

  • 功能:返回小于或等于给定数值的最大整数。
  • 参数:一个数值。
  • 返回值:小于或等于该数值的最大整数。