本文详解如何修正 JavaScript 日期匹配逻辑，正确基于 JSON 中的星期+日期字符串（如 "Sunday, 20/08/2023"）为 DOM 元素动态添加 active 类，重点解决 getDay() 索引越界与日期格式不一致问题。
本文详解如何修正 javascript 日期匹配逻辑，正确基于 json 中的星期+日期字符串（如 "sunday, 20/08/2023"）为 dom 元素动态添加 `active` 类，重点解决 `getday()` 索引越界与日期格式不一致问题。
在前端开发中，常需根据当前日期高亮匹配日程项（如课表、排班表），但直接使用 Date.getDay() 与自定义星期数组拼接日期时极易出错。原代码存在两个关键缺陷：
- getDay() 返回值范围是 0（Sunday）到 6（Saturday），而数组 d 的索引从 0 开始对应 "Monday"，导致 d[date.getDay() - 1] 在周日时计算为 d[-1] → undefined，整个日期字符串失效；
- 月份格式不统一：date.getMonth() + 1 输出 8，但 JSON 中为 "08"（零填充），字符串比较时 "8/08/2023" !== "20/08/2023"（注意：原示例中 day 与 month 顺序实际为 DD/MM/YYYY，但代码拼接为 "Weekday, D/M/YYYY"，与 JSON 的 "Sunday, 20/08/2023" 格式不一致）。
✅ 正确做法是严格对齐 JSON 的日期格式："Weekday, DD/MM/YYYY"（注意：DD 和 MM 均需两位数补零，且顺序为日/月/年）。
以下是修复后的完整实现：
function fetchJadwal() {
const showli = document.getElementById('showData');
const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const now = new Date();
// ✅ 正确获取星期名：getDay() 返回 0→Sunday，直接作为 weekdays 索引
const dayName = weekdays[now.getDay()];
// ✅ 补零格式化：getDate() → DD，getMonth()+1 → MM
const dateStr = String(now.getDate()).padStart(2, '0');
const monthStr = String(now.getMonth() + 1).padStart(2, '0');
const yearStr = now.getFullYear();
// ✅ 拼接为 "Sunday, 20/08/2023" 格式（与 JSON 完全一致）
const todayStr = `${dayName}, ${dateStr}/${monthStr}/${yearStr}`;
let html = ''; // ✅ 改用字符串累加，避免数组误用
for (let i = 0; i < jadwal.length; i++) {
const item = jadwal[i];
const isActive = (item.tanggal === todayStr) ? ' active' : '';
html += `<li value="${item.tanggal}" class="${isActive}">${item.content || ''}</li>`;
}
showli.innerHTML = html;
}
fetchJadwal();? 关键修正点总结：
立即学习“Java免费学习笔记（深入）”；
- 使用 weekdays[now.getDay()] 直接映射（getDay() 的 0 对应周日，与 weekdays[0] 一致）；
- padStart(2, '0') 确保 DD 和 MM 均为两位数（如 8 → "08"），严格匹配 JSON 格式；
- 将 col 初始化为字符串 ''，而非数组 []，避免隐式类型转换风险；
- 使用模板字符串提升可读性，value 属性值用双引号包裹（符合 HTML 规范）。
⚠️ 额外建议：
- 若 jadwal 数据量较大，可预先用 findIndex 或 Map 建立日期索引，提升匹配性能；
- 生产环境建议使用 Intl.DateTimeFormat 进行国际化日期格式化，增强可维护性；
- 添加空值校验：if (!jadwal || !Array.isArray(jadwal)) return; 防止运行时错误。
通过以上调整，即可精准匹配 JSON 中的日期字符串，并为当日项稳定添加 active 类，实现可靠的动态样式控制。
