news 2026/7/16 8:09:18

别再用 parseInt 乱砍小数了!来认识 JS 的“地板函数”:Math.floor

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
别再用 parseInt 乱砍小数了!来认识 JS 的“地板函数”:Math.floor

你是不是经常遇到这样的场景?

  • 生成一个随机整数(比如 1 到 10)
  • 把 3.9 变成 3,把 -2.1 变成 -3
  • 分页时计算总页数(比如 23 条数据,每页 5 条 → 需要 5 页)

这时候,很多人会随手写parseInt(3.9)~~3.9,但其实最安全、最清晰的做法是用Math.floor()

今天我们就用大白话,带你彻底搞懂这个看似简单却容易踩坑的函数。


一、先看效果:Math.floor到底干了啥?

Math.floor()的作用就一个:向下取整

“向下”不是指“变小”,而是指往数轴的左边走,取不大于该数的最大整数

举几个例子:

Math.floor(3.7)// → 3Math.floor(3.1)// → 3Math.floor(3)// → 3Math.floor(-2.3)// → -3 (注意!不是 -2)Math.floor(-2.9)// → -3

✅ 关键理解:

  • 对正数:直接“砍掉小数部分”
  • 对负数:变得更小(因为 -3 < -2.3)

🧠 记忆技巧:想象你站在数字上,脚下是“地板(floor)”,你只能往下掉到最近的整数地板上。


二、为什么不用parseInt~~

很多人图省事,这样写:

parseInt(3.9)// → 3 ✅ 看起来对~~3.9// → 3 ✅ 也对

但问题出在负数和边界情况

parseInt(-2.3)// → -2 ❌(实际需要 -3)~~(-2.3)// → -2 ❌(位运算截断,不是向下取整)

Math.floor(-2.3)正确返回-3

另外:

  • parseInt本质是字符串解析函数,传入数字会先转成字符串,效率低且语义错误
  • ~~是位运算 hack,可读性差,且只适用于 32 位整数范围

结论:只要你想“向下取整”,就用Math.floor,别偷懒!


三、实战场景:它到底能干啥?

场景1:生成指定范围的随机整数

这是Math.floor最经典的用法!

// 生成 0 到 9 的随机整数constrandom0to9=Math.floor(Math.random()*10);// 生成 1 到 10 的随机整数constrandom1to10=Math.floor(Math.random()*10)+1;// 通用函数:min 到 max(包含)functionrandomInt(min,max){returnMath.floor(Math.random()*(max-min+1))+min;}console.log(randomInt(5,15));// 比如输出 9

🔍 原理:

  • Math.random()返回 [0, 1) 之间的数(包含 0,不包含 1)
  • 乘以 10 → [0, 10)
  • Math.floor→ 0,1,2,…,9(共10个整数)

如果用Math.round,0 和 9 的概率会减半,分布不均!


场景2:分页计算总页数

假设有 23 条数据,每页显示 5 条,问需要几页?

consttotalItems=23;constitemsPerPage=5;// 错误:23 / 5 = 4.6 → parseInt 得 4,但实际需要 5 页!// 正确:用 Math.ceil(向上取整)?等等,我们也可以用 floor!// 方法1:用 Math.ceil(更直接)consttotalPages1=Math.ceil(totalItems/itemsPerPage);// → 5// 方法2:用 Math.floor 巧妙转换consttotalPages2=Math.floor((totalItems+itemsPerPage-1)/itemsPerPage);// → 5

虽然这里Math.ceil更直观,但很多算法题或老代码会用floor实现,所以理解原理很重要。


场景3:时间处理(比如取整小时)

constnow=newDate();consthours=now.getHours();// 14constminutes=now.getMinutes();// 37// 如果你想表示“当前小时开始的时间戳”conststartOfHour=newDate(now);startOfHour.setMinutes(0,0,0);// 手动清零// 或者用 timestamp 计算(进阶)consttimestamp=now.getTime();constmsPerHour=60*60*1000;conststartTimestamp=Math.floor(timestamp/msPerHour)*msPerHour;

这里Math.floor确保我们落到“完整的小时前”,而不是四舍五入到下一小时。


四、和其他取整函数对比

JS 有好几个取整函数,别搞混了:

函数行为示例
Math.floor(x)向下取整(往 -∞ 方向)floor(-2.3) → -3
Math.ceil(x)向上取整(往 +∞ 方向)ceil(2.3) → 3,ceil(-2.3) → -2
Math.round(x)四舍五入round(2.5) → 3,round(-2.5) → -2
Math.trunc(x)直接去掉小数(向 0 取整)trunc(-2.3) → -2

