在Angular应用中如何计算对象数组指定数值属性的平均值

实现方案 #

你可以写一个通用的属性平均值计算方法，适配动态新增的数组元素，无需重复写num1、num2的计算逻辑：

// 写在你的Angular组件类中
data: Array<{num1: number, num2: number}> = [
  { num1:12.233, num2: 13.345 },
  { num1:10.233, num2: 23.345 },
  { num1:18.233, num2: 33.345 }
];

/**
 * 计算数组指定数值属性的平均值
 * @param propertyName 要计算的属性名，可选值为num1/num2
 */
getAverage(propertyName: 'num1' | 'num2'): number {
  // 空数组直接返回0，避免除以0报错
  if (!this.data?.length) return 0;
  // reduce累加指定属性的数值总和
  const total = this.data.reduce((sum, item) => sum + item[propertyName], 0);
  // 计算平均值，如需固定保留n位小数可配合toFixed使用
  return total / this.data.length;
}

调用方式 #

• 组件逻辑中取值：

  const avgNum1 = this.getAverage('num1');
  const avgNum2 = this.getAverage('num2');
  

• 模板中直接渲染（可配合Angular内置number管道格式化小数位数）：

  <div>num1平均值：{{ getAverage('num1') | number:'1.2-2' }}</div>
  <div>num2平均值：{{ getAverage('num2') | number:'1.2-2' }}</div>
  

注意事项 #

• 方法默认兼容空数组场景，不会返回NaN
• 后续如果新增其他需要计算平均值的数值属性，只需修改getAverage入参的类型定义即可复用逻辑
• 如果需要固定保留小数位，可修改返回值逻辑为return Number((total / this.data.length).toFixed(2))，其中2为要保留的小数位数

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