JavaScript：如何简化JSON数组对象指定属性值的累加代码？

AI 小北

2026-6-19

更简洁的数组属性累加实现方案

你的手动逐个索引累加方式不仅代码冗长，还容易出现重复计算（比如你代码里重复加了observations[13]两次），可以用以下几种更高效简洁的方式实现：

方案1：使用`Array.reduce`（推荐）

reduce是数组处理累加场景的标准方法，代码简洁且可读性强，同时能处理属性缺失的边界情况：

if (observations.length >= 32) {
  const totalPrecip = observations
    .slice(0, 32) // 精准获取索引0至31的32个元素
    .reduce((sum, item) => {
      // 安全获取precipTotal属性，避免因属性缺失报错
      const precipValue = item?.imperial?.precipTotal;
      // 只累加有效数字，非数字值按0处理
      return sum + (typeof precipValue === 'number' ? precipValue : 0);
    }, 0); // 累加初始值设为0

  document.getElementById("ajaxrainmo").textContent = `${totalPrecip} in`;
}

方案2：使用`for`循环（适合基础场景）

如果对reduce不熟悉，常规for循环也能实现更简洁的代码：

if (observations.length >= 32) {
  let totalPrecip = 0;
  for (let i = 0; i <= 31; i++) {
    const precipValue = observations[i]?.imperial?.precipTotal;
    totalPrecip += typeof precipValue === 'number' ? precipValue : 0;
  }
  document.getElementById("ajaxrainmo").textContent = `${totalPrecip} in`;
}