如何在Vue中计算JSON数组中value字段的数值总和？

以下是修正并实现完整求和逻辑的代码：

<script setup lang="ts">
// 定义数组元素的类型，让TypeScript提供类型校验与提示
type TestItem = {
  name: string;
  value: string;
};

const calculateSumofValues = (test?: TestItem[]) => {
  // 边界处理：若传入的test不存在或不是数组，直接返回0
  if (!test || !Array.isArray(test)) return 0;

  // 用reduce遍历累加，将字符串类型的value转为数字后求和
  return test.reduce((total, item) => {
    const numValue = Number(item.value);
    // 处理value不是有效数字的情况，避免出现NaN
    return total + (isNaN(numValue) ? 0 : numValue);
  }, 0);
};
</script>

核心说明： #

• 类型约束：新增TestItem类型明确数组元素结构，避免类型不匹配导致的潜在错误。
• 安全校验：先判断传入参数的有效性，防止undefined或非数组值引发报错。
• 求和逻辑：通过Array.reduce实现累加，同时将字符串类型的value转为数字，额外处理非数字场景保证结果合法性。

模板调用部分保持原写法即可：

<template>
  <td>{{ calculateSumofValues(test) }}</td>
</template>

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