JavaScript数组遍历与求和代码演示

在日常的 JavaScript 业务开发中，遍历数字数组并计算其总和是一项基础且频繁出现的操作。无论是统计购物车商品总额、计算用户积分，还是处理统计图表的数据源，核心逻辑都是从一个初始值开始，依次取出数组中的每一个元素进行累加。本文将介绍四种常见的遍历与求和实现方式，并通过直观流程图和代码示例，帮助读者掌握其底层原理与适用场景。

图 1: 数组遍历累加的基本执行流程

一、基于传统 for 循环遍历求和

传统的 for 循环是编程语言中最通用、最底层的循环语法。它使用索引变量（通常为 i）控制遍历进度，从数组首项索引 0 一直递增到 array.length - 1。

// 传统 for 循环求和示例
const numbers = [10, 20, 30, 40, 50];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log('总和为:', sum); // 输出: 总和为: 150

逻辑解析：在循环启动前，我们声明了 let sum = 0 作为累加器容器。在每次循环迭代中，numbers[i] 获取当前索引处的值，并使用复合赋值运算符 += 将该值加到 sum 上。这种方式的优点是执行性能优秀且能精准控制索引，缺点是需要手动维护计数器，代码相对冗长。

二、使用 for...of 语法直接遍历元素

在 ES6 (ECMAScript 2015) 中，JavaScript 引入了 for...of 语句。如果不需要直接使用数组索引，for...of 可以直接取出数组的每一个元素，消除了手动越界判断的风险。

// for...of 循环求和示例
const scores = [88, 92, 79, 95];
let totalScore = 0;

for (const score of scores) {
  totalScore += score;
}

console.log('成绩总分为:', totalScore); // 输出: 成绩总分为: 354

逻辑解析：在 for (const score of scores) 语句中，每一次循环都会将下一个元素的值赋给常量 score。由于直接获取值，代码的可读性和意图比传统计数循环更为清晰，适合绝大多数单纯遍历数据的场景。

三、使用 forEach 高阶函数遍历

Array.prototype.forEach 是数组原型上提供的高阶函数。它接受一个回调函数，数组中的每个元素都会作为参数依次执行该回调函数。

// forEach 遍历求和示例
const prices = [15.5, 24.0, 9.9];
let totalPrice = 0;

prices.forEach((price) => {
  totalPrice += price;
});

console.log('价格总计:', totalPrice); // 输出: 价格总计: 49.4

注意要点：forEach 本身没有返回值（返回 undefined），因此累加依然依赖于外部作用域中定义的变量 totalPrice。另外，forEach 无法通过 break 或 return 中途跳出循环，如果需要提前终止遍历，应考虑传统循环或 some/every 方法。

图 2: 遍历求和的两种核心状态管理机制对比

四、使用 reduce 方法实现函数式求和（推荐）

Array.prototype.reduce 是 JavaScript 专门用于将数组缩减（规约）为单一值的标准方法。它是数组求和最优雅、最符合函数式编程理念的做法。

// reduce 方法求和示例
const values = [1, 2, 3, 4, 5];

const total = values.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log('求和结果:', total); // 输出: 求和结果: 15

// 简写为单行箭头函数:
const totalConcise = values.reduce((acc, cur) => acc + cur, 0);

图 3: reduce 方法在迭代中传递累加器的执行过程

五、实际场景进阶：对象数组属性求和

在实际业务中，纯数字数组相对较少，更普遍的情况是后端返回由若干对象构成的列表，我们需要汇总其中某一个特定数值字段（如商品价格或数量）。

// 电商购物车商品价格求和
const cartItems = [
  { id: 101, name: '机械键盘', price: 299, count: 1 },
  { id: 102, name: '游戏鼠标', price: 159, count: 2 },
  { id: 103, name: '大号鼠标垫', price: 39, count: 1 }
];

// 计算商品总价 (单价 × 数量)
const totalAmount = cartItems.reduce((sum, item) => {
  return sum + (item.price * item.count);
}, 0);

console.log('订单总额:', totalAmount); // 299*1 + 159*2 + 39*1 = 656

六、综合总结与技术选型

不同的遍历与求和方式各有侧重，开发者在实际项目中应根据场景需求做出明智选择：

图 4: 四种数组求和方案特性与选型总结