parseInt与Math.floor的微妙区别
小蚊子
高级前端工程师
网上有介绍parseInt与Math.floor区别的内容已经不少了，这里我还是想说下自己在使用过程中的区别
parseInt
我们平时在使用parseInt时，主要是为了数据中的整数部分。但实际上，在官方的定义里，parseInt的第一个参数应当是string类型的。
parseInt(string, radix);
尤其是在ts中使用parseInt会更加明显，若直接传入一个数字类型的参数，则编辑器会提示此处应当传入一个字符串类型，这时就要求我们手动的转为字符串类型，比如使用num+''或者num.toString()。在不严格的情况下，js语言会自动进行隐式的类型转换。
而且，使用parseInt获取整数部分时，是直接将小数部分扔掉：
parseInt('12.3'); // 12
parseInt('6.9'); // 6
parseInt('4'); // 4
parseInt('-1.2'); // -1
parseInt('-1.9'); // -1
parseInt最大的一个功能是，可以将字符串类型的数字其他进制的数据转为十进制的数据。同时，parseInt也能让我们从数字和其他字母混合的字符串中提取出数字来，若以非数字类型开始的字符串，则无法转为数字，若以数字开头的字符串，则返回第一个非数字字符前所有的数字字符：
parseInt('11', 8); // 9, 8进制中的11即为10进制中的9
parseInt('123.456'); // 123
parseInt('a123'); // NaN
parseInt('123a456'); // 123
这种情况有一个使用的场景，比如有一个DOM元素上有style属性
<div class="wenzi" style="height: 200px;"></div>
我们在使用style获取高度时会带有单位，那么这里就可以用parseInt获取到纯数字（当然，我们还有其他方式来获取不带单位的数据，这里仅仅是举个例子）：
let height = document.querySelector('.wenzi').style.height;
console.log( height ); // '200px'
console.log( parseInt(height) ); // 200
Math.floor
Math.floor是专门用来操作数字的，该功能是获取小于等于参数的整数（向下取整），例如：
Math.floor(12.3); // 12
Math.floor(6.9); // 6
Math.floor(4); // 4
Math.floor(-1.2); // -2
Math.floor(-1.9); // -2
可以看到，在获取整数部分这个功能，与parseInt对比发现，对于非负数来说效果是一样的，但是对于负数来讲，floor会向更小数字的方向寻找。
若传入的参数不是数字类型的，返回的则是NaN。
建议在获取非负数的整数部分时，使用Math.floor
总结
若是操作纯数字型的数据，建议使用Math下的方法，若字符串类型的数字再使用parseInt，更加语义化一些。
我是蚊子，来腾讯的高级前端开发工程师，欢迎关注我的公众号，我们一起互相探讨。
