如何在JavaScript数组对象表格中实现YoY百分比变化列？

问题背景 #

现有年份数据数组：

[{"Years":2023,"New":305,"Updates":360},
 {"Years":2022,"New":334,"Updates":467},
 {"Years":2021,"New":272,"Updates":502},
 {"Years":2020,"New":291,"Updates":377},
 {"Years":2019,"New":327,"Updates":365}]

已实现生成包含Year、New、Updates、Total列的表格，但添加YoY同比变化列时，尝试用parsedAdmin2ReportData[index-1].New获取上一年数据失败。需求为：

• YoY计算逻辑：((上一年New+上一年Updates)-(本年New+本年Updates))/(上一年New+上一年Updates)，结果转百分比显示
• 样式：负值红色，正值绿色
• 2019年无需计算该列

失败原因 #

当前数据数组是年份降序排列（2023→2019），上一年的数据在数组的index+1位置，而非index-1。当index=0（对应2023年）时，index-1=-1，访问parsedAdmin2ReportData[-1]会返回undefined，导致计算失败。

解决方案 #

修改代码，根据数据顺序正确获取上一年数据，同时实现计算与样式逻辑：

<tbody>
{parsedAdmin2ReportData.map((row, index) => {
  const currentTotal = row.New + row.Updates;
  // 2019年或无上年数据时不计算YoY
  if (row.Years === 2019 || index >= parsedAdmin2ReportData.length - 1) {
    return (
      <tr key={index}>
        <td>{row.Years}</td>
        <td>{row.New}</td>
        <td>{row.Updates}</td>
        <td>{currentTotal}</td>
        <td>-</td>
      </tr>
    );
  }
  // 获取上一年数据（数组降序，上年在index+1位置）
  const prevYearRow = parsedAdmin2ReportData[index + 1];
  const prevTotal = prevYearRow.New + prevYearRow.Updates;
  // 计算YoY变化率并转百分比
  const yoyChange = ((prevTotal - currentTotal) / prevTotal) * 100;
  // 设置颜色样式
  const textColor = yoyChange > 0 ? 'green' : yoyChange < 0 ? 'red' : 'inherit';
  
  return (
    <tr key={index}>
      <td>{row.Years}</td>
      <td>{row.New}</td>
      <td>{row.Updates}</td>
      <td>{currentTotal}</td>
      <td style={{ color: textColor }}>{`${yoyChange.toFixed(2)}%`}</td>
    </tr>
  );
})}
</tbody>

代码说明 #

1. 计算本年Total：直接求和当前行的New与Updates
2. 判断是否跳过计算：2019年或数组最后一行（无上年数据）时，显示-
3. 获取上年数据：利用数组降序特性，通过index+1获取上一年的行数据
4. 计算YoY变化率：按需求公式计算后乘以100转为百分比，用toFixed(2)保留两位小数
5. 样式控制：通过内联样式根据变化率正负设置文字颜色，零值继承默认颜色

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