本文详解如何使用原生 javascript 生成从今日开始连续 7 天的日期数组，并格式化为“周几 + 日期”形式，适用于预约类应用（如图书预约、日程管理）中按周筛选数据的场景。
在开发预约类应用（例如图书预约系统、医生挂号平台或课程排期工具）时，常需按“本周”或“未来七天”维度展示可选时间段。此时，前端需准确生成从今天起连续 7 天的日期列表，并附带清晰的星期标识（如 “Mon: 04/01/2024”），以便用户快速识别与选择。该逻辑不依赖后端时间计算，可直接用于 Firebase 查询条件构建（例如按 dateString 字段精确匹配）。
以下为简洁、可靠、无第三方库依赖的实现方案：
function getWeekDateRange() {
const today = new Date();
const result = [];
for (let i = 0; i < 7; i++) {
const date = new Date(today);
date.setDate(today.getDate() + i);
const weekday = date.toLocaleString('en-US', { weekday: 'short' }); // Mon, Tue, ...
const dateString = date.toLocaleDateString('en-US', {
month: '2-digit',
day: '2-digit',
year: 'numeric'
}); // e.g., "04/01/2024"
result.push({
fullDate: date, // Date 对象，便于后续计算（如 getTime()）
weekday,
dateString,
isoDate: date.toISOString().split('T')[0] // 标准 ISO 格式：YYYY-MM-DD，推荐用于 Firebase 查询
});
}
return result;
}
// 使用示例
const weekDates = getWeekDateRange();
console.log(weekDates);
// 输出示例：
// [
// { weekday: "Mon", dateString: "04/01/2024", isoDate: "2024-04-01", fullDate: Date },
// { weekday: "Tue", dateString: "04/02/2024", isoDate: "2024-04-02", fullDate: Date },
// ...
// ]✅ 关键说明与最佳实践：
- 推荐使用 isoDate 字段进行数据库查询：Firebase（尤其是 Firestore）对字符串格式 YYYY-MM-DD 的索引效率高，且天然支持范围查询（如 where('date', '>=', '2024-04-01')）。避免使用本地化格式（如 "04/01/2024"）作为查询键，以防时区或格式歧义。
- 注意 Date 对象的可变性：示例中每次循环都 new Date(today)，确保不会因复用同一对象导致日期污染；切勿直接 date.setDate(...) 修改原始 today。
- 时区安全提示：toISOString() 基于 UTC，若业务严格遵循用户本地时区，建议统一存储为 YYYY-MM-DD 字符串（不含时间），并在客户端按本地时区解析显示——这能规避跨时区预约错位问题。
- 扩展建议：如需支持“本周一至周日”而非“今天至第7天”，可先通过 date.getDay() 计算偏移量调整起始日，再生成 7 天序列。
该方案轻量、可维护、兼容性好（支持所有现代浏览器），无需引入 dayjs 或 moment 等大型依赖，特别适合对包体积敏感的移动端或小程序场景。
立即学习“Java免费学习笔记（深入）”；
