如何在 JavaScript 表格中计算并渲染年同比（YoY）百分比变化-js教程-PHP中文网

如何在 JavaScript 表格中计算并渲染年同比（YoY）百分比变化

本文详解如何基于对象数组动态生成 html 表格，并为每行添加年同比（yoy）变化率列——通过访问相邻年份数据实现差值与百分比计算，支持正负颜色区分与首行空缺处理。

本文详解如何基于对象数组动态生成 html 表格，并为每行添加年同比（yoy）变化率列——通过访问相邻年份数据实现差值与百分比计算，支持正负颜色区分与首行空缺处理。

在 React（或 JSX 环境）中渲染带 YoY（Year-over-Year）变化率的表格时，关键在于：当前行需引用“下一年”（即时间上更早一年）的数据进行对比。注意题中数据按年份降序排列（2023 → 2019），因此对 2023 行而言，“上年”是 2022 行（即 index + 1），而非 index - 1——这也是原代码 parsedAdmin2ReportData[index-1] 失败的根本原因：它试图取前一行（年份更大），而数据中前一行实际是未来年份。

正确做法是在 .map() 的回调中接收第三个参数 arr（即原数组本身），利用 index + 1 安全访问下一项，并增加边界判断。以下是优化后的完整实现：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

<tbody>
  {parsedAdmin2ReportData.map((row, index, arr) => {
    let yoyValue = null; // 存储计算出的 YoY 小数值（如 -0.123）
    let yoyDisplay = ''; // 最终显示的字符串（含%和颜色）

    // 只有存在“下一年”（即非最后一行）才计算 YoY
    if (index = 0 ? 'green' : 'red', fontWeight: '500' }
      : {};

    return (
      <tr key="{row.Years}"> {/* 推荐用唯一字段如 Years 作 key，避免 index 变动风险 */}
        <td>{row.Years}</td>
        <td>{row.New}</td>
        <td>{row.Updates}</td>
        <td>{row.New + row.Updates}</td>
        <td>{row.New}</td>
        <td style="{yoyStyle}">{yoyDisplay || '-'}</td>
      </tr>
    );
  })}
</tbody>

✅ 关键要点说明：

索引逻辑修正：因数组按年份降序排列，index + 1 对应“上年”，index - 1 反而指向“下年”，故必须用 arr[index + 1]；
边界防护：if (index
key 最佳实践：将 key={index} 改为 key={row.Years}，避免列表重排时 React Diff 异常；
样式处理：使用内联 style 动态控制文字颜色，亦可抽离为 CSS 类（如 class={yoyValue >= 0 ? 'positive' : 'negative'}）；
空值容错：对无 YoY 数据的行（如 2019）显示 '-'，提升表格可读性。

? 进阶提示：若需支持升序排列（2019 → 2023），只需将条件改为 if (index > 0) 并取 arr[index - 1]，核心逻辑不变。统一的数据预处理（如按年份排序）可进一步提升代码健壮性。