JavaScript循环仅添加最后一个元素：DOM元素aria-label设置异常排查

问题描述 #

尝试遍历DOM元素并为它们添加对应星期的aria-label，但所有元素的aria-label最终都变成了Sunday，代码如下：

const dayAriaLabels = {
  Mo: 'Monday',
  Tu: 'Tuesday',
  We: 'Wednesday',
  Th: 'Thursday',
  Fr: 'Friday',
  Sa: 'Saturday',
  Su: 'Sunday',
};

setTimeout(() => {
  const selectDomElement = document.querySelectorAll('.MuiPickersCalendarHeader-dayLabel');
  if (!isEmpty(selectDomElement)) {
    selectDomElement.forEach((label) => {
      Object.entries(dayAriaLabels).forEach(([key, value]) => {
        label.setAttribute('aria-label', value);
      });
    });
  }
}, 100);

原因解析 #

核心问题出在内层的Object.entries(dayAriaLabels).forEach循环：

• 每个DOM标签元素都会被遍历整个dayAriaLabels对象，依次设置所有键值对对应的aria-label值
• 由于循环按对象键的顺序执行（最后一个键是Su），每个元素的aria-label会被反复覆盖，最终保留最后一次设置的Sunday
• 代码完全忽略了元素本身的星期标识，没有判断当前标签文本与dayAriaLabels的键是否匹配

修复方案 #

先获取每个标签的文本内容，匹配dayAriaLabels中对应的键，再设置对应的aria-label值，无需遍历整个对象：

const dayAriaLabels = {
  Mo: 'Monday',
  Tu: 'Tuesday',
  We: 'Wednesday',
  Th: 'Thursday',
  Fr: 'Friday',
  Sa: 'Saturday',
  Su: 'Sunday',
};

setTimeout(() => {
  const selectDomElement = document.querySelectorAll('.MuiPickersCalendarHeader-dayLabel');
  if (selectDomElement.length > 0) { // 直接判断元素数量，替代isEmpty
    selectDomElement.forEach((label) => {
      const dayKey = label.textContent.trim(); // 获取标签上的星期缩写
      const fullDayName = dayAriaLabels[dayKey];
      if (fullDayName) { // 确保存在对应值再设置，避免undefined
        label.setAttribute('aria-label', fullDayName);
      }
    });
  }
}, 100);

关键优化点 #

• 移除无效的内层循环，直接通过标签文本作为键匹配对应星期全称
• 增加存在性判断，避免不存在的键导致设置无效值
• 用selectDomElement.length > 0替代isEmpty，更符合原生JS的直观写法

内容的提问来源于stack exchange，提问作者Broken Mind