如何使用for循环简化这段重复的JavaScript页面渲染代码？

你可以用单个for循环彻底简化这段重复代码，优化后的实现如下：

for (let i = 1; i <= 8; i++) {
  // 获取当前循环对应的数据源
  const currentDi = j[`di_${i}`];
  // 获取需要操作的DOM元素，避免重复调用查询方法
  const el3 = q(`di${i}_3`);
  const el1 = q(`di${i}_1`);

  // 处理状态切换逻辑
  if (currentDi[0] === 1) {
    el3.innerHTML = h;
    el3.className = "fg";
    el1.className = "wg";
  } else {
    el3.innerHTML = l;
    el3.className = "fr";
    el1.className = "wr";
  }

  // 设置日期内容
  q(`di${i}_4`).innerHTML = sectoday(currentDi[1]);
}

优化说明 #

• 利用循环变量i拼接出对应的数据源属性（di_1到di_8）和DOM元素ID（di1_3到di8_4），彻底消除重复代码
• 提前缓存需要重复操作的DOM元素（el3、el1），减少DOM查询次数，性能更优
• 用严格相等运算符===替代==，符合JavaScript最佳实践
• 逻辑和原代码完全一致，不会改变原有功能

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