Vuex Getter中使用for循环遍历状态数据报错：i未定义求解

问题场景 #

我正在开发基于Vuex和Chart.js的天气应用，已通过Axios调用API获取数据并存入Vuex状态，且能通过Getter在图表中展示数据。问题在于温度数据是提前一周的逐小时数据，数组内包含7×24个值，我希望按日而非小时展示图表，因此需要将数组按24个单位分组，计算每组平均值后生成含7个值的新数组。

尝试编写的Getter代码：

getters: {
  budapestTemp: state => {
    let arr = state.budapest.hourly?.temperature_2m;
    let avgArray = [];

    for(i = 0; i < arr.length; i += 24) { 
        total = arr[i] + (arr[i+1] || 0)+ (arr[i+2] || 0) ;
        avg = total/3;
        avgArray.push(Math.round(avg));
      };
      return avgArray;
  },
}

控制台报错：

Uncaught (in promise) ReferenceError: i is not defined
at budapestTemp (index.js?68eb:24:1)
at wrappedGetter (vuex.esm-bundler.js?03c9:352:1)

解决方案 #

错误原因 #

代码中i、total、avg三个变量未用let/const声明，导致变量泄漏到全局作用域，在严格模式下触发ReferenceError。同时原代码仅计算了每天前3小时的平均值，未覆盖全天24小时数据，不符合需求。

修复后的代码 #

getters: {
  budapestTemp: state => {
    const arr = state.budapest.hourly?.temperature_2m;
    const avgArray = [];
    
    // 空值判断：避免API数据未加载时报错
    if (!arr) return avgArray;

    // 按24小时为一组遍历数组
    for (let i = 0; i < arr.length; i += 24) {
      // 截取当天的24小时温度数据
      const dailyTemps = arr.slice(i, i + 24);
      // 计算当天温度总和
      const total = dailyTemps.reduce((sum, temp) => sum + temp, 0);
      // 计算平均值并取整
      const avg = Math.round(total / dailyTemps.length);
      avgArray.push(avg);
    }
    return avgArray;
  },
}

关键优化点 #

• 用let声明循环变量i，const声明常量，避免全局变量污染
• 增加数组空值判断，处理API数据未加载或异常的情况
• 使用slice精准截取每日24小时数据，确保分组完整
• 用reduce方法计算总和，比手动累加更简洁可靠，覆盖所有数据点

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