Date对象基础与创建
创建Date对象的几种方式
Date对象的常见方法与应用在前端开发中，Date对象的创建与解析构成日期处理的基础。本文将围绕这一主题，介绍创建方式、常用属性与方法，以及实际应用场景。
可以通过 new Date()、Date.now()、Date.parse() 等方式来获取日期与时间的表示。时间戳（毫秒级自 1970-01-01 UTC 起算）是常见的内部表示。
// 当前时间
const d1 = new Date();// 指定时间戳（毫秒）
const d2 = new Date(1609459200000); // 2021-01-01T00:00:00Z// 解析日期字符串
const d3 = new Date('2024-08-01T12:34:56Z');
当传入无效的日期字符串或参数时，Date对象会得到一个 Invalid Date，需要通过校验来处理潜在的异常情况。
Date对象的核心属性与方法
Date对象提供大量 Getter 与 Setter 方法用于读取和修改日期时间的不同字段。常用的 getFullYear()、getMonth()、getDate() 等方法是日期计算的基础。
另外，Date对象也提供一系列用于修改日期的 setFullYear()、setMonth()、setDate() 等方法，结合 getDate()、getTime() 可以实现日期的增减与对齐。
const d = new Date();
console.log(d.getFullYear(), d.getMonth(), d.getDate());// 日期向后推进7天
d.setDate(d.getDate() + 7);
console.log(d.toDateString());
此外，Date对象还提供格式化相关的方法，如 toISOString()、toDateString()、toLocaleDateString()，方便在不同场景下展示日期信息。
console.log(new Date().toISOString());
console.log(new Date().toDateString());
console.log(new Date().toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }));
日期格式化与显示
格式化日期为字符串
日常开发中常需要将日期转换为人类可读的字符串形式。toLocaleDateString、toLocaleTimeString，以及 Intl.DateTimeFormat 提供了强大而可定制的格式化能力。
通过 Intl.DateTimeFormat 可以根据区域和选项实现灵活的格式化，例如按日期或时间分组、加入分隔符等。下面的示例展示了不同区域的格式化效果。
const d = new Date();
const zh = new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).format(d);
const en = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit' }).format(d);
console.log(zh, en);
使用 toLocaleDateString、toLocaleTimeString 时，常见的陷阱是时区差异。要明确指定时区或使用通用格式，避免在不同设备上显示不一致的结果。
需要在展示阶段控制语言环境和时区时，可以参考 时区与 时区偏移 的相关设置，以确保一致的用户体验。
const d = new Date();
console.log(d.toLocaleString('en-US', { timeZone: 'UTC' }));
console.log(d.toLocaleString('en-US', { timeZone: 'Asia/Shanghai' }));
处理时区与夏令时
Date对象的默认行为是基于本地时区，但在跨区域应用中，需要显式处理时区。通过 toLocaleString 或 toLocaleDateString 指定 timeZone，可以避免夏令时带来的偏差。
需要将日期保存为 ISO 8601 或 UTC 字符串时，使用 toISOString 可以得到统一的 UTC 表示，便于服务端校验与跨时区展示。
合理使用 日期格式化选项，可实现跨语言、跨区域的一致展示，减少歧义并提升用户体验。
日期计算与相对日期
日期加减与差值计算
日期运算通常涉及对日期进行加减运算或求相对日期。通过 getDate 与 setDate，可以实现简单的日期偏移，例如增加若干天。
常用的模式是先克隆一个 Date 对象，然后应用日期字段的调整，以避免直接修改原对象。
function addDays(date, days) {const d = new Date(date);d.setDate(d.getDate() + days);return d;
}
console.log(addDays(new Date(), 7).toDateString());
在设计日历、任务提醒等功能时，setDate 与 getDate 的组合是核心，尤其是跨月/跨年的边界情况要格外注意。
日期差的计算
计算两个日期之间的差值时，通常先获取毫秒差，再转换为天数。通过 getTime() 获取毫秒时间戳，并用常量进行单位换算。需要留意潜在的 DST（夏令时） 的微小影响。
下面的示例演示如何计算两日期之间的天数差值：
const d1 = new Date('2024-01-01');
const d2 = new Date('2024-01-31');
const diffMs = d2.getTime() - d1.getTime();
const diffDays = diffMs / (1000 * 60 * 60 * 24);
console.log(diffDays); // 30
实战应用场景
日历控件核心逻辑
日历控件需要根据年月生成该月的日期网格，通常需要计算当月的起始星期、当月天数以及前一月/下一月的填充格。通过 Date 的字段和方法可以高效完成这项工作。
核心步骤包括获取当月日期数量、确定第一个日期在网格中的位置、拼装一个日期列表以渲染日历面板。
function getMonthDates(year, month) {const first = new Date(year, month, 1);const days = new Date(year, month + 1, 0).getDate();// 假设周日为一周的第一天，计算第一天是周几const lead = first.getDay();const result = [];for (let i = 0; i < lead; i++) result.push(null); // 前导空格for (let d = 1; d <= days; d++) result.push(new Date(year, month, d));return result;
}
console.log(getMonthDates(2024, 6)); // 2024-07 月的日期网格
在实现分页、禁用过去日期、标记今天或选中日期等功能时，Date对象仍是核心数据结构，渲染层可通过格式化方法获得一致的文本显示。
时间戳校验与解析
对于用户输入的日期字符串，需要进行校验以确保有效性。可以使用 Date.parse 将字符串解析成毫秒时间戳，并检查结果是否为 NaN。
通过简单的校验函数，可以快速判断一个日期字符串是否有效：
function isValidDate(str) {const ms = Date.parse(str);return !Number.isNaN(ms);
}
console.log(isValidDate('2024-07-15')); // true
console.log(isValidDate('not a date')); // false
