怎样用JavaScript计算数组元素的总和？

在处理前端数据的时候，经常需要对数组里的数值做求和操作，比如统计订单总金额、计算用户得分总和等，下面就来介绍几种常用的JavaScript数组求和实现方式。

基础for循环实现

这是最直观的实现方式，通过遍历数组的每个元素，累加到总和变量中，兼容性很好，适合所有运行环境。

// 定义待求和的数组
const arr = [10, 20, 30, 40, 50];
// 初始化总和变量
let sum = 0;
// 遍历数组累加
for (let i = 0; i < arr.length; i++) {
    // 确保元素为数字再累加，避免非数字元素影响结果
    if (typeof arr[i] === 'number' && !isNaN(arr[i])) {
        sum += arr[i];
    }
}
console.log(sum); // 输出150

for...of循环实现

for...of是ES6新增的遍历语法，相比传统for循环写法更简洁，同样可以处理数组求和逻辑。

const arr = [10, 20, 30, 40, 50];
let sum = 0;
for (const item of arr) {
    if (typeof item === 'number' && !isNaN(item)) {
        sum += item;
    }
}
console.log(sum); // 输出150

使用reduce方法实现

数组的reduce方法是处理累加场景的专用方法，内置了累加逻辑，代码更简洁，是实际开发中最常用的方式。

const arr = [10, 20, 30, 40, 50];
// reduce接收两个参数，第一个是累加器函数，第二个是初始值
const sum = arr.reduce((accumulator, current) => {
    // 处理当前元素，如果是数字则累加，否则保持原累加值
    if (typeof current === 'number' && !isNaN(current)) {
        return accumulator + current;
    }
    return accumulator;
}, 0);
console.log(sum); // 输出150

递归方式实现

除了循环方式，也可以用递归的思路实现数组求和，适合理解递归逻辑的场景，不过数组长度过大时可能存在栈溢出风险。

function arraySum(arr, index = 0) {
    // 递归终止条件，遍历到数组末尾返回0
    if (index >= arr.length) {
        return 0;
    }
    // 获取当前元素值，非数字按0处理
    const current = typeof arr[index] === 'number' && !isNaN(arr[index]) ? arr[index] : 0;
    // 递归累加后续元素
    return current + arraySum(arr, index + 1);
}

const arr = [10, 20, 30, 40, 50];
const sum = arraySum(arr);
console.log(sum); // 输出150

特殊情况处理

实际开发中数组可能包含非数字元素、空数组等情况，需要注意做兼容处理：

• 空数组求和时，使用reduce方法要设置初始值为0，避免报错
• 数组包含字符串数字时，可以先通过Number方法转换再累加
• 数组包含null、undefined时，需要提前过滤或者做默认值处理

下面是处理混合类型数组的示例：

const arr = [10, '20', null, undefined, 30, 'abc'];
const sum = arr.reduce((acc, cur) => {
    const num = Number(cur);
    // 转换后是有效数字才累加
    if (!isNaN(num)) {
        return acc + num;
    }
    return acc;
}, 0);
console.log(sum); // 输出60，也就是10+20+30的结果

JavaScript数组求和reduce方法for循环递归修改时间：2026-05-29 23:42:35