vue3 + ts，对象里的属性求和

已知data1如下

data1 = [
            { A: 1, B: 2, C: 3, D: 4 },
            { A: 2, B: 1, C: 1, D: 3 },
        ]

得到data2如下：

data2 = [
            {
                name: 'A',
                value: data1[0].A + data1[1].A + data1[2].A
            },
            {
                name: 'B',
                value: data1[0].B + data1[1].B + data1[2].B
            }
        ]

实现如下：

data1是一个数组，每个对象都有键名 A、B、C 和 D。使用 reduce 方法计算了键名 A 和 B 的总和，并将结果存储在 data2 数组中的相应对象中的 value 字段中

<script lang="ts">
import { defineComponent } from 'vue';

interface DataItem {
  A: number;
  B: number;
  C: number;
  D: number;
}

export default defineComponent({
  data() {
    const data1: DataItem[] = [
      { A: 1, B: 2, C: 3, D: 4 },
      { A: 2, B: 1, C: 1, D: 3 },
    ];
    // 计算键名 A 的总和
    const sumA = data1.reduce((acc, obj) => acc + obj.A, 0); 
    // 计算键名 B 的总和
    const sumB = data1.reduce((acc, obj) => acc + obj.B, 0); 

    const data2 = [
      { name: 'A', value: sumA },
      { name: 'B', value: sumB },
    ];

    return {
      data2,
    };
  },
});
</script>