本文介绍如何将连续日期数组按自然周（周一为始、周日为终）切分为二维数组，提供可读性强的 `reduce` 实现方案及优化的一行式写法，并附带日期格式化与边界处理说明。
在实际开发中，常需将一段连续日期（如报表周期、日历渲染、数据聚合等场景）按标准周进行分组——即每组包含从周一到周日共 7 天（若起止日期不完整，则首尾组可少于 7 天）。关键在于：以 Monday 为每周起点，Sunday（getDay() === 0）为每周终点。
以下是一个清晰、健壮且易于理解的实现方案：
✅ 推荐写法：语义清晰的 reduce 分组逻辑
// 1. 生成指定范围的日期数组（含起止日）
const start = new Date('2023-05-11'); // 2023年5月11日（周四）
const stop = new Date('2023-07-04'); // 2023年7月4日（周二）
const dateRange = [];
const current = new Date(start);
while (current <= stop) {
dateRange.push(new Date(current));
current.setDate(current.getDate() + 1);
}
// 2. 按周分组：每遇到 Sunday（getDay() === 0）则开启新子数组
const weeklyGroups = dateRange.reduce(
({ idx, result }, date) => {
// 确保当前子数组存在（使用空数组初始化）
if (!result[idx]) result[idx] = [];
result[idx].push(date);
// 若当前是周日，则下一次迭代进入下一组（idx 自增）
if (date.getDay() === 0) idx++;
return { idx, result };
},
{ idx: 0, result: [] }
).result;
// 3. 格式化输出（便于查看）
console.log(
JSON.stringify(weeklyGroups, (_, v) =>
v instanceof Date ? v.toISOString().slice(0, 10) : v,
2
)
);
? 说明：Date.prototype.getDay() 返回 0（Sunday）至 6（Saturday），因此判断 date.getDay() === 0 是识别每周结束的可靠依据。
⚡ 进阶写法：紧凑单行式（适合熟悉函数式编程者）
const weeklyGroupsOneLiner = dateRange.reduce( ([i, r], d) => ((r[d.getDay() ? i : i++] ??= []).push(d), [i, r]), [0, []] )[1];
该写法利用数组解构与短路赋值，逻辑等价但更精简；不过可读性略低，建议仅用于工具函数或已有团队规范场景。
⚠️ 注意事项与最佳实践
- 时区安全：示例中所有日期均未显式指定时区，依赖本地时区。生产环境建议统一使用 UTC（如 new Date(‘2023-05-11T00:00:00Z’)）或明确设置 toLocaleDateString({ timeZone: ‘UTC’ })。
- 首尾不完整周：本方案天然支持非整周——例如起始日为周四，则第一组为 [Thu, Fri, Sat, Sun]；结尾为周二，则最后一组为 [Mon, Tue]。
- 不可变性提醒：原 dateRange 中的 Date 对象被直接引用。如需深拷贝（避免后续修改影响分组结果），可在 .push(new Date(date)) 时创建副本。
- 性能提示：对于超长日期范围（如数年跨度），while 循环仍高效；若需更高性能（如百万级日期），可考虑基于数学计算的分组（跳过逐日构造），但本场景通常无需过度优化。
✅ 总结
按周分组的核心逻辑是「检测周日并触发分组切换」，reduce 提供了状态累积的天然能力。推荐优先使用语义明确的多行版本，兼顾可维护性与可调试性；再根据项目风格选择是否抽象为复用函数（例如封装为 groupDatesByWeek(dates, weekStartsOn = 1 /* Monday */)）。最终输出为标准二维数组，可直接用于 React 渲染周视图、ECharts 时间序列聚合或后端批量处理。