如何用for循环简化天气API数据渲染的JavaScript函数？

我是Web开发训练营学员，正在做项目开发。我知道当前的JavaScript函数可以简化，但还没找到方法。我调用天气API并把数据渲染到HTML里，因为没法用JQuery的$符号，所以用querySelector操作DOM。想请教怎么用for循环简化这段逐个操作元素的代码？

HTML代码 #

<div class="row bottom">
  <div class="col"><span class="subtitle">-Temperature-</span></div>
  <div class="col">
    <div class="row" id="date1">Sun</div>
    <div class="row data" id="date1Temp"><b>-4&deg;</b></div>
  </div>
  <div class="col">
    <div class="row" id="date2">Mon</div>
    <div class="row data" id="date2Temp"><b>-5&deg;</b></div>
  </div>
  <div class="col">
    <div class="row" id="date3">Tue</div>
    <div class="row data" id="date3Temp"><b>-10&deg;</b></div>
  </div>
  <div class="col">
    <div class="row" id="date4">Wed</div>
    <div class="row data" id="date4Temp"><b>-4&deg;</b></div>
  </div>
  <div class="col">
    <div class="row" id="date5">Thu</div>
    <div class="row data" id="date5Temp"><b>-2&deg;</b></div>
  </div>
  <div class="col">
    <hr />
  </div>
</div>

原始JS代码 #

let fiveDayWeather = function (weatherValue) {
  const date1 = document.querySelector("#date1");
  const date2 = document.querySelector("#date2");
  const date3 = document.querySelector("#date3");
  const date4 = document.querySelector("#date4");
  const date5 = document.querySelector("#date5");

  const date1Temp = document.querySelector("#date1Temp");
  const date2Temp = document.querySelector("#date2Temp");
  const date3Temp = document.querySelector("#date3Temp");
  const date4Temp = document.querySelector("#date4Temp");
  const date5Temp = document.querySelector("#date5Temp");

  let todaysMonth = dayjs().$M;
  let tomorrow = dayjs().$D + 1;
  let twoDaysAfter = dayjs().$D + 2;
  let threeDaysAfter = dayjs().$D + 3;
  let fourDaysAfter = dayjs().$D + 4;
  let fiveDaysAfter = dayjs().$D + 5;

  date1.innerText = `${todaysMonth}/${tomorrow}`;
  date1Temp.innerText = weatherValue.list[1].main.temp + "\u00B0 F";
  date2.innerText = `${todaysMonth}/${twoDaysAfter}`;
  date2Temp.innerText = weatherValue.list[2].main.temp + "\u00B0 F";
  date3.innerText = `${todaysMonth}/${threeDaysAfter}`;
  date3Temp.innerText = weatherValue.list[3].main.temp + "\u00B0 F";
  date4.innerText = `${todaysMonth}/${fourDaysAfter}`;
  date4Temp.innerText = weatherValue.list[4].main.temp + "\u00B0 F";
  date5.innerText = `${todaysMonth}/${fiveDaysAfter}`;
  date5Temp.innerText = weatherValue.list[5].main.temp + "\u00B0 F";
};

简化后的解决方案 #

核心是通过循环遍历索引，动态完成DOM元素获取、日期计算和数据渲染，彻底消除重复代码：

let fiveDayWeather = function (weatherValue) {
  const currentDate = dayjs();

  // 循环处理1-5天的数据
  for (let i = 1; i <= 5; i++) {
    // 动态拼接ID，获取对应DOM元素
    const dateElement = document.querySelector(`#date${i}`);
    const tempElement = document.querySelector(`#date${i}Temp`);

    // 用dayjs的add方法计算日期，自动处理跨月/跨年
    const targetDate = currentDate.add(i, 'day');
    const displayDate = `${targetDate.month()}/${targetDate.date()}`;

    // 渲染日期和温度
    dateElement.innerText = displayDate;
    tempElement.innerText = `${weatherValue.list[i].main.temp}\u00B0 F`;
  }
};

关键优化点： #

• 动态元素选择：用模板字符串拼接date${i}和date${i}Temp，循环里一次获取对应元素，不用逐个声明变量。
• 可靠日期计算：替换原代码直接加天数的逻辑，用dayjs官方的add方法，能自动处理月底跨月、跨年等边界情况，避免日期显示错误。
• 规范dayjs调用：不再直接访问dayjs内部属性$M、$D，改用公开APImonth()和date()，更稳定且符合最佳实践。
• 代码复用：把重复的渲染逻辑压缩到循环内，代码量大幅减少，后期维护（比如修改显示格式）只需改一处。

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