求优化：JavaScript计算人员年龄与身高总和的高效实现方案

需求说明 #

计算给定人员数组中所有ages数组元素的总和、heights数组元素的总和，输入输出示例如下：

输入示例 #

[
  {
    "personId": 1,
    "ages": [1,4,5],
    "heights": [1,1,2]
  },
  {
    "personId": 2,
    "ages": [4,2,2],
    "heights": [1,4,2]
  },
  {
    "personId": 2,
    "ages": [2,1,1],
    "heights": [12]
  }
]

期望输出 #

[
  {
    "type": "ages",
    "values": 22
  },
  {
    "type": "heights",
    "values": 23
  }
]

现有代码的问题 #

原实现存在多处冗余与性能浪费：

• 重复遍历resultArr查找统计项，每次处理都要循环查找，增加不必要的时间开销
• 逻辑重复：ages和heights的处理逻辑几乎完全一致，没有复用
• 计算逻辑错误：累加时错误叠加了初始值agesTotal/heightsTotal，导致结果异常
• 不必要的类型转换：parseFloat在元素本身是数字时完全多余，增加计算成本

最优高性能解决方案 #

方案1：单次遍历+直接累加（性能最优） #

通过一次遍历完成所有统计，避免重复循环和冗余操作，适合大数据量场景：

const sourceArr = [
  {personId: 1, ages: [1,4,5], heights: [1,1,2]},
  {personId: 2, ages: [4,2,2], heights: [1,4,2]},
  {personId: 2, ages: [2,1,1], heights: [12]}
];

// 初始化统计变量
let totalAges = 0;
let totalHeights = 0;

// 单次遍历源数组，同时处理ages和heights
for (const person of sourceArr) {
  // 累加ages总和，先判断数组存在且有元素
  if (person.ages?.length) {
    for (const age of person.ages) {
      totalAges += age;
    }
  }
  // 累加heights总和
  if (person.heights?.length) {
    for (const height of person.heights) {
      totalHeights += height;
    }
  }
}

// 生成结果数组
const result = [
  { type: "ages", values: totalAges },
  { type: "heights", values: totalHeights }
];

console.log(result);

方案2：复用累加逻辑+数组方法（代码简洁优先） #

如果追求代码简洁且性能损失可忽略，可提取通用累加函数，结合数组方法实现：

const sourceArr = [
  {personId: 1, ages: [1,4,5], heights: [1,1,2]},
  {personId: 2, ages: [4,2,2], heights: [1,4,2]},
  {personId: 2, ages: [2,1,1], heights: [12]}
];

// 通用累加函数：计算数组元素总和，处理数组不存在的情况
const sumArray = (arr) => arr?.reduce((sum, num) => sum + num, 0) || 0;

// 计算总合
const totalAges = sourceArr.reduce((sum, person) => sum + sumArray(person.ages), 0);
const totalHeights = sourceArr.reduce((sum, person) => sum + sumArray(person.heights), 0);

const result = [
  { type: "ages", values: totalAges },
  { type: "heights", values: totalHeights }
];

console.log(result);

方案对比 #

• 方案1：性能最优，仅需一次遍历源数组+内层数组遍历，无额外函数调用开销，适合处理大规模数据
• 方案2：代码更简洁，可读性强，通过复用函数减少冗余，但reduce的函数调用会带来极轻微的性能损耗，小数据量场景下完全可以忽略

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