前言

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

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

一、Math.floor

1. 简单介绍

在MDN中，明确解释了Math.floor的作用：

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

例如，Math.floor(3.7) 返回 3，Math.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.简单介绍

parseInt() 函数解析一个字符串参数并返回一个指定基数的整数。它的行为不仅仅是对数字进行取整。
parseInt相对于floor方法来说复杂一点，对于正数，向下取整。对于负数，向上取整。
例如，parseInt("3.7") 返回 3，因为它将字符串转换为整数，忽略了小数点和后续数字。如果字符串以非数字开始，则返回 NaN（不是数字）。
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. 特殊用法

parseInt会忽略数字后面的字符串，但如果第一个数字就是非数字，会返回NAN

Number.parseInt('123abc') // 123
Number.parseInt('abc123')  //NAN
Number.parseInt('1ab12'))   //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() 将返回 NaN。
            
            
  parseInt("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 是一个数学函数，用于向下取整到最接近的整数。

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

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

前言

一、Math.floor

1. 简单介绍

2. 实践案例

二、Number.parseInt

1.简单介绍

2. 实践案例

3. 特殊用法

4. 经典面试题

三、总结

parseInt

floor