【JavaScript】_.sum 及其相关功能详解

在开发中，处理数据时常常需要对数组中的数字进行求和操作。虽然 JavaScript 本身提供了简单的数组遍历和求和的方法，但有时这些操作会显得冗长或缺乏灵活性。为了简化这些常见的操作，Lodash 库提供了 _.sum 函数，它让数组求和变得更加简便。本文将详细介绍 _.sum 及其相关功能，帮助你更加高效地在 JavaScript 中处理数组求和。

一、什么是 _.sum

_.sum 是 Lodash 库中的一个函数，它用于计算数组中所有数字元素的总和。Lodash 是一个非常流行的 JavaScript 实用工具库，提供了大量高效且易用的方法来简化开发过程。_.sum 使得数组的求和变得非常简单且高效，特别适用于处理包含数字的数组。

1. _.sum 的基础用法

_.sum 接受一个数组作为参数，并返回该数组中所有数值的总和。如果数组中包含非数值元素（如字符串、布尔值等），这些元素会被自动忽略。例如：

const _ = require('lodash');

const numbers = [1, 2, 3, 4, 5];
const result = _.sum(numbers);

console.log(result);  // 输出 15

在这个例子中，_.sum 会自动将数组中的每个数字加起来，结果是 15。

2. 忽略非数字类型

_.sum 会自动忽略数组中的非数值类型元素。这是一个非常方便的特性，因为数组中可能包含其他类型的数据，而我们通常只关心数值的求和。例如：

const arr = [1, 2, '3', true, 4, null, undefined];
const result = _.sum(arr);

console.log(result);  // 输出 7，'3'、true、null 和 undefined 被忽略

在上面的代码中，'3' 被忽略（因为它是字符串），true 被忽略（因为它是布尔值），null 和 undefined 也没有影响求和的结果。

二、与原生 JavaScript 方法的比较

在原生 JavaScript 中，我们也可以通过一些常见的数组方法实现求和。最常用的方法是使用 reduce()：

const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce((acc, num) => acc + num, 0);

console.log(result);  // 输出 15

这个方法通过遍历数组，依次将每个元素加到累加器 acc 中，最终返回总和。尽管这种方法有效，但与 _.sum 相比，它的语法相对繁琐。而且，_.sum 会更加简洁、易读，并且专门处理非数值元素的忽略。

三、_.sumBy 和 _.sum 的差异

除了 _.sum，Lodash 还提供了 _.sumBy 方法，它允许我们对数组中的元素应用函数，从而对计算的结果进行某种变换。这对于求和某个属性值特别有用。比如，我们有一个对象数组，需要对某个属性的值求和，_.sumBy 就非常适用。

1. _.sumBy 示例

假设我们有一个对象数组，每个对象都有一个 value 属性，_.sumBy 可以用来对这些属性的值进行求和：

const arr = [
  { value: 10 },
  { value: 20 },
  { value: 30 }
];

const result = _.sumBy(arr, 'value');

console.log(result);  // 输出 60

在这个例子中，_.sumBy 会遍历每个对象，提取 value 属性并计算总和。_.sum 和 _.sumBy 的区别在于，后者提供了更多的灵活性，能够根据指定的函数或属性对数组元素进行处理。

2. 为什么选择 _.sumBy

当我们需要对数组元素的某个属性或计算值进行求和时，_.sumBy 是比 _.sum 更加合适的选择。通过提供一个自定义函数或属性名，_.sumBy 能够更加灵活地处理复杂数据结构。

四、如何处理包含 NaN 和 Infinity 的数组

在实际的开发中，数组可能会包含 NaN 或 Infinity 等特殊值，这些值可能会影响求和结果。_.sum 会忽略这些特殊值，因此它在面对包含这些值的数组时，也能正常计算出正确的总和。

const arr = [1, 2, 3, NaN, Infinity, -Infinity];
const result = _.sum(arr);

console.log(result);  // 输出 6，NaN 和 Infinity 被忽略

在上述例子中，NaN 和 Infinity 被自动忽略，因此结果是 6。_.sum 自动处理这些特殊值，避免了开发者手动去检查每个值。

五、性能优化

Lodash 提供的 _.sum 方法是经过性能优化的，它可以更高效地处理大量数据。当你需要对大量的数字进行求和时，使用 Lodash 提供的内置方法通常比自己手动编写代码更高效，尤其是在需要忽略非数字类型时。Lodash 在内部对性能进行了优化，以确保在处理大数据集时能够保持良好的性能表现。

性能测试

在进行性能测试时，我们可以发现，_.sum 在处理大量数据时通常比原生 reduce() 方法表现得更快，尤其是在数组中有大量非数值元素时，Lodash 会跳过这些元素，避免了不必要的运算。

const largeArray = Array(1000000).fill(1);
console.time('Lodash Sum');
_.sum(largeArray);
console.timeEnd('Lodash Sum');

console.time('Reduce Sum');
largeArray.reduce((acc, num) => acc + num, 0);
console.timeEnd('Reduce Sum');

通常，Lodash 的 _.sum 方法会稍微更快，因为它避免了额外的验证逻辑（如处理非数值类型元素的检查），并且进行了内置优化。

六、_.sum 的应用场景

_.sum 的应用场景非常广泛，特别是在处理表单数据、财务计算、报告生成等场景中。举几个常见的例子：

1. 财务报表中的总和计算

在生成财务报表时，可能需要对收入、支出等进行求和。使用 _.sum 可以轻松计算各个类别的总额：

const expenses = [100, 200, 300, 400];
const totalExpenses = _.sum(expenses);

console.log(totalExpenses);  // 输出 1000

2. 动态表单数据汇总

在动态生成表单并计算表单数据时，_.sum 可以帮助快速汇总选项值。例如，计算用户选择的多个选项的总价：

const prices = [15, 30, 45, 60];
const totalPrice = _.sum(prices);

console.log(totalPrice);  // 输出 150

推荐：

• JavaScript
• react
• vue

---