如何处理5天逐3小时Weather API数据，实现按日分组与气温极值获取

我是编程新手，正在调用5天/3小时的天气API获取预报数据，目前遇到两个问题：

• 无法将同一天的数据分组到同一个对象中
• 不知道如何获取每日最高、最低气温

我期望把同一天（比如周六）的所有预报数据整合为单个对象，格式示例如下：

// 最终期望的数组格式
const dailyForecasts = [
  { day: 'Sat Jun 15', temp: [18, 20, 22, 21, 19, 17, 16, 17], icon: ['01d', '02d', '03d', '03n', '04n', '04n', '01n', '02n'] },
  { day: 'Sun Jun 16', temp: [17, 19, 23, 24, 22, 20, 18, 17], icon: ['02d', '01d', '01d', '02n', '03n', '04n', '01n', '02n'] },
  // ...后续日期
]

我不局限于只获取气温极值或对应图标，也觉得每日平均气温不够贴合实际，欢迎各类实现思路。以下是我当前的代码：

fetch(
  `${apiForecastUrl}q=${inputForecast}&appid=${apiKey}&units=metric`
)
  .then((response) => response.json())
  .then((data) => {
    let forecastObjArr = [];
    for (let i = 0; i < data.list.length; i++) {
      let forecastDay = new Date(data.list[i].dt * 1000).toString().slice(0, 24);
      let forecastTemp = data.list[i].main.temp;
      let forecastIcon = data.list[i].weather[0].icon;
 
      let forecastObj = {
        day: forecastDay,
        temp: forecastTemp,
        icon: forecastIcon,
      };
      forecastObjArr.push(forecastObj);
    }
    console.log(forecastObjArr);
  });

核心思路：按日期分组聚合数据 #

先用一个临时对象存储按日期分组的数据，键为日期字符串，值为包含day、temp数组、icon数组的对象（可扩展存储最高/最低温）。遍历API返回的每一条3小时预报数据时，判断当前日期是否已存在于分组对象中，存在则追加数据，不存在则新建分组条目。最后将分组对象转换为目标数组格式即可。

修改后的代码 #

fetch(
  `${apiForecastUrl}q=${inputForecast}&appid=${apiKey}&units=metric`
)
  .then((response) => response.json())
  .then((data) => {
    // 临时分组对象，用日期作为键
    const groupedByDay = {};

    for (let i = 0; i < data.list.length; i++) {
      const item = data.list[i];
      // 生成统一的日期标识（比如"Sat Jun 15"），避免时区或格式差异导致分组失败
      const date = new Date(item.dt * 1000);
      const dayStr = date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
      
      const temp = item.main.temp;
      const icon = item.weather[0].icon;
      // 可选：获取当前条目的最高/最低温，用于后续计算每日极值
      const tempMax = item.main.temp_max;
      const tempMin = item.main.temp_min;

      // 如果该日期已存在分组，追加数据
      if (groupedByDay[dayStr]) {
        groupedByDay[dayStr].temp.push(temp);
        groupedByDay[dayStr].icon.push(icon);
        // 可选：更新每日最高/最低温
        groupedByDay[dayStr].tempMax = Math.max(groupedByDay[dayStr].tempMax, tempMax);
        groupedByDay[dayStr].tempMin = Math.min(groupedByDay[dayStr].tempMin, tempMin);
      } else {
        // 不存在则新建分组
        groupedByDay[dayStr] = {
          day: dayStr,
          temp: [temp],
          icon: [icon],
          // 可选：初始化每日最高/最低温
          tempMax: tempMax,
          tempMin: tempMin
        };
      }
    }

    // 将分组对象转换为数组格式
    const forecastObjArr = Object.values(groupedByDay);
    console.log(forecastObjArr);
  });

关键细节说明 #

1. 日期格式化：使用toLocaleDateString生成统一的日期字符串（比如"Sat Jun 15"），比直接截取toString()的结果更可靠，避免不同环境下字符串格式不一致导致分组错误。
2. 分组逻辑：通过groupedByDay对象的键快速判断日期是否已存在，时间复杂度为O(n)，效率更高。
3. 扩展功能：代码中预留了每日最高/最低温的计算逻辑，只需保留对应字段即可；如果需要计算平均气温，可在分组完成后对每个日期的temp数组求和再除以长度。
4. 灵活性：可根据需求自由扩展分组对象的字段，比如添加降水概率、风速等其他API返回的数据。

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