TypeScript数组求和计算店铺评分时数值无法识别问题求助

存在的问题 #

• 数值类型未做校验：累加评分时直接取review[i].review，如果接口返回的该字段是字符串类型，累加操作会变成字符串拼接，最终得到非预期的结果，这是你提到的「无法识别对应数值」的核心原因。
• 数组遍历方式不规范：使用for...in遍历数组会额外遍历原型链上的可枚举属性，可能拿到非评价项的异常值，推荐使用for...of或者forEach遍历数组。
• 无边界情况兜底：如果没有任何评价时globalRating为0，直接计算除法会得到NaN，导致后续渲染逻辑异常。
• 延迟执行逻辑不可靠：用固定时长的setTimeout等待数据加载的方案稳定性差，若数据加载超时就会出现计算空值的问题。
• 变量拼写错误：Raiting、precentage属于拼写笔误，不影响运行但会提升后续维护成本。

优化后的代码 #

Review(i, totalReviews) {
  let globalRating = 0;
  let globalReviews = 0;

  // 若确实需要延迟执行，建议先判断数据是否存在，或者替换为异步等待逻辑
  setTimeout(() => {
    // 先做数据合法性校验
    if (!Array.isArray(totalReviews) || totalReviews.length === 0) {
      console.log("暂无评价数据");
      // 可以在这里渲染无评价的默认状态
      return;
    }

    totalReviews.forEach(reviewGroup => {
      // 累加评价总数
      globalRating += reviewGroup.length;
      // 遍历单组评价累加评分
      for (const reviewItem of reviewGroup) {
        // 转成数值类型，避免字符串拼接问题，非法值按0处理
        const reviewScore = Number(reviewItem.review) || 0;
        globalReviews += reviewScore;
        console.log("单条评价评分", reviewItem);
      }
    });

    console.log("总评价数", globalRating);
    console.log("总评分累加值", globalReviews);

    // 兜底无评价的情况
    if (globalRating === 0) {
      // 渲染0分默认状态
      $(".br-theme-fontawesome-stars").html(`<select class="ps-rating reviewsOption" data-read-only="true"></select>`);
      Rating.fnc();
      return;
    }

    const averageReviews = Math.round(globalReviews / globalRating);
    const percentage = Math.round(globalReviews * 100 / (globalRating * 5));
    const averageRating = DinamicReviews.fnc(averageReviews);

    $(".br-theme-fontawesome-stars").html(`<select class="ps-rating reviewsOption" data-read-only="true"></select>`);

    for (let i = 0; i < averageRating.length; i++) {
      $(".reviewsOption").append(`<option value="${averageRating[i]}">${i + 1}</option>`);
    }

    Rating.fnc();
  }, i * 100);
}

额外优化建议 #

• 如果totalReviews是异步请求返回的数据，建议去掉固定延迟的setTimeout，把计算逻辑放到请求成功的回调函数中，或者使用async/await等待数据加载完成后再执行计算，彻底避免数据未加载完成就开始计算的问题。
• 可以给review相关的字段定义TS类型，提前规范数据结构，从类型层面避免取错字段或者类型不匹配的问题。

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