本文详解如何基于当前日期匹配 JSON 中的字符串格式日期（如 "Sunday, 20/08/2023"），精准为 DOM 元素添加对应 class，重点修复 getDay() 索引越界、日期格式不一致等常见错误。
本文详解如何基于当前日期匹配 json 中的字符串格式日期（如 "sunday, 20/08/2023"），精准为 dom 元素添加对应 class，重点修复 `getday()` 索引越界、日期格式不一致等常见错误。
在前端开发中，常需根据动态数据（如今日日期）高亮匹配项——例如从课程表 JSON 中找出“今天”的条目并添加 active 类。但直接拼接日期字符串易出错，核心问题往往藏在细节里：Date.prototype.getDay() 返回的是 0–6 的索引（0 表示 Sunday），而代码中却用 d[date.getDay() - 1] 尝试访问数组，导致周日时 d[-1] 为 undefined，最终生成无效日期字符串（如 "undefined, 20/08/2023"），自然无法与 JSON 中的 "Sunday, 20/08/2023" 匹配。
以下是修正后的健壮实现：
function fetchJadwal() {
const showli = document.getElementById('showData');
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; // ✅ 索引 0→Sunday
const date = new Date();
const dayName = days[date.getDay()]; // 直接用 getDay() 值作索引，无需 ±1
const day = String(date.getDate()).padStart(2, '0'); // 补零：'8' → '08'
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份+1后补零
const year = date.getFullYear();
const todayStr = `${dayName}, ${day}/${month}/${year}`; // ✅ 格式严格匹配：'Sunday, 20/08/2023'
let html = ''; // ✅ 改用字符串拼接，语义清晰
for (let i = 0; i < jadwal.length; i++) {
const obj = jadwal[i];
const isToday = obj.tanggal === todayStr; // ✅ 严格全等比较
const className = isToday ? 'active' : '';
html += `<li value="${obj.tanggal}" class="${className}">${obj.content || ''}</li>`;
}
showli.innerHTML = html;
}
fetchJadwal();关键改进说明：
- ✅ 周名数组顺序校准：days 数组以 "Sunday" 开头（索引 0），与 getDay() 返回值完全对齐；
- ✅ 日期补零处理：使用 String().padStart(2, '0') 确保 8 → '08'，避免 "8/8/2023" 与 "08/08/2023" 不匹配；
- ✅ 变量命名清晰化：todayStr 明确表达意图，替代易混淆的 valuedate 或 attrbDate；
- ✅ 类型安全拼接：html 初始化为字符串而非数组，避免隐式类型转换风险；
- ✅ HTML 属性转义提醒：若 obj.tanggal 或内容含特殊字符（如 "），建议使用 encodeURIComponent 或模板引擎防 XSS，生产环境推荐 DOMParser 或 textContent 安全插入。
进阶建议：
若 JSON 日期格式不可控（如存在空格、大小写不一），可统一标准化后再比对：
const normalizeDate = (str) => str.trim().replace(/\s+/g, ' ').toLowerCase();
if (normalizeDate(obj.tanggal) === normalizeDate(todayStr)) { /* ... */ }正确理解原生 API 行为、保持数据格式一致性，是动态类操作可靠性的基石。
立即学习“Java免费学习笔记（深入）”；
