JavaScript 时间与数学魔法:Date 与 Math 对象全攻略
📅 2026/7/13 8:27:17
👁️ 阅读次数
📝 编程学习
在 Web 开发中,无论是制作炫酷的倒计时、日历组件,还是生成验证码、处理抽奖逻辑,都离不开两位“幕后大佬”——Date(日期对象)和Math(数学对象)。
上一篇我们聊了数组和字符串,这篇我们继续进阶。这两个对象的使用逻辑截然不同:Date 需要new出来才能用,而 Math 则像一个“工具箱”,直接拿来就用。今天,我不仅带你梳理核心 API,还会分享一些避坑指南和神仙技巧,让你轻松拿捏它们!
一、 Date 对象:时间的掌控者
Date 对象用来处理日期和时间。在使用前,必须先通过new Date()实例化一个对象。
1. 核心获取方法(Getters)
| 方法 | 作用 | ️ 核心避坑点 |
|---|---|---|
getFullYear() | 获取完整的年份(如 2026) | 推荐使用,替代已废弃的getYear() |
getMonth() | 获取当前月份 | 返回值是 0~11,实际月份需要+1 |
getDate() | 获取当天日期(几号) | 返回值是 1~31 |
getDay() | 获取星期几 | 返回值是 0~6,其中0 代表星期日 |
getHours() | 获取当前小时 | 返回值是 0~23 |
getMinutes() | 获取当前分钟 | 返回值是 0~59 |
getSeconds() | 获取当前秒钟 | 返回值是 0~59 |
轻松技巧:优雅地处理“星期”与“月份”
新手常为getDay()和getMonth()头疼,其实用数组映射最优雅:
2. 补充知识:时间戳与格式化
除了基础获取,日常开发中最常用的是时间戳和格式化:
**getTime()**:获取从 1970年1月1日 至今的毫秒数。常用于计算两个时间的差值(如倒计时)。**toLocaleString()**:一键将时间转换为本地习惯的字符串格式(如2026/7/12 09:50:00),省去手动拼接的麻烦。
二、 Math 对象:内置的数学工具箱
Math 对象不是构造函数,不需要new,直接通过Math.属性/方法调用即可。
1. 常用属性与基础运算
| 方法/属性 | 作用 | 示例 |
|---|---|---|
Math.PI | 获取圆周率 π | 3.1415926... |
Math.abs(x) | 获取绝对值 | Math.abs(-5) // 5 |
Math.max(x, y, z) | 求最大值 | Math.max(1, 3, 2) // 3 |
Math.min(x, y, z) | 求最小值 | Math.min(1, 3, 2) // 1 |
2. 取整三剑客(极易混淆)
| 方法 | 规则 | 示例 |
|---|---|---|
Math.floor() | 向下取整(地板) | Math.floor(3.9) // 3 |
Math.ceil() | 向上取整(天花板) | Math.ceil(3.1) // 4 |
Math.round() | 四舍五入取整 | Math.round(3.5) // 4 |
轻松技巧:负数的“四舍五入”Math.round()在遇到负数时,遵循“向较大值靠拢”的原则。
例如:Math.round(-1.5)的结果是-1(因为 -1 比 -2 大),而Math.round(-1.6)才是-2。
3. 神仙技巧:生成指定范围的随机数
Math.random()只能生成0 ~ 1(含0不含1)的随机小数。但在实际开发中,我们经常需要“1到100的随机整数”或“从数组中随机抽一个元素”。
万能公式:
// 获取 min 到 max 之间的随机整数(包含 min 和 max)functiongetRandomInt(min,max){returnMath.floor(Math.random()*(max-min+1))+min;}原理解析:
Math.random()产生0~1的小数。- 乘以
(max - min + 1)扩大范围。 Math.floor()向下取整,去掉小数部分。+ min将起点平移到目标范围。
实战应用:随机点名 / 抽奖
constnames=['张三','李四','王五','赵六'];constluckyIndex=getRandomInt(0,names.length-1);console.log(`恭喜${names[luckyIndex]}中奖!`);三、 总结与避坑口诀
- Date 必须 new,Math 直接用:牢记两者的调用方式差异。
- 月份加一,星期查表:
getMonth()记得+1,getDay()用数组映射最省心。 - 取整看方向:
floor向下,ceil向上,round四舍五入。 - 随机数套公式:
Math.floor(Math.random() * (max - min + 1) + min)是万能钥匙。
掌握了 Date 和 Math,你就掌握了前端开发中处理时间和随机逻辑的命脉。下一篇,我们可以聊聊前端进阶必学的BOM 与 DOM 操作,带你让网页真正“动”起来!
这篇笔记不仅梳理了基础 API,还补充了时间戳、格式化以及随机数万能公式等实战技巧,读起来应该会更轻松!你觉得目前的节奏和干货密度怎么样?
接下来我们可以:
- 继续推进系列:为你编写下一篇《BOM 与 DOM 核心操作》博客;
- 增加综合实战:用 Date 和 Math 写一个完整的“网页抽奖大转盘”或“倒计时”小案例;
- 补充 ES6+ 新语法:加入
Intl.DateTimeFormat等更现代的日期处理方案。
编程学习
技术分享
实战经验