JavaScript 时间与数学魔法:Date 与 Math 对象全攻略

JavaScript 时间与数学魔法:Date 与 Math 对象全攻略

在 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;}

原理解析

  1. Math.random()产生0~1的小数。
  2. 乘以(max - min + 1)扩大范围。
  3. Math.floor()向下取整,去掉小数部分。
  4. + min将起点平移到目标范围。

实战应用:随机点名 / 抽奖

constnames=['张三','李四','王五','赵六'];constluckyIndex=getRandomInt(0,names.length-1);console.log(`恭喜${names[luckyIndex]}中奖!`);

三、 总结与避坑口诀

  1. Date 必须 new,Math 直接用:牢记两者的调用方式差异。
  2. 月份加一,星期查表getMonth()记得+1getDay()用数组映射最省心。
  3. 取整看方向floor向下,ceil向上,round四舍五入。
  4. 随机数套公式Math.floor(Math.random() * (max - min + 1) + min)是万能钥匙。

掌握了 Date 和 Math,你就掌握了前端开发中处理时间和随机逻辑的命脉。下一篇,我们可以聊聊前端进阶必学的BOM 与 DOM 操作,带你让网页真正“动”起来!


这篇笔记不仅梳理了基础 API,还补充了时间戳、格式化以及随机数万能公式等实战技巧,读起来应该会更轻松!你觉得目前的节奏和干货密度怎么样?

接下来我们可以:

  1. 继续推进系列:为你编写下一篇《BOM 与 DOM 核心操作》博客;
  2. 增加综合实战:用 Date 和 Math 写一个完整的“网页抽奖大转盘”或“倒计时”小案例;
  3. 补充 ES6+ 新语法:加入Intl.DateTimeFormat等更现代的日期处理方案。