网站开发笔记本网站图片展示形式

网站开发笔记本,网站图片展示形式,wordpress 上传svg,中文版本wordpress你是不是经常遇到这样的场景#xff1f; 生成一个随机整数#xff08;比如 1 到 10#xff09;把 3.9 变成 3#xff0c;把 -2.1 变成 -3分页时计算总页数#xff08;比如 23 条数据#xff0c;每页 5 条 → 需要 5 页#xff09; 这时候#xff0c;很多人会随手写 par…你是不是经常遇到这样的场景生成一个随机整数比如 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 注意不是 -2Math.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 的随机整数constrandom0to9Math.floor(Math.random()*10);// 生成 1 到 10 的随机整数constrandom1to10Math.floor(Math.random()*10)1;// 通用函数min 到 max包含functionrandomInt(min,max){returnMath.floor(Math.random()*(max-min1))min;}console.log(randomInt(5,15));// 比如输出 9 原理Math.random()返回 [0, 1) 之间的数包含 0不包含 1乘以 10 → [0, 10)Math.floor→ 0,1,2,…,9共10个整数如果用Math.round0 和 9 的概率会减半分布不均场景2分页计算总页数假设有 23 条数据每页显示 5 条问需要几页consttotalItems23;constitemsPerPage5;// 错误23 / 5 4.6 → parseInt 得 4但实际需要 5 页// 正确用 Math.ceil向上取整等等我们也可以用 floor// 方法1用 Math.ceil更直接consttotalPages1Math.ceil(totalItems/itemsPerPage);// → 5// 方法2用 Math.floor 巧妙转换consttotalPages2Math.floor((totalItemsitemsPerPage-1)/itemsPerPage);// → 5虽然这里Math.ceil更直观但很多算法题或老代码会用floor实现所以理解原理很重要。场景3时间处理比如取整小时constnownewDate();consthoursnow.getHours();// 14constminutesnow.getMinutes();// 37// 如果你想表示“当前小时开始的时间戳”conststartOfHournewDate(now);startOfHour.setMinutes(0,0,0);// 手动清零// 或者用 timestamp 计算进阶consttimestampnow.getTime();constmsPerHour60*60*1000;conststartTimestampMath.floor(timestamp/msPerHour)*msPerHour;这里Math.floor确保我们落到“完整的小时前”而不是四舍五入到下一小时。四、和其他取整函数对比JS 有好几个取整函数别搞混了函数行为示例Math.floor(x)向下取整往 -∞ 方向floor(-2.3) → -3Math.ceil(x)向上取整往 ∞ 方向ceil(2.3) → 3,ceil(-2.3) → -2Math.round(x)四舍五入round(2.5) → 3,round(-2.5) → -2Math.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(leti0;i5;i){console.log(Math.floor(Math.random()*6)1);// 模拟骰子 1~6}你会发现Math.floor虽然简单但可靠、明确、无歧义——这正是好代码的基础。下次再想“砍掉小数”别犹豫直接Math.floor走起