如何计算数组中数字的总和

技术背景

在 JavaScript 开发中，经常会遇到需要计算数组中所有数字总和的场景。例如，统计一组商品的价格总和、计算一系列数据的累计值等。为了实现这一功能，有多种方法可供选择，不同方法在代码复杂度、性能等方面存在差异。

实现步骤

1. 使用 reduce 方法（ES6 及以上）

const sum = [1, 2, 3].reduce((partialSum, a) => partialSum + a, 0);
console.log(sum); // 6

解释：reduce 方法对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。初始值 0 确保在数组为空时也能正常工作。

2. 传统的 for 循环

const numbers = [1, 2, 3, 4];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log(sum);

解释：通过 for 循环遍历数组的每个元素，并将其累加到 sum 变量中。

3. forEach 方法

const array = [1, 2, 3, 4];
let result = 0;
array.forEach(number => {
    result += number;
});
console.log(result); // 10

解释：forEach 方法为数组中的每个元素执行一次提供的函数。

4. ES6 的 for...of 循环

let total = 0;
for (let value of [1, 2, 3, 4]) {
    total += value; 
}
console.log(total);

解释：for...of 循环遍历可迭代对象（如数组），直接获取每个元素的值。

核心代码

封装为函数

function sumArray(array) {
    let total = 0;
    for (let i = 0; i < array.length; i++) {
        total += array[i];
    }
    return total;
}

console.log(sumArray([1, 2, 3, 4])); // 10

使用 reduce 封装

function total(arr) {
    if (!Array.isArray(arr)) return;
    return arr.reduce((a, v) => a + v);
}

console.log(total([1, 2, 3, 4])); // 10

最佳实践

• 性能优先：如果对性能有较高要求，建议使用 for 循环。因为 for 循环的开销相对较小，尤其是在处理大型数组时，性能优势更明显。
• 代码简洁：如果追求代码的简洁性，reduce 方法是不错的选择。它可以用一行代码实现数组求和。
• 兼容性：考虑到代码的兼容性，对于不支持 ES6 语法的环境，需要使用传统的 for 循环或 forEach 方法。

常见问题

1. 数组为空时的处理

使用 reduce 方法时，必须提供初始值，否则在数组为空时会抛出错误。

const emptyArray = [];
const sum = emptyArray.reduce((a, b) => a + b, 0);
console.log(sum); // 0

2. 数组包含非数字元素

如果数组中可能包含非数字元素，可以在求和之前进行过滤。

const arr = [1, 2, 3, null, 'a'];
const sum = arr.filter((x) => !isNaN(x)).reduce((a, b) => a + b);
console.log(sum);

3. 性能差异

不同方法在性能上存在差异，尤其是在处理大型数组时。可以使用 benchmark.js 进行性能测试，根据测试结果选择合适的方法。