JS中如何优雅地计算数组所有元素的和？

Question

在JavaScript中，如何优雅地计算数组所有元素的和？我们可以使用`Array.prototype.reduce()`方法来实现。相比传统的`for`循环，`reduce`方法代码更简洁且更具可读性。例如，给定一个数组`[1, 2, 3, 4]`，可以通过以下方式求和：`const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);`。这里，`accumulator`累积每次迭代的结果，`currentValue`是当前元素值，初始值设为0。需要注意的是，当数组为空时，`reduce`会返回设置的初始值，避免了未定义结果的问题。此外，对于包含非数字类型的数组，应先过滤无效值，如使用`filter`移除`NaN`或非数字项，确保计算准确性。这种写法不仅高效，还符合函数式编程风格，是现代JS开发中的推荐实践。

Answer 1

1. 基础入门：JavaScript中数组求和的基本方法

在JavaScript中，计算数组所有元素的和是常见的需求。传统的方法通常是使用`for`循环遍历数组并累加每个元素。然而，现代JavaScript提供了更简洁优雅的解决方案——`reduce`方法。

例如，给定一个简单的数组 `[1, 2, 3, 4]`，我们可以这样实现：

const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 10
    

`reduce` 方法接受两个参数：一个回调函数和一个初始值（这里是`0`）。回调函数接收四个参数：`accumulator`（累积器）、`currentValue`（当前值）、`currentIndex`（当前索引）和`array`（原数组）。其中，`accumulator` 是每次迭代的结果，`currentValue` 是当前处理的数组元素。

2. 进阶应用：处理复杂情况下的数组求和

在实际开发中，数组可能包含非数字类型的数据，例如字符串、`null` 或 `undefined`。这种情况下，直接使用 `reduce` 可能会导致错误或不准确的结果。为确保计算准确性，可以结合 `filter` 方法先过滤掉无效值。

以下代码展示了如何处理包含非数字类型的数组：

const arr = [1, '2', null, undefined, NaN, 4];
const sum = arr
    .filter(item => typeof item === 'number' && !isNaN(item))
    .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 5
    

这里，`filter` 方法用于移除非数字项和 `NaN` 值，从而保证后续计算的正确性。

3. 高级优化：提升代码性能与可读性

虽然 `reduce` 方法简洁且功能强大，但在某些场景下可能需要进一步优化性能。例如，当数组非常大时，频繁调用回调函数可能会带来额外开销。此时，可以通过减少不必要的操作来提高效率。

以下是通过箭头函数简化代码的例子：

const sum = ([...arr]) => arr.reduce((a, b) => a + (typeof b === 'number' ? b : 0), 0);
console.log(sum([1, 2, '3', NaN, 4])); // 输出 7
    

此外，还可以结合 `map` 和 `reduce` 实现更复杂的逻辑。例如，将字符串转换为数字后再求和：

const arr = ['1', '2', 'three', '4'];
const sum = arr
    .map(Number)
    .filter(num => !isNaN(num))
    .reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 输出 7
    

4. 总结与扩展：函数式编程风格的应用

`reduce` 方法不仅适用于数组求和，还广泛应用于数据聚合、对象属性提取等场景。它体现了函数式编程的核心思想——通过纯函数操作不可变数据，从而提升代码的可维护性和复用性。

以下是使用 `reduce` 实现对象数组求和的例子：

Key	Value
Sum of Values	const data = [{ id: 1, value: 10 }, { id: 2, value: 20 }, { id: 3, value: 30 }]; const total = data.reduce((acc, cur) => acc + cur.value, 0); console.log(total); // 输出 60

这种方法不仅可以处理简单的数值数组，还能轻松应对嵌套结构和复杂数据类型。