💡 小测试:
Math.floor(-0.1)是多少?
答案:-1(因为 -1 < -0.1,且是最大整数)


五、常见误区

❌ 误区1:“floor 就是去掉小数”

对正数成立,但对负数不成立!-2.1去掉小数是-2,但floor-3

❌ 误区2:“和 parseInt 一样”

parseInt是字符串解析,遇到非数字字符就停:

parseInt("3.9abc")// → 3Math.floor("3.9abc")// → NaN(因为 "3.9abc" 转数字是 NaN)

✅ 正确姿势:

  • 明确你要的是“数学上的向下取整” → 用Math.floor
  • 输入确保是数字(或用Number()转换)

六、总结:一句话记住它

Math.floor(x)就是“不大于 x 的最大整数”,永远往数轴左边走。

它不是魔法,而是数学规则的忠实执行者。在需要确定性取整的场景(尤其是随机数、分页、坐标计算),它是你的首选工具。


七、动手试试!

打开浏览器控制台,运行这些代码,观察结果:

console.log(Math.floor(4.999));// ?console.log(Math.floor(-1.1));// ?console.log(Math.floor(0));// ?console.log(Math.floor(NaN));// ?// 随机整数练习for(leti=0;i<5;i++){console.log(Math.floor(Math.random()*6)+1);// 模拟骰子 1~6}

你会发现,Math.floor虽然简单,但可靠、明确、无歧义——这正是好代码的基础。

下次再想“砍掉小数”,别犹豫,直接Math.floor走起!🔢

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/14 3:27:54

中后台开发的终极效率利器:Ant Design ProComponents完全指南

中后台开发的终极效率利器&#xff1a;Ant Design ProComponents完全指南 【免费下载链接】pro-components &#x1f3c6; Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/pr/pro-components 在当今快速迭代的软件开发环境中&#xff0c;中后台管…

作者头像 李华
网站建设 2026/7/16 1:05:26

从零开始掌握LLM部署:text-generation-inference高效推理实战指南

从零开始掌握LLM部署&#xff1a;text-generation-inference高效推理实战指南 【免费下载链接】text-generation-inference text-generation-inference - 一个用于部署和提供大型语言模型&#xff08;LLMs&#xff09;服务的工具包&#xff0c;支持多种流行的开源 LLMs&#xf…

作者头像 李华
网站建设 2026/7/14 23:45:06

黑盒测试与白盒测试的对比与实践

在软件质量保障体系中&#xff0c;测试方法是确保产品可靠性的核心手段。其中&#xff0c;黑盒测试与白盒测试作为两种基础且互补的测试策略&#xff0c;分别从外部行为与内部结构视角验证软件质量。随着敏捷开发与DevOps的普及&#xff0c;测试人员需灵活运用这两种方法以应对…

作者头像 李华
网站建设 2026/7/13 7:22:15

C语言的数组

数组的概念&#xff1a;数组是一组相同类型元素的集合&#xff1b;由此可以知道&#xff1a;数组中存放的的是1个或者多个数据&#xff0c;但是数组元素不能为0&#xff1b;数组中存放的多个数据&#xff0c;且数据类型相同&#xff1b;数组又分为一维数组和多维数组&#xff0…

作者头像 李华
网站建设 2026/7/14 9:44:45

超强开源3D打印切片软件OrcaSlicer:从入门到精通完全指南

超强开源3D打印切片软件OrcaSlicer&#xff1a;从入门到精通完全指南 【免费下载链接】OrcaSlicer G-code generator for 3D printers (Bambu, Prusa, Voron, VzBot, RatRig, Creality, etc.) 项目地址: https://gitcode.com/GitHub_Trending/orc/OrcaSlicer 想要提升3D…

作者头像 李华
网站建设 2026/7/15 0:12:25

打造国际化WeChatTweak:多语言翻译贡献完全指南

打造国际化WeChatTweak&#xff1a;多语言翻译贡献完全指南 【免费下载链接】WeChatTweak-macOS A dynamic library tweak for WeChat macOS - 首款微信 macOS 客户端撤回拦截与多开 &#x1f528; 项目地址: https://gitcode.com/gh_mirrors/we/WeChatTweak-macOS 您是…

作者头像 李华